AngularJS directive
AngularJS extends HTML with new properties called directives.
AngularJS adds functionality to the application through built-in instructions.
AngularJS allows you to customize directives.
AngularJS directive
AngularJS directive is an extended HTML attribute with the prefix ng-.
The ng-app directive initializes an AngularJS application.
The ng-init directive initializes application data.
The ng-model directive binds element values (such as the value of the input field) to the application.
For complete instructions, please refer to 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 entering in the input box:</p><p>Name: <input type="text" ng-model="firstName"></p><p>You typed as: {{ firstName }}</p></div></body></html>Running results:
Try entering in the input box:
Name:
What you typed is: John
The ng-app directive tells AngularJS that the <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, synchronizing AngularJS expressions and AngularJS data.
{{ firstName }} is synchronized by ng-model="firstName".
In the next example, the two text fields are synchronized by two ng-model directives:
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>Running results:
Price Calculator
quantity: price:
Total price: 5
Note: Using ng-init is not very common. You will learn a better way to initialize data in the Controller chapter.
Repeat HTML elements
The ng-repeat directive repeats an 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 arrays</p> <ul> <li data-ng-repeat="x in names"> {{ x }} </li> </ul></div></body></html>Use ng- repeat to loop the array
The ng-repeat directive is used on an array of objects:
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="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:
NoteAngularJS perfectly supports database CRUD (add Create, read Read, update Update, delete Delete) applications.
Think of objects in an instance as records in a database.
ng-app command
The ng-app directive defines the root element of an AngularJS application.
The ng-app directive automatically boots (auto-initializes) the application when the web page is loaded.
You will later learn how ng-app connects to a code module through a value (such as ng-app="myModule").
ng-init directive
The ng-init directive defines the initial value for the AngularJS application.
Normally, ng-init is not used. You will use a controller or module instead.
You will learn more about controllers and modules later.
ng-model command
ng-model Directive binds HTML elements to application data.
ng-model Instructions can also be:
Provides type verification (number, email, required) for application data.
Provides state (invalid, dirty, touched, error) for application data.
Provides a CSS class for HTML elements.
Bind HTML elements to HTML form.
ng-repeat directive
The ng-repeat directive clones HTML elements once for each item in the collection (in an array).
Create custom directives
In addition to the built-in directives in AngularJS, we can also create custom directives.
You can use the .directive function to add custom directives.
To call a custom directive, you need to add a custom directive name to the HTML element.
Use camel method to name a directive, runoobDirective, but when using it, you need to split, runoob-directive:
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><body ng-app="myApp"><runoob-directive></runoob-directive><script>var app = angular.module("myApp", []);app.directive("runoobDirective", function() { return { template : "Custom directive!" };});</script></body></body></html>Running results:
Custom commands!
You can call the directive in the following ways:
Element name
property
Class Name
Comments
The following examples 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 directive!" };});</script></body></body></html>Running results:
Custom commands!
property:
<!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 directive!" };});</script></body></body></html>Running results:
Custom commands!
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></div><script>var app = angular.module("myApp", []);app.directive("runoobDirective", function() { return { restrict : "C", template : "C"!" };});</script><p><strong>Note:</strong> You must set the value of <b>restrict</b> to "C" to call the directive by the class name. </p></body></html>Custom commands!
Note: You must set the value of restrict to "C" to call the directive by the class name.
Notes:
<!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 directive!" };});</script><p><strong>Note:</strong> We need to add the <strong>replace</strong> attribute to this instance, otherwise the comments will not be visible. </p><p><strong>Note:</strong> You must set the value of <b>restrict</b> to "M" to invoke the directive through comments. </p></body></html>Running results:
Custom commands!
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 call the directive through comments.
Restricted use
You can restrict your directives to be called only in specific ways.
Example
By adding the restrict property and setting only the value to "A", the command can only be called through attributes:
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 directive!" };});</script><p><strong>Note:</strong> Setting the directive can only be called through the attributes of HTML elements by setting the <strong>restrict</strong> attribute value to "A". </p></body></html>Running results:
Custom commands!
Note: The setting command can only be called by setting the restrict attribute value to "A".
The restrict value can be the following:
E Only use element names
A Properties are only available
C Only use class names
M is only available for comments
The default value of restrict is EA, that is, the command can be called through the element name and attribute name.
The above is the compilation of AngularJS instruction information, and will continue to be supplemented later