Details on the use of AngularJS controller

The role of the controller in Angularjs is to enhance the view, which is essentially a function that adds additional functionality to the scope of 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 generates and passes a $scope to the controller. Since Angularjs automatically instantiates 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 pollutes the global namespace. It is more reasonable 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!";
})

The built-in ng-click allows you to bind buttons, links, and any other DOM element to a click event. The ng-click directive binds the mouseup event in the browser to the event handler set on the DOM element (for example, the function is called when the browser triggers a click on an DOM element). 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>

The button and the link are bound to an operation on the internal $scope, and AngularJS calls the corresponding method when any element is clicked. Note that when setting which function to call, one argument is also passed in 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 main difference between Angularjs and other frameworks is that the controller is not suited to perform DOM operations, formatting or data operations, and state maintenance operations other than storing the data model. It is simply a bridge between the view and $scope.

Controller nesting (scope contains scope)

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

By default, when an attribute cannot be found in the current scope, ES43en looks it up in the parent scope. If AngularJS does not find the corresponding attribute, it looks up through parent scope 1 until $rootScope is reached. If it is not found in $rootScope, the program continues to run, but the view cannot be updated.

Let's look at this behavior by example 1. Create a new ParentController containing a new user object, and create a new 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 ChildController inside ParentController, the parent scope of the $scope object of ChildController is the $scope object of ParentController. Based on the mechanism of prototype inheritance, we can access the $scope object of ParentController 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 the content of this article, I hope to help you learn, help you familiar with AngularJS controller.