Detailed explanation of the use of ANGULARJS controller _angularjs

The controller's role in ANGULARJS is to enhance the view, which is actually a function that adds additional functionality to the scope in the view, which we use to set the initial state of the scope object and add custom behavior.

When we create a controller on the page, Angularjs generates and passes a $scope to the controller, because ANGULARJS automatically instantiates the controller, so we just need to write the constructor. The following example shows the controller initialization:

function my Controller ($scope) {
 $scope. msg= "hello,world!"; 
}

The above method of creating a controller pollutes the global namespace, and a more reasonable approach is to create a module and then create a controller in the module as follows:

var myapp=angular.module ("MyApp", []);
Myapp.controller ("Mycontroller", function ($scope) {
 $scope. msg= "hello,world!";
})

With the built-in instruction Ng-click, you can bind any other DOM element, such as a button, a link, to a click event. The Ng-click directive binds the MouseUp event in the browser with the event handlers that are set on the DOM element (for example, when the browser triggers a click event on a DOM element, the function is invoked). Like the previous example, the binding looks like this:

<div ng-controller= "Firstcontroller" >
 
 

Both the button and the link are bound to an internal $scope operation, and Angularjs will invoke the corresponding method when clicking on any element. Note that when the setting calls which function, a parameter is passed with parentheses (add (1)).

App.controller (' Firstcontroller ', function ($scope) {
$scope. counter = 0;
$scope. Add = function (amount) {$scope. Counter + + = amount;
$scope. Subtract = function (amount) {$scope. Counter-= amount;}
);

The biggest difference between ANGULARJS and other frameworks is that the controller is not suitable for performing DOM operations, formatting or data manipulation, and state maintenance operations other than the storage data model, which is just a bridge between the view and the $scope.

Controller nesting (scope includes scope)

Any part of the ANGULARJS application, regardless of the context in which it is rendered, has a parent scope. For Ng-app's hierarchy, its parent scope is $rootscope.

By default, when a property cannot be found in the current scope, angularjs is searched in the parent scope. If Angularjs cannot find the corresponding property, the parent scope is searched up until the $rootscope is reached. If it is not found in $rootscope, the program continues to run, but the view cannot be updated.

Take a look at this behavior by example. Create a parentcontroller that contains a user object, and then create a Childcontroller to reference the object:

App.controller (' Parentcontroller ', function ($scope) {
$scope. person = {Greeted:false};
});
App.controller (' Childcontroller ', function ($scope) {
$scope. SayHello = function () {
$scope. person.name = ' Ari Lerner ';
};

If we place the Childcontroller inside the Parentcontroller, the parent scope of the Childcontroller $scope object is the Parentcontroller object. Depending on the mechanism of the prototype inheritance, we can access the Parentcontroller $scope object in the child scope.

<div ng-controller= "Parentcontroller" >
<div ng-controller= "Childcontroller" >
<a ng-click= "SayHello ()" >say hello</a>
</div>
{{person}}
</div>

The above is the entire content of this article, I hope to help you learn, to help you become familiar with the ANGULARJS controller.