The use of AngularJS controllers --- only for yourself, not for others

Definition of Controller

Initialization of the controller

Controller scope and scope

The first point: controllers must be defined in modules, not in $rootScope, which will pollute the global scope. Definition steps: first define a module app , then define a controller, and finally implement the controller.

<html ng-app = "app">
    <head>
        <meta charset="utf-8">
        <title></title>
        <script type="text/javascript" src="../angular-1.6.9/angular.js"></script>
    </head>
    <body ng-controller="initController as init">
        <div>
            price: <input type="number" ng-model="price"/><br>
            amount: <input type="number" ng-model="amount"/><br>
            total: {{init.total()}}
        </div>
        <script type="text/javascript">
            function initController($scope) {
                $scope.price = 8.0;
                $scope.amount = 10;
                this.total = function() {
                    return $scope.price * $scope.amount;
                }
            }
            var app = angular.module("app", []);
            app.controller("initController", initController);
        </script>
    </body>
</html>

Second point: The initialization of the controller here is done in the form that the constructor is executed.

The third point: It is also the most difficult point, but it is not difficult, but if you don’t understand the concept of scope, then there will be errors and the code will not achieve the expected effect. I really don’t know how to correct it. Controllers are defined in modules, so calling the controller without the scope of the module is definitely invalid. For example, slightly modify the above code

<app-html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script type="text/javascript" src="../angular-1.6.9/angular.js"></script>
    </head>
    <body ng-controller="initController as init">
        <div>
            price: <input type="number" ng-model="price"/><br>
            amount: <input type="number" ng-model="amount"/><br>
            total: {{init.total()}}
        </div>
        <script type="text/javascript">
            function initController($scope) {
                $scope.price = 8.0;
                $scope.amount = 10;
                this.total = function() {
                    return $scope.price * $scope.amount;
                }
            }
            var app = angular.module("app", []);
            app.controller("initController", initController);
        </script>
    </body>
</html>

The result of running is

What does it mean? Means calling the method in the controller fails, why? Because it can be seen from app.controller("initController", initController) that initController belongs to the app module, and init is the name of initController , but looking at the html code, there is no app module at all. So no.

Finally, a small detail needs to be explained: can you directly use the initController object to call the total() method without the name init of the initController object? Its properties must be accessed by the controller object name.

Suddenly found there is a small detail: modify the code

<html ng-app = "app">
    <head>
        <meta charset="utf-8">
        <title></title>
        <script type="text/javascript" src="../angular-1.6.9/angular.js"></script>
    </head>
    <body>
        <div  ng-controller="initController as init">
            price: <input type="number" ng-model="price"/><br>
            amount: <input type="number" ng-model="amount"/><br>
            total: {{init.total()}}
        </div>
        <script type="text/javascript">
            function initController($scope) {
                $scope.price = 8.0;
                $scope.amount = 10;
                $scope.total = function() {
                    return $scope.price * $scope.amount;
                }
            }
            var app = angular.module("app", []);
            app.controller("initController", initController);
        </script>
    </body>
</html>

Will this work? no!

this.total = function() { return $scope.price * $scope.amount;} means to hang the total() method on the scope of the currently active controller. but

$scope.total = function() {return $scope.price * $scope.amount;} means to hang the total() method on $scope. Obviously the $scope scope is larger than the initController scope, you can't access an object beyond your scope in a relatively small scope. Mining these details is very time consuming, especially for rookies. Understanding the details is the real grasp of the concept.

The use of AngularJS controllers --- only for yourself, not for others

Guess you like