AngularJS built-in directive _ AngularJS-js tutorial

This article mainly introduces in detail how to use AngularJS built-in commands. It is very detailed and summarizes some commonly used commands and operations. If you have any need, refer to the following commands, I understand AngularJS as a way to operate HTML elements.
Since the first step of learning AngularJS is to write the built-in instruction ng-app to point out that the node is the root node of the application, the instruction is no stranger.

This log briefly records some built-in commands. You can use them first and then talk about some interesting things.

Built-in commands

The prefix of all built-in commands is ng. We do not recommend that you use this prefix for custom commands to avoid conflict.
Start with some common built-in commands.
First, list some key built-in commands. By the way, let's briefly talk about the scope.

Ng-model

Binding Form Controls to attributes of the current scope does not seem correct.
However, it is easy to use it, for example:

The Code is as follows:

{SomeModel. someProperty }}

Ng-init

This command initializes the internal scope when it is called.
This command usually appears in a relatively small application, such as giving a demo or something...

The Code is as follows:

I'm a/an {job }}

In addition to ng-init, we have more and better options.

Ng-app

Every time AngularJS is used, this command is not required. By the way, $ rootScope is used.
The element declared by ng-app will become the starting point of $ rootScope, while $ rootScope is the root of the scope chain.You know.
That is to say, all scopes under the root can access it.
However, we do not recommend that you use $ rootScope too much to avoid global variables flying and inefficient and difficult to manage.
The following is an example:

The Code is as follows:

{SomeProperty }}

Script
Var myApp = angular. module ('myapp', [])
. Run (function ($ rootScope ){
$ RootScope. someProperty = 'Hello computer ';
});
Script

Ng-controller

We use this command to attach a controller to a DOM element.
A controller? Indeed, this is a good understanding. Why do we need controllers?
Remember that AngularJS 1.2.x can also define controller like this...

The Code is as follows:

Function ohMyController ($ scope ){
//...
}

AngularJS 1.3.x prohibits this method, because this method will make the controller fly all over the sky, and the layers are unclear. Everything is mounted on $ rootScope...
Ng-controller must have an expression as a parameter. In addition, $ scope is used to inherit the methods and attributes of the upper-level $ scope, and $ rootScope is also included.
The following is a simple example. ancestor cannot access the scope of child.

The Code is as follows:

{AncestorName }}
{ChildName }}

{AncestorName }}
{ChildName }}

Script
Var myApp = angular. module ('myapp', [])
. Controller ('childcontroller', function ($ scope ){
$ Scope. childName = 'child ';
})
. Controller ('ancestorcontroller', function ($ scope ){
$ Scope. ancestorName = 'ancestor ';
});
Script

The scope issue is far more than that. Let's move on to other built-in commands.

Ng-form

I didn't understand why there was a form command at first,

Ng-disabled

For an attribute that takes effect as long as it appears, we can use the expression to return true/false to make it take effect in AngularJS.
Disable form input fields.

The Code is as follows:

1 + 1 =?

Ng-readonly

Use the expression to return true/false values to set the input fields of the form to read-only.
For example, it will be read-only in 3 seconds.

The Code is as follows:

. Run (function ($ rootScope, $ timeout ){
$ RootScope. stopTheWorld = false;
$ Timeout (function (){
$ RootScope. stopTheWorld = true;
}, 3000)
})

Ng-checked

This isFor example...

The Code is as follows:

Ng-selected

ToInsideExample: The Code is as follows:
I'm Full Stack Engineer

Front-End Back-End Full Stack !!!

Ng-show/ng-hide

Display/hide HTML elements based on expressions. Note that HTML elements are hidden rather than removed from DOM. For example:

The Code is as follows:

1 + 1 = 2

You can't see me.

Ng-change

Not the onXXX set of HTML, but ng-XXX.
Using ng-model as an example:

The Code is as follows:

{{ calc.result }}

Or ng-options

{{}}

In fact, this is also an instruction. It may be similar to ng-bind, but it may be seen when page rendering is slow.
In addition, the performance of {} is far inferior to that of ng-bind, but it is very convenient to use.

Ng-bind

Ng-bind behavior is similar to {}, but we can use this command to avoid FOUC (Flash Of Unrendered Content), that is, flashing caused by not rendering.

Ng-cloak

Ng-cloak can also solve FOUC for us. Ng-cloak hides the internal elements until the corresponding page is called by the route.

Ng-if

If the expression in ng-if is false, the corresponding element is removed from the DOM rather than hidden. However, when reviewing the element, you can see that the expression is changed to annotation.
If the phase is hidden, ng-hide can be used.

The Code is as follows:

This element cannot be reviewed

Review

Ng-switch

It is meaningless to use it independently. The following is an example:

The Code is as follows:

0

1

2

3

Ng-repeat

I do not understand whether it is Mao or iterate. In short, it is to traverse the set and generate a template instance for each element. Some special attributes can be used in the scope of each instance, as shown below:

The Code is as follows:

$ Index
$ First
$ Last
$ Middle
Even
Odd

I don't need to explain it in detail. It's easy to see what it is. The following is an example:

The Code is as follows:

• {Char. alphabet }}

Ng-href

At first, I got an ng-model in a text domain and then wrote it in href like this.
In fact, there is no difference between href and ng-href, so we can try it like this:

The Code is as follows:

• {LinkText }}


• You can click, but not necessarily the correct address.

. Run (function ($ rootScope, $ timeout ){
$ RootScope. linkText = 'Not loaded yet, you cannot click ';
$ Timeout (function (){
$ RootScope. linkText = 'click'
$ RootScope. myHref = 'HTTP: // google.com ';
},2000 );
})

Ng-src

Similarly, do not load the resource before the expression takes effect.
Example (ps: Good picture! ):

The Code is as follows:

. Run (function ($ rootScope, $ timeout ){
$ Timeout (function (){
$ RootScope. imgSrc = 'https: // octodex.github.com/images/daftpunktocat-guy.gif ';
},2000 );
})

Ng-class

Dynamically change the class style with objects in the scope, for example:

The Code is as follows:

Get Time!

Number is: {x }}

. Controller ('curtimecontroller', function ($ scope ){
$ Scope. getCurrentSecond = function (){
$ Scope. x = new Date (). getSeconds ();
};
})

The above is all the content described in this article. I hope you will like it.