The role of the controller in Angularjs is to enhance the view. It is actually a function to add additional functions to the scope in the view. We use it to set the initial state of the scope object and add custom behavior.
When we create a controller on the page, Angularjs will generate and pass a $scope to this controller. Since Angularjs will automatically instantiate the controller, we only need to write the constructor. The following example shows controller initialization:
function my Controller($scope){
$="hello,world!";
}
The above method of creating a controller will pollute the global namespace. A more reasonable way is to create a module and then create a controller in the module, as follows:
var myApp=("myApp",[]);
("myController",function($scope){
$="hello,world!";
})
Use the built-in command ng-click to bind any other DOM elements such as buttons, links, and click events. The ng-click directive binds the mouseup event in the browser with the event handler set on the DOM element (for example, when the browser triggers a click event on a DOM element, the function will be called). Similar to the previous example, the binding looks like this:
<div ng-controller="FirstController">
<h4>The simplest adding machine ever</h4>
<button ng-click="add(1)" class="button">Add</button>
<a ng-click="subtract(1)" class="button alert">Subtract</a>
<h4>Current count: {{ counter }}</h4>
</div>
Both the button and the link are bound to an internal $scope operation. When clicking any element, AngularJS will call the corresponding method. Note that when setting which function is called, a parameter will be passed in brackets at the same time (add(1))
('FirstController', function($scope) {
$ = 0;
$ = function(amount) { $ += amount; };
$ = function(amount) { $ -= amount; };
});
The biggest difference between Angularjs and other frameworks is that controllers are not suitable for performing DOM operations, formatting or data operations, as well as state maintenance operations other than storing data models, it is just a bridge between view and $scope.
Controller nesting (scopes include scope)
Any part of an AngularJS application, no matter which context it is rendered, has a parent scope. For the hierarchy where ng-app is located, its parent scope is $rootScope.
By default, when AngularJS cannot find a property in the current scope, it will be searched in the parent scope. If AngularJS cannot find the corresponding property, it will search upward along the parent scope until it reaches $rootScope. If it is not found in $rootScope, the program will continue to run, but the view cannot be updated.
Let’s take a look at this behavior through examples. Create a ParentController that contains a user object, and then create a ChildController to reference this object:
('ParentController', function($scope) {
$ = {greeted: false};
});
('ChildController', function($scope) {
$ = function() {
$ = 'Ari Lerner';
};
});
If we place the ChildController inside the ParentController, the parent scope of the $scope object of the ChildController is the ParentController's $scope object. According to the mechanism of prototype inheritance, we can access the ParentController's $scope object in the subscope.
<div ng-controller="ParentController">
<div ng-controller="ChildController">
<a ng-click="sayHello()">Say hello</a>
</div>
{{ person }}
</div>
The above is all about this article. I hope it will be helpful to everyone's learning and help you get familiar with AngularJS controller.