Angularjs start-up boot process

Before booting: library phase

In the example, we define a directive Ez-duang, which should be expanded into an animated display.

Example: http://www.hubwiz.com/course/54f3ba65e564e50cfccbad4b/

However, there seems to be nothing animated to show up. Angularjs seems to have no job, why?

A bit like the operating system, ANGULARJS also has a boot-boot concept.

When you introduce angular.min.js in an HTML file, Angularjs just creates a global angular object that has some methods for developers to invoke, but the application framework is not yet established.

At this stage, Angularjs is just a library, similar to jquery, you can use Angular.element () to manipulate the DOM, or you can use Angular.injector () to create an injector ... However, you define the instructions that you create for the controller, the services you encapsulate, the templates you develop ... All of these components are still lying there silently, not being integrated together.

We say that the framework is not working yet, and it is still a library phase.

Only by booting, the ANGULARJS framework begins to stitch those components together and the application really begins to run.

Try adding a Ng-app instruction to the HTML element and running it again, like so!

1. Ng-app="Ez-stuff">
2. ....

Automatically boot the boot framework

As you can see, if there is a tag in the HTML template with the Ng-app attribute, then when the DOM tree is established, ANGULARJS will automatically enter the boot process and start the entire frame:

Try moving the ng-app instruction to the BODY element to see what's different?

Manually boot the boot framework

In most cases, we use the NG-APP directive to boot automatically, but if multiple ng-app,angularjs in an HTML file will only automatically boot the first Ng-app application it finds, this is a scenario that requires manual booting.

We can use the Angular.bootstrap () method for manual booting:

1. Angular. Bootstrap(element, [modules], [config]);

The bootstrap method has three parameters:

• element: A DOM element, with this element being the root of the angular application, equivalent to the Ng-app element at auto-boot. This parameter is required. For example: Document, Document.body and so on.
• Modules: An array of modules to be loaded at boot time. For example: [], ["Ezstuff"] and so on. Since our HTML references the Ez-duang directive defined in the Ezstuff module, we need to specify that the Ezstuff module be loaded.
• Config: Boot configuration item, optional. Let's just ignore it.

Finally, we use the following form for manual booting:

1. Angular. Bootstrap(document, ["Ezstuff"]);

The improved code has been pre-placed in the http://www.hubwiz.com/course/54f3ba65e564e50cfccbad4b/"Angularjs boot Process" on page Three

Boot 1th step: Create an injector

The boot process transforms the Angularjs from the library into a framework.

Recall that we mentioned earlier that angularjs in-depth bone marrow uses dependency injection, so it is no surprise that at the beginning of the boot process, it is necessary to create an injector first.

The injector is the gateway to all the functions of the ANGULARJS, and the function of the ANGULARJS is implemented by means of a module. So, when creating the injector, you need to tell Angularjs which modules to load (the NG module is built-in and does not need to be explicitly specified).

In the auto-boot scenario, you can assign Ng-app to specify a module that needs to be loaded, such as:

1. Ng-App = "Ezstuff"

In a manual boot boot scenario, specify the module that needs to be loaded via the second parameter of the bootstrap method, such as:

1. Angular. Bootstrap(document, ["Ezstuff"]);

INSIDE: Whether auto-start or manual start-up, the final call to the injector () method on the angular object creates an injector and then stores the injector in the root object's data:

1. var injector = angular. Injector(["ng","Ezstuff"]);
2. Angular. Element(document). Data("$injector",injector);

In the Code on page Fourth of the "Angularjs boot process" in http://www.hubwiz.com/course/54f3ba65e564e50cfccbad4b/, we begin to simulate the first step of the boot process: creating an injector.

Boot 2nd step: Create a root scope

The scope object is an important service for ANGULARJS to implement data binding, so after the bootstrap is established, Angularjs immediately creates a root scope on the root node of the app: $rootScope object.

In the case of automatic boot booting, the DOM node where the Ng-app is located corresponds to the root scope. If manual boot is initiated, then the first parameter specified in the bootstrap method corresponds to the root scope.

In either case, once the $rootscope object is created successfully, Angularjs stores the object in the root node's data, and we can view the object in the following way:

1. Angular. Element(approot). Data("$rootScope");

You can tinker with the code and see what $rootscope is.

Boot 3rd step: compiling DOM subtree

The final step of the boot process is to compile the DOM subtree as the root node of the DOM node where Ng-app is located.

The process of compiling these operations is usually done with instructions:

1. Transforms a DOM object.
2. Hook up the event listener on the DOM object.
3. The data listener is hooked on the scope object corresponding to the DOM object.

The compilation process is quite a feature of the ANGULARJS, and we'll go deeper in the next section.

Now you should see the results, right?

Compiler/$compile

Compiler $compile is a angularjs built-in service that is responsible for traversing the DOM tree to find matching instructions and invoking the instruction's implementation code for processing.

HTML compilation consists of 3 steps:

• Matching instructions

$compile traverse the DOM tree, if an element is found to match an instruction, the instruction is added to the list of instructions for that DOM element. A DOM element may match multiple instructions.

• compiler function for executing instructions

When all instructions for a DOM element are gathered up, the compiler sorts according to the instruction's priority/priority instruction. The compile function for each instruction is executed sequentially. The result of each compile execution produces a link function, which is combined into a composite link function.

• To perform a generated link function

$compile link the template to scope by executing the link function of the instruction. The result is a dynamic data binding between a DOM view and the scope object model.

Why separate the two steps of compiling and connecting?

Simply put, when the changes in the data model lead to changes in the DOM structure, the instructions need to define the compile () function and the link function separately. For example, the Ng-repeat directive needs to replicate DOM elements for each member in the data collection. Separating the compilation and linking process effectively improves performance because DOM replication is placed in compile () only once, but the link occurs on each generated DOM element, so the directive's link () function executes multiple times.

Directives rarely require the compile function, because most directives consider a particular instance of a DOM element, rather than altering the structure of the DOM. So the link function is more commonly used.

Directive/directive

Generally speaking, directives are markers on DOM elements (such as attributes, elements, CSS classes, etc.) that tell Angularjs's HTML compiler ($compile service) to bind specific behaviors to DOM elements, or to change DOM elements.

Directives can be placed in element names, attributes, CSS class names, and comments. Here are some of the equivalent triggers for the "ng-bind" directive:

1. <span ng-bind="exp"></span>
2. <span Class="NG-BIND:EXP;" ></span>
3. <ng-bind></ng-bind>
4. <!--directive:ng-bind Exp---

The implementation of a directive is essentially a class factory that returns an instruction definition object that the compiler operates on according to the instruction definition object.

The question is, how does the Ez-duang in HTML match up to the Ezduang in JavaScript?

Normalization of Directives

Angularjs the tag and attribute names of HTML elements into a canonical camel-like string before matching detection:

1. Remove X-and data-for name prefixes
2. To:,-or _ as a separator, cut the string into words, except the first word, the remaining words are capitalized in the first letter
3. Re-stitch the words

For example, the following notation is equivalent to matching the ngbind directive:

2. <span ng-bind="name"></span> <br>
4. <span ng:bind="name"></span> <br>
6. <span ng_bind="name"></span> <br>
8. <span data-ng-bind="name"></span> <br>
10. <span x-ng-bind="name"></span> <br>

So, in the previous lesson, the Ez-duang directive that we used in HTML will be normalized to Ezduang, and the compiler uses this canonical name to match the registered instructions.

Reference: http://www.hubwiz.com/course/54f3ba65e564e50cfccbad4b/

Angularjs start-up boot process