Home > Developer > JavaScript
Angularjs basics and angularjs Basics
In fact, I don't know who to write or where to start. So here I will write it based on a simple idea.
1. angular. element
2. angular. Bootstrap
We know very well that the ng-app is applied to the node and angular will automatically initialize it for you. The initialization process is divided into the following steps:
1. angular will be automatically initialized during document load. First, the node specified by the ng-app command will be found.
2. Load module-related commands
3. Create an injector (dependency manager) related to the application)
4. Use the developed ng-app as the root node to start compile the Dom.
Now let's initialize it ourselves to make something equivalent to the ng-app command. Angular. element: This is packaging. It encapsulates the original DOM element or HTML string as the jQuery element. Angular. Bootstrap can manually initialize the script. We use the two to initialize the script.
Copy codeThe Code is as follows:
<! Doctype html>
<Html lang = "zh-cn">
<Head>
<Meta charset = "UTF-8">
<Title> Bootstrap-manual </title>
<Style type = "text/css">
. Ng-cloak {
Display: none;
}
</Style>
</Head>
<Body>
Here is outside ng-app ~~ {1 + 2 }}
<Div id = "widuu"> here is the ~~~ in ng-app ~~~ {1 + 2 }}</div>
<Script src = "angular. min. js" type = "text/javascript"> </script>
<Script type = "text/javascript">
Angular. element (document). ready (function (){
Angular. bootstrap (angular. element (document. getElementById ("widuu ")));
});
</Script>
</Body>
</Html>
2. compiler
We can clearly see that angularjs official documents are based on the hump naming method, such as ngApp, ngModule, ngBind, and so on. Among them, html compiler allows us to define element attributes and tags by ourselves, angular calls these additional actions direves ves.
The official documentation explains compiler as follows:
Copy codeThe Code is as follows:
Compiler
Compiler is an Angular service which traverses the DOM looking for attributes. The compilation process happens in two phases.
Compile: traverse the DOM and collect all of the ctictives. The result is a linking function.
Link: combine the directives with a scope and produce a live view. any changes in the scope model are reflected in the view, and any user interactions with the view are reflected in the scope model. this makes the scope model the single source of truth.
Some directives such as ng-repeat clone DOM elements once for each item in a collection. having a compile and link phase improves performance since the cloned template only needs to be compiled once, and then linked once for each clone instance.
Compiler is a angular service that traverses dom nodes and finds attributes. Compilation is divided into two phases:
1. Compile: traverse nodes and collect all directives. A link function linking function is returned.
2. Link: bind ves to a scope to create a live view ). Any changes in the scope will be reflected in the view (update view); any user's activity (change) on the template will be reflected in the scope model (two-way binding ). This allows the scope model to reflect the correct value.
Some direves ves, such as ng-repeat, will copy a specific element (combination) for each element in the collection ). The compilation and link phases improve the performance. Because the cloned template only needs to be compiled once and then linked once for the elements in each set (similar to the template cache ).
3. Create your own directive step by step
1. Learn more about direve ve
First, we understand that directive adopts the camper naming method, such as ngModule. The matching method is as follows during compilation. For example:
Copy codeThe Code is as follows:
<Input ng-model = "foo">
<Input data-ng: model = "foo">
Directive can use x-or data-as the prefix, and can use separators such as:,-, or _ to convert the hump naming method, as shown below:
Copy codeThe Code is as follows:
<Span ng-bind = "name"> </span> <br/>
<Span ng: bind = "name"> </span> <br/>
<Span ng_bind = "name"> </span> <br/>
<Span data-ng-bind = "name"> </span> <br/>
<Span x-ng-bind = "name"> </span> <br/>
Generally, ng-bind is used to correspond to ngBind.
$ Compile can match directive based on element names, attributes, class names, and annotations.
Copy codeThe Code is as follows:
<My-dir> </my-dir>
<Span my-dir = "exp"> </span>
<! -- Directive: my-dir exp -->
<Span class = "my-dir: exp;"> </span>
During compilation, compiler uses the $ interpolate service to match the embedded expressions in the text and attributes (for example, {something }}). These expressions will be registered as watches and updated together as part of digest cycle. The following is a simple interpolation:
Hello {username }}!
2. Compilation steps
Three steps for HTML "Compilation:
1. First, use the standard API of the browser to convert HTML to DOM objects. This is an important step. Because the template must be an HTML that can be parsed (compliant with the specifications. Here we can compare it with most template systems. They are generally string-based, not DOM-based.
2. Compile the DOM by calling the $ comple () method. This method traverses the DOM and matches direve ve. If the match succeeds, it is added to the directive list together with the corresponding DOM. As long as all directive associated with the specified DOM are identified, they will sort by priority and execute their compile () function in this order. The compile function of directive has the opportunity to modify the DOM structure and is responsible for parsing the link () function. The $ compile () method returns a set of linking functions returned by all compile functions of directive.
3. Connect the template with the scope using the linking function returned in the previous step. In turn, this will call the linking function of directive itself, allowing them to register some listeners (listener) on the element, and create some watches together with scope. The result is a bidirectional and real-time binding between the scope and DOM. When the scope changes, the DOM will get the corresponding response.
Copy codeThe Code is as follows:
Var $ compile =...; // injected into your code
Var scope = ...;
Var html = '<div ng-bind = 'exp'> </div> ';
// Step 1: parse HTML into DOM element
Var template = angular. element (html );
// Step 2: compile the template
Var linkFn = $ compile (template );
// Step 3: link the compiled template with the scope.
LinkFn (scope );
NgAttr attribute binding
Copy codeThe Code is as follows:
<Svg>
<Circle ng-attr-cx = "{{ cx}"> </circle>
</Svg>
Write it here today and create directive tomorrow ~~~ The length of control should not be too long. There are many main concepts in this chapter ~~~
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
