AngularJS self-learning path (2)-module and scope, and angularjs self-study

AngularJS self-learning path (2)-module and scope, and angularjs self-study
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 you can easily find mutually isolated functions;
3. Easy to reuse code between different applications;
4. Enable the application to load all parts of the Code in any order.
AngularJS allows us to use the angular. module () method to declare a module. This method can accept two parameters,
The first is the module name, and the second is the dependency list, that is, the list of objects that can be injected into the module.

// This method is equivalent to the setter method of the AngularJS module and is used to define the module. Angular. module ('myapp', []);

When this method is called, if only one parameter is passed, it can be used to reference the module. For example, you can use the following code
REFERENCE The myApp module:

// This method is used to obtain the application. // This method is equivalent to the getter method of the AngularJS module and used to obtain references to the module. Angular. module ('myapp ')

Scope

The application scope is associated with the data model of the application, and the scope is also the context of expression execution. $ Scope object is the place where the application business logic, controller methods, and view attributes are defined.

The scope is the glue between the view and the Controller. Before the application renders the view and presents it to the user, the template in the view is connected to the scope, and the application sets the DOM to notify AngularJS of attribute changes. This function makes the implementation of promise objects such as XHR requests very easy.

Scope is the basis of application status. Based on Dynamic binding, we can rely on the view to update $ scope immediately when modifying data, or re-render the view immediately when it changes.

The scope provides the ability to monitor data model changes. It allows developers to use the apply mechanism to notify the application of changes to the data model. We define and execute expressions in the context of the scope, and it is also an intermediary that notifies another controller of the event and applies other parts.

View and $ scope world

When AngularJS starts and generates a view, it binds the root ng-app element with $ rootScope. RootScope is the top layer of all scope objects.

$ Scope object is a common JavaScript Object on which we can modify or add attributes at will.

$ Scope Objects Act as data models in AngularJS, but unlike traditional data models, scope is not responsible for processing and operating data. It is only a bridge between views and HTML, it is the glue between the view and the Controller.

Basic functions of Scope

The scope contains the functions and data required for rendering a view. It is the only source of all views. You can understand the scope as a view model ).

$ Scope objects have four different stages of lifecycle processing. Create

When creating a controller or command, AngularJS will use $ injector to create a new scope and pass the scope when the newly created controller or command is running.

Link

When Angular starts running, all $ scope objects will be appended or linked to the view. All functions that create a scope object will also attach themselves to the view. These scopes will register the functions that need to be run when Angular application context changes.

Update

When an event runs cyclically, it is usually executed on the top $ scope object (called rootScope), and each sub-scope performs its own dirty value detection. Each monitoring function checks for changes. If any changes are detected, the scope object triggers the specified callback function.

Destroy

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

Although it will never need to clear the scope (because Angular will handle it for you), it is useful to know who created this scope, because you can use this $ scope called destory () to clear the scope.