Instruction Introduction-Initial stage

Angularjs has a complete and extensible set of instructions to help Web application development, which enables HTML to be transformed into a "domain-specific language (DSL)", one of the techniques used to extend the capabilities of the browser, and the instructions associated with HTML are detected and executed during DOM compilation. , which allows the instruction to specify the behavior for the DOM, or to change it.

ANGULARJS extends HTML through new attributes called directives, with prefix ng-, which we can also call "Directive attributes," which are functions that are bound to DOM elements, can invoke methods, define behaviors, bind controllers and $scope objects, manipulate the DOM, and so on.

The ANGULARJS directive indicates "what should be done when the associated HTML structure enters the compile phase", which is essentially a function that needs to be executed when the compiler compiles to the relevant DOM, which can be written in the name of the element, in the attribute, in the CSS class name, in the comment.

When the browser starts and parses the HTML, the instruction attributes on the DOM element are parsed as if they were other properties. That is, when a angular.js application is started, the angular compiler will traverse the DOM tree to parse the HTML, look for these instruction property functions, find one or more of these instruction attribute functions on a DOM element, and they will be collected, sorted, and executed in order of precedence.

The dynamic and responsiveness of the angular.js application are attributed to the directive attributes, which are common: Ng-app, Ng-init, Ng-model, Ng-bind, Ng-repeat, and so on.

directive: Ng-app

The Ng-app directive identifies an ANGULARJS application and, through Angularjs, completes the application root scope of the automatic initialization application and tag, loads the modules associated with the instruction content, and starts compiling the DOM from the root node with the label of the Ng-app directive.

Plain English: Only in the ng-app of the angular site, with its label as the outermost cage

The reference method is simple, as follows:

1. <div Ng-app="">
3. </div>

As mentioned above, a ANGULARJS application initialization is completed and marked with scope, that is, the DIV element is the "owner" of the Angularjs application, and the instructions in it are compiled and parsed by the angular compiler.

directive: Ng-init

The ng-init instruction initializes the application data, which is the initial value for the ANGULARJS application, and typically we use a controller or module instead, and we'll cover the knowledge of the controller and module later.

Plain English: It's about attaching an initial value to the inside element.

As shown below, we will assign an initial value to the application variable name.

1. <div Ng-app= "" ng-init="Name= ' Hello World '">
3. </div>

Not only can we assign strings, we can also assign values to numbers, arrays, objects, and you can assign initial values to multiple variables, as follows:

1. <div Ng-app= "" ng-init="quantity=1;price=5">
3. </div>
4. Or
5. <div Ng-app= "" ng-init="names=[' Tom ', ' Jerry ', ' Gaffey ']">
7. </div>

ANGULARJS-expression

One of the core functions of the ANGULARJS framework, data binding, consists of two curly braces {{}}, which can bind data to HTML, similar to JavaScript snippets, and can contain literals, operators, and variables, often used in bound data, where expressions can bind numbers, strings, objects, Array, written in double curly braces: {{expression}}.

Plain English: Just throw the data into the DOM.

1. As in the previous example, we can use an expression to invoke the initialized variable value as follows.

1. <div Ng-app= "" ng-init="Name= ' Hello World '">
2. {{Name}}
3. </div>

2. Of course we can also use expressions to output numbers, arrays, and so on, as follows:

2.1. Output numbers, such as the following example:

1. <div Ng-app= "" ng-init="quantity=12;price=5">
2. <p> Total: {{quantity * price}}</p>
3. </div>

2.2. Output object, as shown in the following example:

• <div Ng-app= "" ng-init="names=[' Tom ', ' Jerry ', ' Gaffey ']">
• <p> Name: {{names[0]}}</p>
• </div>

Note: The inside of the names can not give Var directly write names= "" will be

We'll also learn another way of data binding in the back--by instruction Ng-bind.

directive: Ng-model

In Angularjs, you only need to use the Ng-model directive to bind application data to HTML elements, and to implement two-way binding of model and view.

The following example uses the Ng-model directive to bind data.

1. <div Ng-app="">
2. <p> Please enter any value:<input type="text" ng-model="Name" ></p>
3. <p> you entered as: {{name}}</p>
4. </div>

Ng-model binds the related processing events to the specified label so that we do not need to perform the presentation of the data in the context of manual processing of related events such as change.

Note: When using the curly brace syntax, because the browser needs to load the page first, render it, and then angularjs to parse it into what you expect to see, it is recommended to use Ng-bind for data binding operations on the first page to avoid being seen by the user of the template that is not rendered.

directive: Ng-click

ANGULARJS also has its own HTML event directives, such as defining a Angularjs click event through Ng-click.

For buttons, links, and so on, we can use the Ng-click directive attribute to implement the binding, as a simple example:

2. <div Ng-app= "" ng-init="Click=false">
4. <button ng-click="click=!click"> hide/Show </button>
6. <div ng-hide="click">
8. <p> Please enter a name:<input type="text" ng-model="Name" ></p>
10. <p>Hello <span ng-bind="name"></span> </p>
12. </div>
14. </div>

Ps:ng-hide= "true" to set HTML elements that are not visible.

The ng-click instruction binds the DOM element's mouse click event (that is, MouseDown) to a method, and when the browser triggers a click event on the DOM element, the angular invokes the corresponding method, is it simple and convenient!

Instruction Introduction-Initial stage