angularjs controller

The role of the controller in Angularjs is to enhance the view, it is actually a function to add extra functionality to the scope in the view, we use it to set the initial state of the scoped object and add custom behavior.

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:

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

Use the built-in directive ng-click to bind buttons, links, and any other DOM element to a click event. The ng-click directive binds the mouseup event in the browser with an event handler set on a 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 buttons and links are bound to an action in the internal $scope, and AngularJS calls the corresponding method when any element is clicked. Note that when setting which function to call, a parameter 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 biggest difference between Angularjs and other frameworks is that the controller is not suitable to perform DOM manipulation, formatting or data manipulation, 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 what context it is rendered in, has a parent scope. For the level of ng-app, its parent scope is $rootScope.

By default, when AngularJS cannot find a property in the current scope, it looks in the parent scope. If AngularJS can't find the corresponding property, it will look up the parent scope until it reaches $rootScope. If it is also not found in $rootScope, the program will continue to run, but the view will not be updated.

Let's look at this behavior with an example. Create a ParentController that 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 put the ChildController inside the ParentController, the parent scope of the ChildController's $scope object is the ParentController's $scope object. According to the mechanism of prototypal inheritance, we can access the ParentController's $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 my understanding of the controller, I hope you can advise.