In fact, I don’t know who should be targeted or where to start writing, so I will start writing according to a simple idea.
1.angular.element
2.angular.Bootstrap
We are very clear that ng-app is applied to nodes, and angular automatically helps you initialize. The initialization process is divided into the following steps
1.angular will be automatically initialized when document load, and first, the node specified by the ng-app directive will be found.
2. Loading module-related instructions
3. Create an application-related injector (dependence manager)
4. Start compiling Dom with the established ng-app as the root node
Now we initialize it ourselves and make something equivalent to the ng-app directive. angular.element This is the wrapper, wrapping the original DOM element or HTML string as jQuery element. angular.Bootstrap can manually initialize the script, we use these two to initialize this script
The code copy 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 the outside of ng-app ~~{{1+2}}
<div id="widuu" >This is 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 clearly see that the official angularjs document is full of camel nomenclature, such as ngApp, ngModule, ngBind, etc., are related instructions. Among them, html compiler allows us to define element attributes and tags by ourselves. Angular calls these additional behaviors directives.
The official documentation explains compiler like this
The code copy 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 directives. 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 an angular service, responsible for traversing dom nodes and finding properties. Compilation is divided into two stages:
1. Compilation: traverse the nodes and collect all directives, return a linking function
2. Link: Bind directives into a scope and create a live view. Any changes in scope will be reflected in the view (update the view); any user's activity (change) to the template will be reflected in the scope model (two-way binding). This allows the scope model to reflect the correct value.
Some directives, such as ng-repeat, copy a specific element (combination) once for each element in the collection. Compilation and linking are two stages to improve performance. Because the cloned template only needs to be compiled once, and then link the elements in each collection once (similar to template cache).
3. Create your own directive step by step
1. Understand directive
First of all, we understand that directive is based on camel nomenclature, such as ngModule. When compiling, the match is like this, eg:
The code copy is as follows:
<input ng-model="foo">
<input data-ng:model="foo">
Directive can use x- or data- as prefix, and can use the :, -, or _ etc delimiter to convert camel naming methods, as follows:
The code copy 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, we use ng-bind to correspond to ngBind, this format
$compile can match directive based on element name, attribute, class name and comment
The code copy is as follows:
<my-dir></my-dir>
<span my-dir="exp"></span>
<!-- directive: my-dir exp -->
<span></span>
During the compilation process, compiler matches text with embedded expressions in attributes (such as {{something}}) through the $interpolate service. These expressions will be registered as watches and will be updated together as part of the digest cycle. Here is a simple interpolation:
<img src="img/{{username}}.jpg"/> Hello {{username}}!
2. Compilation steps
Three steps to "compile" HTML:
1. First, convert HTML into DOM objects through the browser's standard API. This is a very important step. Because the template must be parsable (compliant with specifications). This can be compared with most template systems, which are generally based on strings, not DOM elements.
2. Compilation of the DOM is done by calling the $comple() method. This method traverses the DOM and matches the directive. If the match is successful, it will be added to the directive list together with the corresponding DOM. As long as all directives associated with the specified DOM are identified, they will be sorted in priority and execute their compile() function in that order. Directive compile function has an opportunity to modify the DOM structure and is responsible for generating the parsing of the link() function. The $compile() method returns a combined linking function, which is a collection of linked functions returned by the compile function of the directive itself.
3. Connect the template to the scope through the linking function returned in the previous step. This in turn calls directive's own linking function, allowing them to register some listeners on the element, and create some watches with scope. The result in this is a two-way, instant binding between scope and DOM. When the scope changes, the DOM will get the corresponding response.
The code copy 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
The code copy is as follows:
<svg>
<circle ng-attr-cx="{{cx}}"></circle>
</svg>
That’s all today, and start writing to create directive tomorrow ~~~ The control length should not be too long, there are many main concepts in this chapter~~~