Detailed explanation of the use of AngularJS controller_AngularJS

The role of the controller in Angularjs is to enhance the view. It is actually a function used to add additional functionality to the scope in the view. We use it to set the initial state of the scope object and add custom behaviors. .

When we create a controller on the page, Angularjs will generate and pass a $scope to the 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){
 $scope.msg="hello,world!"; 
}

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

var myApp=angular.module("myApp",[]);
myApp.controller("myController",function($scope){
 $scope.msg="hello,world!";
})

Use the built-in command ng-click to bind buttons, links and other DOM elements to click events. The ng-click directive binds the mouseup event in the browser to 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>

Buttons and links are bound to an operation in the internal $scope. AngularJS will call the corresponding method when any element is clicked. Note that when setting which function to call, a parameter (add(1)) will also be passed in parentheses

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 operations, and state maintenance operations other than storing the data model. It is just a bridge between the view and $scope. .

Controller nesting (scope contains scope)

Any part of an AngularJS application, no matter which context it is rendered in, has a parent scope. For the level where ng-app is located, its parent scope is $rootScope.

By default, when AngularJS cannot find a property in the current scope, it will look for it in the parent scope. If AngularJS cannot find the corresponding attribute, it will search upwards along the parent scope until it reaches $rootScope. If it is not found in $rootScope, the program will continue to run, but the view will not be updated.

Let’s look at this behavior through an example. Create a ParentController, which contains a user object, and then create a ChildController to reference this 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 $scope object of the ChildController is the $scope object of the ParentController. According to the mechanism of prototypal inheritance, we can access the $scope object of ParentController 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 it will be helpful to your study and help you become familiar with the AngularJS controller.