ANGULARJS Self-study Road (ii)-modules and scopes

Module

Benefits of using Modules
1. Keep the global namespace clean;
2. It is easier to write test code and keep it clean so that it is easier to find the function of isolating each other;
3. Easy to reuse code between different applications;
4. Enable the app to load parts of the code in any order.
ANGULARJS allows us to declare a module using the Angular.module () method, which accepts two parameters,
The first is the name of the module, and the second is a dependency list, which is a list of objects that can be injected into the module.

//这个方法相当于AngularJS模块的setter方法，是用来定义模块的。angular.module(‘myApp‘, []);

When you call this method, you can use it to refer to a module if you pass only one parameter. For example, you can use the following code to
Referencing the MyApp module:

// 这个方法用于获取应用//这个方法相当于AngularJS模块的getter方法，用来获取对模块的引用。angular.module(‘myApp‘)

Scope

The scope of the application is associated with the applied data model, and the scope is also the context in which the expression executes. $scope objects are places that define the application of business logic, controller methods, and view properties.

The scope is the glue between the view and the controller. Before the app renders and presents the view to the user, the template in the view is connected to the scope, and then the app sets the DOM to notify the Angularjs of the property change. This feature makes it very easy to implement promise objects such as XHR requests.

Scopes are the basis of the application state. Based on dynamic binding, we can rely on the view to update the $scope as soon as it modifies the data, or to rely on the scope to re-render the view as soon as it changes.

Scopes provide the ability to monitor changes in the data model. It allows developers to use the apply mechanism within them to notify the changes to the data model throughout the application. We define and execute an expression in the context of a scope, and it is also an intermediary that notifies another controller and other parts of the application of the event.

The world of views and $scope

Angularjs the root Ng-app element is bound to $rootscope when the view is started and generated. Rootscope is the topmost of all scope objects.

$scope object is a normal JavaScript object, and we can modify or add properties on it at will.

$scope Objects act as data models in Angularjs, but unlike traditional data models, scope is not responsible for processing and manipulating data, it is just a bridge between the view and the HTML, which is the glue between the view and the controller.

Basic function of scope

1. Provide observers to monitor changes in the data model;
2. The change of data model can be notified to the whole application, even the components outside the system;
3. can be nested, to isolate business functions and data;
4. Provides an execution environment that is required for an expression to perform an operation.

Scopes contain the functionality and data required to render a view, which is the only source of all views. Scopes can be understood as view models.

There are four different stages of life cycle processing for $scope objects. Create

When a controller or instruction is created, ANGULARJS creates a new scope with $injector and passes the scope in when the new controller or instruction runs.

Link

When angular starts running, all $scope objects are attached or linked to the view. Any function that creates a scope object also attaches itself to the view. These scopes register functions that need to be run when a change occurs in the context of the angular application.

Update

When an event loop runs, it is typically performed on top-level $scope objects (called Rootscope), and each child scope performs its own dirty-value detection. Each monitoring function checks for changes. If any change is detected, the scope object triggers the specified callback function.

Destroyed

When a $scope is no longer needed in the view, the scope will clean up and destroy itself.

Although it is never necessary to clean up the scope (because angular will handle it for you), it is useful to know who created the scope because you can use this $scope called destory () to clean up this scope.

ANGULARJS Self-study Road (ii)-modules and scopes