Getting started with Angularjs basics_AngularJS

Regarding this, I actually don’t know who I should target or where to start writing, so here I will start writing according to a simple idea

1.angular.element
2.angular.Bootstrap

We know very well that when ng-app is applied to a node, angular will automatically initialize it for you. The initialization process is divided into the following steps

1. Angular will automatically initialize during document load. It will first find the node specified by the ng-app instruction.
2. Load module-related instructions
3. Create an injector (dependency manager) related to the application
4. With the specified ng-app as the root node, start compiling the Dom

Now let’s initialize it ourselves and make something equivalent to the ng-app command. angular.element is a wrapper that wraps original DOM elements or HTML strings as jQuery elements. angular.Bootstrap can manually initialize the script. We use these two to initialize this script

Copy code The code is as follows:

This is outside ng-app~~{{1 2}}

This is inside ng-app~~~ {{1 2}}

2.compiler

We clearly see that the official documents of angularjs are all camel case nomenclature, such as ngApp, ngModule, ngBind, etc. These are related instructions. The html compiler allows us to define element attributes and tags ourselves. Angular will These additional behaviors are called directives.
The official documentation explains the compiler as follows

Copy code The 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 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 a service of Angular, responsible for traversing DOM nodes and searching for attributes. Compilation is divided into two stages:

1. Compile: traverse the nodes and collect all directives, and return a linking function
2. Link: Bind directives to a scope and create a live view. Any changes in the scope will be reflected in the view (updating the view); any user activity (change) on the template will be reflected in the scope model (two-way binding). This allows the scope model to reflect the correct values.
Some directives, such as ng-repeat, will copy a specific element (combination) once for each element in the collection. The two stages of compilation and linking improve performance. Because the cloned template only needs to be compiled once and then linked once for each element in the collection (similar to template caching).

3. Create your own directive step by step

1. Understand directive
First of all, understand that directives follow camel case naming, such as ngModule. When compiled, the matching is like this, for example:

Copy code The code is as follows:

directive can use x- or data- as the prefix, and can use delimiters such as:, -, or _ to convert camel case naming methods, as shown below:

Copy code The code is as follows:

Generally we use ng-bind to correspond to ngBind, this format
$compile can match directives based on element names, attributes, class names and comments

Copy code The code is as follows:

During the compilation process, the compiler matches embedded expressions (such as {{something}}) in text and attributes through the $interpolate service. These expressions will be registered as watches and updated as part of the digest cycle. Here is a simple interpolation:
Hello {{username}}!

2. Compilation steps

Three steps of HTML "compilation":

1. First, convert HTML into DOM objects through the browser’s standard API. This is an important step. Because the template must be parsable (conforming to the specification) HTML. This can be compared with most template systems, which are generally based on strings rather than DOM elements.
2. Compilation of the DOM is completed 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 by priority and their compile() functions will be executed in this order. The compile function of the directive 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 linking functions returned by all directive's own compile functions.
3. Connect the template to the scope through the linking function returned in the previous step. This in turn calls the directive's own linking function, allowing them to register some listeners on the element and set up some watches in conjunction with the scope. The result is a two-way, instant binding between the scope and the DOM. When the scope changes, the DOM will get the corresponding response.

Copy code The code is as follows:

var $compile = ...; // injected into your code
var scope = ...;
var html = '

';
// 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 code The code is as follows:

That’s all for today, and I’ll start writing and creating the directive tomorrow ~~~ Don’t keep the length too long, there are many main concepts in this chapter~~~