The angular of the front frame (i.)

First, angular features:

1, two-way data binding, the main selling point

2. The MVVM model, separating the view and logic

3. Dependency Injection

Personal feeling, in angular, the view corresponds to the HTML template, and the view logic corresponds to the directive and controller.

Second, the module

In Angular, a module is used to manage namespaces, and the logic of different pages can be isolated through different modules. Although it is called "module", it is more like a namespace, or a package.

Declare a module by Angular.module ("name", [/ dependency/]). The module declaration period in angular is divided into two steps, one is the configuration phase and the other is the running phase.

angular.module(“app-name”, [])

.config(function() { //配置阶段，先执行

})

.run(function() { //运行阶段，后执行

});

In general, we will divide the modules by page, or we can declare the whole application as a module and then start the whole page logic through the module.

You can think of run as the main function, and if there is some code that needs to be executed when the app starts, such as judging if there is currently a login, you can put it in the run function.

Three, two-way data binding

Bidirectional data binding is the main feature of Angular. In general, my data are one-way bound, that is, when the variable in JS is updated to the DOM, but most of the time does not change the value of the DOM in the time to automatically update the variables in JS.

Look at a two-way binding example:

 <input ng-model=“user.name" type="text" placeholder="Your name">

This implements a two-way binding, where the value is changed immediately when the value is entered in input h1 .

Because of the problem of JS value, it is suggested that binding is always done by object properties rather than by direct value.

Iv. Controllers (Controller)

In Angular, the role of the controller is to create a new scope, Angular creates a controller and creates one for it $scope ， . This $scope is a new scope. Of course you can declare the relationship between this scope and the parent scope, whether it is isolation or inheritance.

In angular this declares a controller:

 app.module(“home”, [])

      .controller(“MyController”, function($scope) {

           $scope.name = “Mr Lee”;

      });

This is used in HTML.

 <div MyController>{{name}}</div>

或者这样 —>

 <MyController>{{name}}</div>

还有通过class或者注释等方式都可以使用 —>

Angular is an MVVM model, Model-view-viewmodel, where ViewModel is the model of the view, which is $scope in Angular. Therefore $scope , the function is to store data related to the corresponding view. For example, in the example above we have stored a name, if it is a personal card, we store this person's basic information.

In Angular, there is one $rootScope , and all others $scope form a $rootScope tree that is the root node. Each $scope is responsible for the corresponding view of the data storage, business logic and so on.

In the scope of a controller, you can directly use the properties on the $scope, such as what you $scope declare:

 $scope = { name: “Lily”, sayName: function(){alert($scope.name{});

So you can use it in HTML.scope

 <button ng-click=“sayName()”>say name</button>

The angular of the front frame (i.)