AngularJs built-in instructions

Lin Bingwen Evankaka Original works. SOURCE Http://blog.csdn.net/evankaka

This tutorial uses the ANGULARJS version: 1.5.3

AngularJs github:https://github.com/angular/angular.js/

angularjs:https://angularjs.org/

Abstract: This paper mainly introduces the instructions in Angularjs.

1, Ng-model

This is very familiar to everyone, that is, the form control and the properties of the current scope are bound. You need to be aware of the scope of the bound scope (parent scope and child scope).

2, Ng-init

Used less, the internal scope is initialized when the instruction is called. It is generally not recommended to use this parameter.

3, Ng-app

This is necessary. Use this directive to automatically start a ANGULARJS application. The Ngapp directive specifies the root element of the application, usually placed in the root element of the Web page, such as body or HTML tags.
Only one Angularjs app can automatically boot each HTML document. The first Ngapp found the file will define the app for the root element of the auto-boot. To run multiple applications in an HTML file, you must manually boot them using Angular.bootstrap. Angularjs apps cannot be nested with each other.
You can specify a ANGULARJS module to be used for the application's root module. The module is booted into the $injector object when it is loaded into the application. It should contain the required application code, or depend on the dependencies of other modules that will contain the code. See Angular.module for more information.

4, Ng-controller

This is often used to define a controller. Note format

5. Ng-form is used to define a from, which is usually used to validate parameters. Can usually be used with the following labels

Ng-valid (valid).
Ng-invalid (invalid).
Ng-pristine (original, Introduction).
Ng-dirty (Dirty).
Ng-submitted (Submitted)

6, ng-disabled

Like this property, which takes effect as soon as it appears, we can return the value in Angularjs with the expression True/false to make it effective. Disables form input fields.

7, Ng-readonly

Returns a value from an expression true/false the form input field to read-only.

8, ng-checked

Sets whether the check box is selected. where ng-true-value= "'" ng-false-value= "" "can be used to set the corresponding value when selected or unchecked

9, ng-selected

For the <option> in <select>

10, Ng-show/ng-hide

Show/Hide HTML elements based on an expression, note that it is hidden, not removed from the DOM (Ng-if is removed), and can be used for large object DOM, but if it is the DOM of a small object, it is recommended to use Ng-if

11, Ng-change

Not HTML that set of onxxx or something, but ng-xxx. Used to set events when content changes such as Input/select

12. {{}}

In fact, this is also a directive, may feel similar to ng-bind, but the page rendering may be seen slightly slow. In addition, {{}} performance is far inferior to ng-bind, but it is convenient to use.

13, Ng-bind

The behavior of Ng-bind is similar to {{}}, except that we can use this directive to avoid fouc (flash of unrendered Content), which is the flicker caused by non-rendering.

14, Ng-cloak

Ng-cloak can also solve Fouc for us. Ng-cloak hides the inner element until the corresponding page is called by the route.

15, Ng-if

If the expression in Ng-if is false, the corresponding element is removed from the DOM instead of hidden, but you can see that the expression becomes a comment when you examine the element. If you are hiding, you can use Ng-hide.

16, Ng-switch

The Ngswitch directive contains ng-switch on, Ng-switch-when, and Ng-switch-default functions similar to Switch,ng-switch on the value to be judged, Ng-switch-when means that the conditional compliance will display this DOM element, and Ng-switch-default refers to the element that does not conform to the default display.

17, Ng-repeat

Iterate through collections (arrays), generate template instances for each element, and use some special properties in the scope of each instance, as follows

$index
$first
$last
$middle
Even

18, Ng-href

At first I got a ng-model in a text field, and then <a href= "{{Myurl}}" like this > wrote it inside the href.

19, NG-SRC

Very similar, that is, do not load the resource until the expression takes effect.

20, Ng-class

Change the class style dynamically with objects in the scope,

21, Ng-click

Click events

22, Ngkeyup

Keyboard events

23, Ngkeydown

Keyboard events

24, Ngkeypress

Keyboard events

25, Ngmousedown, Ngmouseenter, Ngmouseleave, Ngmousemove, Ngmouseover, Ngmouseup

Mouse events

26, Ngtrim

Remove left and right spaces

AngularJs built-in directives