ANGULARJS instruction Details _ basic knowledge

Source: Internet
Author: User

ANGULARJS directives

Angularjs expands HTML by using a new attribute called a directive.

Angularjs adds functionality to the application with built-in instructions.

Angularjs allows you to customize your instructions.

ANGULARJS directives

The ANGULARJS directive is an extended HTML attribute with a prefix ng-.

The ng-app instruction Initializes a ANGULARJS application.

The ng-init instruction initializes the application data.

The ng-model directive binds an element value (such as the value of an input field) to an application.

The complete instructions can refer to the ANGULARJS reference manual.

Angularjs instance

<! DOCTYPE html>

Run Result:

In the input box, try to enter:


You entered as: John

The ng-app instruction tells the angularjs,<div> element to be the "owner" of the Angularjs application.

Note: A Web page can contain multiple ANGULARJS applications running in different elements.

Data binding

The {{firstName}} expression in the above instance is a ANGULARJS data-binding expression.

The data binding in Angularjs synchronizes the ANGULARJS expression with the ANGULARJS data.

{{firstName} } is synchronized by ng-model= ' FirstName '.

In the next instance, two text fields are synchronized through two Ng-model directives:

Angularjs instance

<! DOCTYPE html>

Run Result:

Price Calculator


Total Price: 5

Note: Using Ng-init is not very common. You'll learn a better way to initialize data in the controller chapter.

Repeating HTML elements

The ng-repeat instruction repeats an HTML element:

Angularjs instance

<! DOCTYPE html>

To loop an array using ng-repeat

    • Jani
    • Hege
    • Kai

The ng-repeat directive is used on an array of objects:

Angularjs instance

<! DOCTYPE html>

Loop object:

    • Jani, Norway
    • Hege, Sweden
    • Kai, Denmark

Note Angularjs Perfect support for database CRUD (add create, read read, update updates, delete deletes) applications.

Imagine the objects in the instance as records in the database.

Ng-app directives

The ng-app directive defines the root element of the Angularjs application.

The ng-app instruction automatically boots (initializes) the application when the Web page has finished loading.

Later on you will learn how Ng-app connects to the code module with a value, such as ng-app= "MyModule".

Ng-init directives

The NG-INIT directive defines the initial value for the ANGULARJS application.

Typically, Ng-init is not used. You will use a controller or module to replace it.

You'll learn more about controllers and modules later.

Ng-model directives

Ng-model directives bind HTML elements to application data.

Ng-model instructions can also:

Provides type validation for application data (number, email, required).

Provides status for application data (invalid, dirty, touched, error).

Provides CSS classes for HTML elements.

Bind HTML elements to HTML forms.

Ng-repeat directives

The ng-repeat directive clones an HTML element once for each item in the collection (in an array).

To create a custom directive

In addition to ANGULARJS built-in directives, we can also create custom directives.

You can use the. directive function to add custom instructions.

To invoke the custom directive, you need to add a custom directive name on the HTML element.

Use the Hump method to name an instruction, runoobdirective, but when using it you need to split, runoob-directive:

Angularjs instance

<! DOCTYPE html>

Run Result:

Custom directives!

You can invoke instructions in the following ways:

Element name
Class name

The following example methods can also output the same result:

Element name

<! DOCTYPE html>

Run Result:

Custom directives!


<! DOCTYPE html>

Run Result:

Custom directives!

Class Name:

<! DOCTYPE html>

Custom directives!

Note: You must set the value of restrict to "C" to invoke the instruction through the class name.


<! DOCTYPE html>

Run Result:

Custom directives!

Note: We need to add the Replace attribute to this instance, otherwise the comment is not visible.

Note: You must set the value of restrict to "M" to invoke the instruction through annotations.

Restrict use

You can limit your instructions to only a specific way of calling.


Set the directive to be invoked only by property by adding the Restrict property and setting the value to "A" only:

Instance code:

<! DOCTYPE html>

Run Result:

Custom directives!

Note: Setting the Restrict property value to "A" sets the instruction to be invoked only through the attributes of the HTML element.

Restrict values can be the following:

E is only used for element name
A only Property use
C only used for class name
M limited to annotation use

Restrict the default value is EA, which means that the directive can be invoked by element name and property name.

The above is the ANGULARJS instruction data collation, follow-up continue to add

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.