Instruction Practice Development Guide in AngularJS (1), angularjs Guide

Instruction Practice Development Guide in AngularJS (1), angularjs Guide

Directive is the most important part of all AngularJS applications. Although AngularJS already provides a rich set of commands, you often need to create application-specific commands. This tutorial will show you how to customize commands and how to use them in real projects. At the end of this article (Part 2), I will guide you how to use the Angular command to create a simple notepad application.

Overview

A command is used to introduce new HTML syntax. A command is a tag on a DOM element that gives the element specific behavior. For example, static HTML does not know how to create and display a date selector control. For HTML to recognize this syntax, we need to use instructions. Command to create an element that supports date Selection in some way. We will explain how this is implemented step by step. If you have written AngularJS applications, you must have used commands no matter whether you have realized them. You must have used simple commands, such as ng-mode, ng-repeat, and ng-show. These commands give specific actions to the DOM element. For example, ng-repeat repeats a specific element and ng-show displays an element conditionally. If you want to drag an element, you also need to create a command to implement it. The basic idea behind commands is simple. It listens to element binding events or changes DOM to make HTML have real interaction.

JQuery perspective

Imagine how to create a date selector using jQuery. First, we add a common input box in HTML and call $ (element). dataPicker () through jQuery to convert it into a date selector. But think about it. When a designer checks the HTML Tag, can he/she immediately guess what the field actually represents? Is this just a simple input box or a date selector? You need to check the jQuery code to determine this. Angular uses an instruction to expand HTML. Therefore, a date selector instruction can be in the following format:

<input type="text" />

Or:

<input type="text" />

This method of creating a UI is more direct and clear. You can easily see what the elements are.

Create custom commands:

An Angular command can be expressed in the following four forms: 1. A new HTML element (<data-picker> </data-picker>) 2. element attributes (<input type = "text" data-picker/>) 3. CSS class (<input type = "text" class = "data-picker"/>) 4. note (<! -Directive: data-picker->) Of course, we can control the representation of our commands in HTML. Next, let's take a look at the typical instructions in AngularJS. Command registration is the same as controller, But it returns a simple object (command definition object) with the command configuration attributes ). The following code is a simple Hello World command.

