Angular1. X on the concept of module, controller and scope

Time:2020-12-6

Controller in angularIs a function that is used to enhance the view and add functions to the scope of the view. The default controller function is defined in the global scope. as

function myController($scope){

   $scope.message ='hi guys!'

}

When a controller is created, angular generates a new $scope (local scope). The scope of the controller can be nested, such as parent controller and child controller.

$scope is OK

  • Provide observers to monitor changes in the data model

  • Changes to the data model can be notified to the application

  • Can be nested

  • Provides a runtime environment for expressions

$rootscope is bound to the root ng app.

In order to avoid polluting the whole situation, modules are usedIt is amended as follows

angular.module('myapp',[])

.controller('myController',function($scope){

 $scope.message ='hi guys!'

})

Related to the above concepts, there is a concept directive, which can be understood as custom HTML elements and attributes.

When the instruction is created, angular also creates a scope for it. This scope is divided into external scope and independent scope.

Take a look at the simplest instructions

<my-directive></my-directive>

    angular.module('myapp',[])

    .directive('my-directive',function(){

        return {

             restrict:'E',

             template:'<a href="http://baidu.com">Click me to baidu</a>'    

            }

    })

To pass data to an instruction, you can directly use the scope attributes of the external controller. The problem is that once the controller is removed or modified, our instructions have to be modified.

You can use a binding policy to pass data to instructions by creating a separate scope

<my-directive></my-directive>

     angular.module('myapp',[])

         .directive('my-directive',function(){

         return {

         Scope: {} / * creates a separate scope*/

         restrict:'E',

         template:'<a href="http://baidu.com">Click me to baidu</a>'

        }

    })

Examples are as follows

<div my-directive my-url="http://baidu.com" my-link-text="Click me to baidu">

     angular.module('myapp',[])

     .directive('my-directive',function(){

       return{

            restrict:'A',

            repalce:true,

            scope:{

                   myUrl:@,

                    myLinkText:@

                  },

             template:'<a href='{{myUrl}}'>'+'{{myLinkText}}</a>'

            };

      });

There are three independent scope binding strategies: @, =&

&Binding: for calls with parameters, an object needs to be passed. The key of the object is the parameter name, and the value is the parameter content.

If <div show= “show (email)” >, show is called in the instruction ({). email:data }

Finally, we will give an example of the concept of controller and scope. We must know that controller is a function and $scope is a local scope.

var module=angular.module('myApp',[])

     // module.controller('mainController',function() {

    // // body...//

         this.name ="Ari";

        // this.hello = function(){

        // alert('hi');

        // }

    // });

module.controller('mainController',mainController);

function mainController(){ 

    this.name ="Ari";

     this.hello = function(){ 

                    alert('hi'); 

                }

}

module.controller('controller2',controller2);

function controller2($scope){ 

    $ scope.sex  ="Female";

}

Using controller as can remove the dependency on $scope in the code and let you write pure JS functions with small coupling.

**It can be specified that controller as is written as follows:link

angular.module("app",[])

 .controller("demoController",[function(){

     var vm = this;

     vm.title = "angualr";

    return vm; 

}])

Its advantages are as follows:

  1. Defining VM will help us avoid this pitfall of JavaScript.

  2. If a certain version of angular no longer supports controller as, you can easily inject $scope to var VM = $scope;

  3. Because $scope is no longer injected, the controller is more POJO, which is a very common JavaScript object.

  4. Because there is no $scope, and the controller instance will become an attribute on the scope, we can no longer use special methods such as $watch, $emit, $on in the controller, because these things are often not supposed to appear in the controller, so we can give you a warning and better control. But if you can’t use it, you can return the controller to $scope with the agreement of the project team

  5. Because the controller instance will only be a property of $scope, all fields on the view template will be on a referenced property, which can avoid the value type pit of JavaScript prototype chain inheritance. participate inhttps://github.com/angular/an…

  6. Controller as is more friendly to coffee script and livescript.

  7. Each field method defined on the template is hosted in the controller in the scope
    Therefore, there will be no conflict in the naming of the as.