Angular (3) of the front-end framework and angular of the front-end framework

Angular (3) of the front-end framework and angular of the front-end framework
 

This section describes Angular's dirty checking, functions, and services.

1. Dirty checking

Angular usesdirty checkTo track data changes, which is the basis of two-way data binding.

The so-called dirty check means angular binds a watcher to each data. When it reaches the "specific check stage", angular will individually ask whether the data corresponding to watcher has changed. If yes, then run the corresponding monitor. Until no dirty data exists. This process is called a digest loop.

Note that there is not a regular thread that keeps dirty checking. Angular performs a dirty check only when a specific event occurs. Therefore, if you enter data in input or retrieve data through $ http, angular automatically specifies the digest loop until the data changes. However, angular cannot be aware of the code like the following, so the data displayed in the DOM does not change.

.controller("dirty-check-test", function($scope) {

    var model = $scope.model = {

      time:1,

    };

    setInterval(function(){

        model.time ++; //Error. The digest loop cannot be triggered.

    }, 1000);

Then we can use$scope.$applyMethod To notify Angular that a digest loop is required.

setInterval(function() {

      //The correct method is to notify the change through $ apply.

      $scope.$apply(function() {

        model.time ++;

      });

    }, 1000);

We can notify Angular of data changes, or let Angular tell us whether a data changes.$scope.$watchWe can register a listener and immediately execute a callback when the data changes.

 $scope.$watch(“model.time”, function() {//xx});

Why should Angular use dirty check? This is the best compatibility and has the least limit on usage. There are actually two alternatives:

1. Check whether the data changes through the new getter setter interface defined in ES5, but there is no way for unsupported browsers.

2. Use the custom getter setter interface to change the data, which imposes great limitations on $ scope and must be modified through the interface provided by Angular.

Ii. Dependency Injection

Angular provides the dependency injection function. There are two ways to declare dependencies. One is to declare Dependencies by parameter names, for example:

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

Angular uses$httpThis parameter name is used to infer the need for injection.$httpService. However, the disadvantage of this method is that if the code is compressed, the parameter name will be modified. In this case, we should use the display statement:

 .controller(“MyController”, [“$scope”, “$http”, function($scope, $http) {} ]);

Because string constants are not compressed, this declaration method will not be affected by the Code compression tool.

Iii. Services

Services are the best way to share data in different controllers and stay consistent throughout the application lifecycle.

For example, many websites need to log on, and the information of logged on users runs through the entire Session. Then we can create a CurrentUser service.

 .factory(“CurrentUserService”, function() {});

When necessary, we can inject this service directly through dependency injection:

 .controller(“MyController”, [“$scope”, “CurrentUserService, function($scope, $user) {}]);

Services in Angular are Singleton. Angular also provides $ http built-in services.