var app = angular.module('myapp', []);app.directive('helloWorld', function() {return {restrict: 'AE',replace: 'true',template: '
In the above Code, the app. directive () method registers a new instruction in the module. The first parameter of this method is the name of this command. The second parameter is a function that returns a command to define an object. If your commands depend on other objects or services, such as $ rootScope, $ http, or $ compile, they can be injected at this time. This command is used as an element in HTML, as follows:
Alternatively, use the following attributes:
<div hello-world></div>//OR<div hello:world/>
If you want to comply with HTML5 specifications, you can add the x-or data-Prefix before the element. Therefore, the following mark will also match the helloWorld command:
<div data-hello-world></div>//OR<div x-hello-world></div>
Note: When matching commands, Angular removes the x-or data-Prefix from element or attribute names. Then, convert the-or: connected string to the camelCase representation and match it with the registered command. This is why we use the helloWorld command in the form of hello-world in HTML. In fact, this is related to the fact that HTML is not case sensitive to tags and attributes. Although the above commands only display static text, there are some interesting points worth exploring. Three attributes are used to configure commands during instruction definition. Let's introduce their functions one by one.
Restrict-this attribute is used to specify how commands are used in HTML (remember the four Representation Methods of commands mentioned earlier ). In the above example, we use 'AE '. Therefore, this command can be used as a new HTML element or attribute. If you want to allow the command to be used as a class, Set restrict to 'aec '.

Template-this attribute specifies the HTML Tag generated after the command is compiled by Angular and linked. This attribute value is not necessarily a simple string. Templates can be very complex and often contain other commands and expressions. In more cases, you may see templateUrl instead of template. Therefore, ideally, you should place the template in a specific HTML file and point the templateUrl attribute to it.
Replace-this attribute indicates whether the generated HTML content will replace the HTML element defining this instruction. In our example, we use the Open this plunker and click "Hello World !!" Right-click the element content to better understand it.
Link Function and Scope
The template generated by the command does not make much sense unless it is compiled under a specific scope. By default, the command does not create a new sub-scope. More, it uses the parent scope. That is to say, if the command exists in a controller, it will use the scope of the controller. To use scope, we need to use a function called link. It is configured by the link attribute in the instruction definition object. Let's change our helloWorld command. When a user enters a color name in an input box, the background color of the Hello World text changes automatically. At the same time, when the user clicks on the Hello World text, the background color becomes white. The corresponding HTML Tag is as follows:
<body ng-controller="MainCtrl"><input type="text" ng-model="color" placeholder="Enter a color" />
The modified helloWorld command is as follows:
app.directive('helloWorld', function() {return {restrict: 'AE',replace: true,template: '<p style="background-color:{{color}}">Hello World',link: function(scope, elem, attrs) {elem.bind('click', function() {elem.css('background-color', 'white');scope.$apply(function() {scope.color = "white";});});elem.bind('mouseover', function() {elem.css('cursor', 'pointer');});}};});
We noticed the link function in the instruction definition. It has three parameters:
Scope-command scope. In our example, the scope of the command is the scope of the parent controller.
The jQLite (subset of jQuery) of the elem-Directive wraps DOM elements. If you have introduced jQuery before AngularJS, this element is a jQuery element, not a jQLite element. Since this element has been packaged by jQuery/jQLite, we don't need to use $ () For DOM operations.
Attr-a standardized parameter object that contains the attributes of the element where the instruction is located. For example, if you add some attributes to an HTML element: You can use it in the link function through attrs. someAttribute.
The link function is used to add event listening to DOM elements, monitor model attribute changes, and update DOM. In the preceding command code snippet, we added two events, click, and mouseover. The click handler is used to reset the background color of <p>, while the mouseover handler changes the mouse to pointer. There is an expression {color} in the template. When the color in the parent scope changes, it is used to change the background color of the Hello World text. This plunker demonstrates these concepts.
Compile Functions
The compile function is used for DOM transformation before the link function is executed. It receives the following parameters:
TElement-element of the Instruction
Attrs-Standardization List of parameters granted on the element
Note that the compile function cannot access the scope and must return a link function. However, if the compile function is not set, you can configure the link function normally. (With compile, you cannot use link. The link function is returned by compile ). The compile function can be written as follows:
app.directive('test', function() {return {compile: function(tElem,attrs) {//do optional DOM transformation herereturn function(scope,elem,attrs) {//linking function here};}};});
In most cases, you only need to use the link function. This is because most of the commands only need to consider registering event listening, monitoring models, and updating DOM, which can be completed in the link function. However, for commands such as ng-repeat, the DOM elements need to be cloned and repeated multiple times. The compile function is used to complete the tasks before the link function is executed. This raises a question. Why can't we use only one function if we need two separate functions to complete the generation process? To answer this question, we need to understand how commands are compiled in Angular!
How commands are compiled
When the application is started, Angular starts to use the $ compile service to traverse DOM elements. This service searches for commands in the markup text based on the registered commands. Angular executes their compile method once all commands are identified. As mentioned above, the compile method returns a link function and is added to the list of link functions executed later. This is called the compilation phase. If a command needs to be cloned many times (for example, ng-repeat), the compile function is executed only once during the compilation phase. Copy these templates, however, the link function is executed for each copied instance. Therefore, separate processing improves the performance. This also explains why the scope object cannot be accessed in the compile function. After the compilation phase, the linking phase is started. At this stage, all the collected link functions will be executed one by one. Templates created by commands are parsed and processed in the correct scope, and real DOM nodes with event responses are returned.
Change the Scope of the command
By default, the command gets the scope of the controller of its parent node. However, this does not apply to all situations. If you expose the scope of the parent controller to the instruction, they can modify the attributes of the scope at will. In some cases, you want to add internal-only attributes and methods. If we add the parent scope, the parent scope will be contaminated. In fact, we have two options:
A sub-scope-this scope prototype inherits the sub-parent scope.
An isolated scope-an exclusive scope that does not inherit from the parent scope.
Such a scope can be configured by defining the scope attribute in the object through commands. The following code snippet is an example:
app.directive('helloWorld', function() {return {scope: true, // use a child scope that inherits from parentrestrict: 'AE',replace: 'true',template: '
The code above allows Angular to create a new sub-scope inherited from the parent socpe for the command. Another option is to isolate the scope:
app.directive('helloWorld', function() {return {scope: {}, // use a new isolated scoperestrict: 'AE',replace: 'true',template: '
This command uses an isolated scope. The isolated scope is very advantageous when we want to create reusable commands. By using an isolated scope, we can ensure that our commands are self-contained and can be easily inserted into HTML applications. It cannot access the parent scope internally and ensures that the parent scope is not contaminated. In our helloWorld command example, if we set scope to {}, the above Code will not work. It will create a new isolated scope, and the corresponding expression {color} will point to this new scope, and its value will be undefined. using an isolated scope does not mean that we cannot access the attributes of the parent scope at all. In fact, some technologies allow us to access the attributes of the parent scope, and even monitor their changes. We will discuss these technologies and some more advanced concepts, such as Controller functions, in the second part of the instruction series. The second part will also work with you to create a richer notepad application using Angular commands.
For instructions in AngularJS (1), I will introduce the instructions in angularjs (2!
Articles you may be interested in:

     

 
      
AngularJS learning notes basic commands (init, repeat)
 
      
Instructions for AngularJS basic learning notes
 
      
AngularJS built-in commands
 
      
Write KindEditor, UEidtor, and jQuery commands in Angularjs
 
      
Example of one-way binding using NG-BIND COMMANDS IN ANGULARJS
 
      
Explanation of the compile and link functions in angularjs commands