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
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
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
To loop an array using ng-repeat
The ng-repeat directive is used on an array of objects:
Angularjs instance
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
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
Run Result:
Custom directives!
Property:
Run Result:
Custom directives!
Class Name:
Custom directives!
Note: You must set the value of restrict to "C" to invoke the instruction through the class name.
Comments:
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:
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