ANGULARJS instruction Details _ basic knowledge

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:

Name:

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

Number:Price:

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
Property
Class name
Comments

The following example methods can also output the same result:

Element name

<! DOCTYPE html>
 
 

Run Result:

Custom directives!

Property:

<! 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.

Comments:

<! 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.

Instance

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