About Angularjs (ii) How to use common directives in NG templates

By using a template, we can assemble the data in the model and controller to render it to the browser, and we can update the view in real time through data binding, so that our pages become dynamic. Ng's template really put me down. Learning Ng Road is still very long, starting from the template is a good way, because this part of the content is relatively simple and good understanding, but also is the view layer of things, we all like to be able to see things immediately. In this article I will find the template in the common instruction one by one test, understand how it is used, a bit like the feeling of memorizing words, it will be more boring. But for beginners, this kind of boring is necessary to experience, start ~

I. Things and expressions that can be used in a template

There are four things that you can use in a template, including the following:

1. Directive (Directive). NG provides or customizes tags and attributes to enhance HTML expressiveness.
2. Tag (markup). That is, the double curly braces {{}}, which bind the data one-way to the HTML.
3. Filters (filter). Used to format the output data.
4. Form control. Used to enhance the validation capabilities of the form.

The instructions are undoubtedly the most used, and Ng contains many instructions to control the template, such as Ng-repeat,ng-class, and there are many instructions to help you complete the business logic, such as Ng-controller,ng-model. Filters are often used with tags to format the data in your model as needed. The control functions of the form are mainly related to data validation and enhancement of form controls.

Here it is necessary to explain the concept of expressions, after all, most of our templates use variables. The expression in Ng is similar to a JavaScript expression but cannot be equated, and it is a set of patterns that NG defines for itself. The expression can be used as the value of an instruction, such as ng-modle= "People.name", ng-click= "showMe ()", which looks like a string and is also called a string expression. You can also use an expression in markup, such as {{1+2}}, or use {{1+2 | currency}} with the filter. Within the framework, strings are not simply performed using eval (), but instead have a dedicated $parse service to handle. It is not recommended to use a looping statement or a judgment statement in a NG expression, but it is also a deprecated practice to use complex expressions in a template, so that views and logic are mixed together.

Ii. style-related directives

Since the template is the normal HTML, then my first concern is the style of control, the positioning of elements, fonts, background color and so on how to control the flexibility. Here's a look at the commonly used style control directives.

　　1. ng-class

Ng-class is used to bind a class name to an element, and the return value of its expression can be in the following three ways:

1) class name string, you can split multiple class names with spaces, such as ' Redtext boldtext ';

2) class An array group, each item in the array will be stacked up to take effect;

3) A map with a name value that has a key value of class name, a Boolean type, and a value of true when the class is added to the element.

Here's an example of using map:

Ng-class TestRedBoldDelete Line map:{redtext:{{red}}, Boldtext:{{bold}}, Striketext:{{strike}}}

If you want to splice a class name, you can use an interpolated expression, such as:

<div class= "{{style}}text" > font style Test </div>

Then specify the value of the style in the controller:

$scope. style = ' red ';

Note that I use the class instead of the Ng-class, this is not to be swapped, the official documents did not explain, let's think this is Ng's grammatical rules.

Similar to Ng-class, Ng also provides a ng-class-odd, ng-class-even two instructions to match ng-repeat respectively in odd and even sequences using corresponding classes. This is used to achieve interlaced color change in the table can be more convenient.

　　2. Ng-style

Ng-style the CSS style used to bind the element, the return value of its expression is a JS object, the key is the CSS style name, and the value is the corresponding legal value for the style. The usage is relatively simple:

<div ng-style= "{color: ' Red '}" >ng-style test </div><div ng-style= "style" >ng-style test </div>$ Scope.style = {color: ' red '};

　　3. Ng-show,ng-hide

For more commonly used element explicit control, Ng is also encapsulated, ng-show and Ng-hide values are boolean-type expressions, when the value is true, the corresponding show or hide takes effect. The framework uses Display:block and Display:none to control the explicit concealment of the element.

C. form control function related

For commonly used form control functions, NG is also encapsulated for easy and flexible control.

Ng-checked control the selected state of radio and checkbox

ng-selected controls the selected state of the drop-down box

Ng-disabled Control Failure State

Ng-multiple Control Multiple selection

Ng-readonly control read-only status

The above instruction is the Boolean type, the value is true when the relevant state to take effect, the reason is relatively simple to do not explain more. Note: these are just one-way bindings, that is, just from the data to the template, and cannot react to the data. To bind in two directions, or to use it ng-model .

Iv. Event Binding related

Event binding is a relatively important part of javascrpt, and Ng also encapsulates it in detail, as is the case with the Ng-click we used earlier, the instructions for the other events are as follows:

Ng-change

Ng-dblclick

Ng-mousedown

Ng-mouseenter

Ng-mouseleave

Ng-mousemove

Ng-mouseover

Ng-mouseup

Ng-submit

The value of the event binding instruction is a function, and parentheses are required, for example:

<select ng-change= "Change ($event)" ></select>

It is then defined in the controller as follows:

$scope. Change = function ($event) {         alert ($event. target);         ........................}

You can use variable $event to pass event objects to a controller in a template.

For this design of NG, some people question whether the view is mixed with event binding. Don't we have to be careful about the separation of views from logic? In this way, it is not a retrogression of history that the binding of events back into the inner union. I am also puzzled about this, because I have not written the onclick for many years ... But since already exist, we might as well think in a reasonable direction, perhaps Ng's designers do not want to let the template become a simple view layer, is to enhance the HTML, let it have a little business capability. It seems to be able to think that way, OK, first deceive yourself ~

V. Special NG-SRC and Ng-href

Before explaining the special requirements of these two instructions, you need to know about Ng's start-up and execution process, such as:

1) The browser loads the static HTML file and parses it into DOM;

2) Browser loading angular.js file;

3) Angular monitoring DOMContentLoaded events, monitoring to start;

4) Angular look for Ng-app directive, determine the scope of action;

5) Find the module defined in the app using the $injector service for dependency injection;

6) Create $compile service for compiling according to $injector service;

7) $compile Services to compile instructions, filters, etc. in the DOM;

8) Use the NG-INIT directive to replace variables in the scope;

9) finally generated us in the final view.

As you can see, the NG framework starts to function after the domcontent is loaded. If we have a picture in the template as follows:

The page will always display an incorrect picture until the page starts loading until NG compiles, because the path {{Imgurl}} has not been replaced, like this:

To avoid this, we use the NG-SRC directive so that no images can be found until the path is correctly obtained. Similarly, the href attribute of the,<a> tag needs to be replaced with ng-href, so there is no link to the wrong address on the page first.

Let's think a little more about that, when we use {{}} in the template to display the data, will it not show curly braces and expressions on the page before the NG compilation is complete? That's true. To avoid this, NG has a directive equivalent to {{}}: Ng-bind, which is also used for one-way bindings, does not display data that is useless to the user when the page is just loaded. In spite of this you may not only not comfortable but more tangled, {{}} so easy to understand, still can not use it? The good news is that we can still use it. Because I am writing a single-page application, the page will only be loaded index.html when the problem, just the template in the index.html to replace the Ng-bind on the line. The other templates are dynamically loaded, so we can safely use {{}}.

Six, summarize

The boring content is finally finished! ~ Before writing this article I was struggling to write this kind of content is not a bit redundant, because these things in the angular official website (http://docs.angularjs.org/api/) to understand, and the online example is also written very good. In the spirit of not anxious for the principle I still decided to try these things first, so there is a detailed introduction of the above content, when necessary can also be a memo.

Reproduced

About Angularjs (ii) How to use common directives in NG templates