Angularjs Basics

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.

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

It will be automatically initialized when the document load is loaded. 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. This is the wrapper, wrapping the original DOM element or HTML string as a jQuery element. You can initialize the script manually, we use these two to initialize this script

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

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:

Directive can use x- or data- as prefix, and can use the :, -, or _ etc delimiter to convert camel naming methods, as follows:

Generally, we use ng-bind to correspond to ngBind, this format
$compile can match directive based on element name, attribute, class name and comment

During the compilation process, compiler matches text and embedded expressions in attributes through the $interpolate service (such as {{something}}). 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.

ngAttr attribute binding

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~~~