Detailed introduction of AngularJS instruction
- 2021-07-06 09:56:11
- OfStack
AngularJS instruction
AngularJS extends HTML with new attributes called directives.
AngularJS adds functionality to the application through built-in instructions.
AngularJS allows you to customize instructions.
AngularJS instruction
The AngularJS directive is an extended HTML attribute with the prefix ng-.
The ng-app directive initializes an AngularJS application.
The ng-init instruction initializes the application data.
The ng-model directives bind element values, such as the values of the input fields, to the application.
Complete instructions can be found in the AngularJS reference manual.
AngularJS instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="" ng-init="firstName='John'">
<p> Try to enter in the input box :</p>
<p> Name : <input type="text" ng-model="firstName"></p>
<p> What you entered is : {{ firstName }}</p>
</div>
</body>
</html>
Run results:
Try to enter in the input box:
Name:
You entered: John
The ng-app instruction tells AngularJS, < div > Element is 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 example is an AngularJS data binding expression.
Data binding in AngularJS synchronizes AngularJS expressions with AngularJS data.
{{firstName}} is synchronized via ng-model= "firstName".
In the next 1 example, the two text fields are synchronized by two ng-model instructions:
AngularJS instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div data-ng-app="" data-ng-init="quantity=1;price=5">
Price calculator
Quantity : <input type="number" ng-model="quantity">
Price : <input type="number" ng-model="price">
<p><b> Total price :</b> {{quantity * price}}</p>
</div>
</body>
</html>Run results:
Price calculator
Quantity: Price:
Total price: 5
Note: It is not very common to use ng-init. You will learn a better way to initialize data in Chapter 1 of Controller.
Repeat HTML element
The ng-repeat instruction repeats one HTML element:
AngularJS instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div data-ng-app="" data-ng-init="names=['Jani','Hege','Kai']">
<p> Use ng-repeat To loop an array </p>
<ul>
<li data-ng-repeat="x in names">
{{ x }}
</li>
</ul>
</div>
</body>
</html>
Loop Array Using ng-repeat
Jani Hege Kai
The ng-repeat directive is used on an array of 1 objects:
AngularJS Example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="" ng-init="names=[
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}]">
<p> Loop object :</p>
<ul>
<li ng-repeat="x in names">
{{ x.name + ', ' + x.country }}</li>
</ul>
</div>
</body>
</html>
Loop object:
Jani, Norway Hege, Sweden Kai, Denmark
Note AngularJS perfectly supports the database's CRUD (add Create, read Read, update Update, delete Delete) application.
Think of the objects in the instance as records in the database.
ng-app Directive
The ng-app directive defines the root element of an AngularJS application.
The ng-app directive automatically boots (automatically initializes) the application when the Web page has finished loading.
Later, you will learn how ng-app connects to the code module with a value (such as ng-app= "myModule").
ng-init directive
The ng-init directives define initial values for AngularJS applications.
Normally, ng-init is not used. You will replace it with a controller or module.
You will learn more about controllers and modules later.
ng-model Directive
The ng-model directives bind HTML elements to application data.
The ng-model directives can also:
Provides type validation for application data (number, email, required).
Provides status for application data (invalid, dirty, touched, error).
Provides an CSS class for an HTML element.
Bind an HTML element to an HTML form.
ng-repeat Directive
The ng-repeat directive clones the HTML element once for each item in the collection (array).
Create custom directives
In addition to the instructions built into AngularJS, we can also create custom instructions.
You can use the. directive function to add custom instructions.
To invoke a custom instruction, you need to add a custom instruction name to the HTML element.
Use the hump method to name a command, runoobDirective, but it needs to be split by-when using it, runoob-directive:
AngularJS Example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<body ng-app="myApp">
<runoob-directive></runoob-directive>
<script>
var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
return {
template : " Custom instruction !"
};
});
</script>
</body>
</body>
</html>Run results:
Custom instructions!
You can invoke instructions in the following ways:
Element name
Attribute
Class name
Notes
The following example mode can also output the same result:
Element name
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<body ng-app="myApp">
<runoob-directive></runoob-directive>
<script>
var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
return {
template : " Custom instruction !"
};
});
</script>
</body>
</body>
</html>Run results:
Custom instructions!
Attributes:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<body ng-app="myApp">
<div runoob-directive></div>
<script>
var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
return {
template : " Custom instruction !"
};
});
</script>
</body>
</body>
</html>Run results:
Custom instructions!
Class name:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body ng-app="myApp">
<div class="runoob-directive"></div>
<script>
var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
return {
restrict : "C",
template : " Custom instruction !"
};
});
</script>
<p><strong> Note: </strong> You must set <b>restrict</b> The value of is "C" To invoke instructions by class name. </p>
</body>
</html>
Custom instructions!
Note: You must set the value of restrict to "C" to invoke instructions by class name.
Note:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body ng-app="myApp">
<!-- directive: runoob-directive -->
<script>
var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
return {
restrict : "M",
replace : true,
template : " Custom instruction !"
};
});
</script>
<p><strong> Note: </strong> We need to add the <strong>replace</strong> Property, Otherwise the comments are invisible. </p>
<p><strong> Note: </strong> You must set <b>restrict</b> The value of is "M" To invoke instructions through comments. </p>
</body>
</html>Run results:
Custom instructions!
Note: We need to add the replace attribute to this instance, otherwise the comments will not be visible.
Note: You must set the value of restrict to "M" to invoke instructions through comments.
Restricted use
You can limit your instructions to be invoked in specific ways.
Instances
By adding the restrict attribute and setting the value only to "A", the instruction can only be called by attribute:
Example code:
<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body ng-app="myApp">
<runoob-directive></runoob-directive>
<div runoob-directive></div>
<script>
var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
return {
restrict : "A",
template : " Custom instruction !"
};
});
</script>
<p><strong> Note: </strong> By setting <strong>restrict</strong> Property value is "A" To set the instruction only through the HTML The property of the element is called. </p>
</body>
</html>Run results:
Custom instructions!
Note: By setting the restrict attribute value to "A", the instruction can only be called through the HTML element attribute.
restrict values can be of the following types:
E Element Names Only
A Attribute only
C Class name only
M for annotation only
The default value of restrict is EA, which means that instructions can be invoked by element name and attribute name.
The above is to sort out the AngularJS instruction data, and continue to supplement it later