Angular of the front-end frame (iii.)

This section is about angular's dirty checks, features, and services.

First, Dirty check

Angular internal dirty check to track data changes, which is the basis for the implementation of bidirectional data binding.

The so-called dirty check, that is, angular will give each data binding a watcher, when to the "specific inspection phase", angular will be asked watcher each of its corresponding data has not changed, if any, then run the corresponding monitor. Until there is no dirty data. This process is called the Digest loop.

Note that there is not a timed thread that keeps doing dirty checking. Angular dirty checks are performed only when a specific event occurs. So if the user inputs in input, or $http retrieve the data, angular of course, until this time the data may change, will automatically specify the digest loop. But if the code is like this, angular is not known, 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 ++; //错误，无法触发 digest 循环。

    }, 1000);

Then we can $scope.$apply inform Angular that the digest loop needs to be done by means of the method.

setInterval(function() {

      //正确的方式，通过 $apply 通知变化

      $scope.$apply(function() {

        model.time ++;

      });

    }, 1000);

We can notify Angular data changes, or let Angular tell us whether a data has changed, through which $scope.$watch we can register a listener and execute callbacks immediately when the data changes.

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

Angular Why use dirty checking, because this is the best compatibility and the least restrictive way to use the implementation. In fact, there are two alternative options to achieve:

1. See if the data changes through the new Getter Setter interface defined in the ES5, but there is no way to support browsers that are not supported.

2. Change the data through a custom Getter setter interface, which limits the $scope and must modify the data through the interfaces provided by Angular.

Ii. Dependency Injection

Angular provides the functionality of dependency injection. There are two ways to declare dependencies, one to declare by parameter names, such as:

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

Angular uses $http this parameter name to infer that a service needs to be injected $http . However, one disadvantage of this approach is that if the code is compressed, the parameter name is modified. At this point we should use the displayed declaration:

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

Because string constants are not compressed, this declarative approach is not affected by the code compression tool.

Third, the service

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

For example, many websites need to log in, and the information of the logged-in user is actually throughout the session. Then we can create a CurrentUser service.

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

When needed, we inject this service directly through dependency injection:

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

The services in angular are single-instance. and angular also provides $http this built-in service.

Angular of the front-end frame (iii.)