Friends who are familiar with HTML know that HTML has many attributes. For example, the href attribute of the <a> tag can specify the URL address of the link, and the type attribute of the <input> tag can be used to specify the type of input. The AngularJS directive adds functions to AngularJS applications by extending HTML attributes.
AngularJS directive is used to extend HTML. These are all special properties starting with the ng- prefix. We will discuss the following directives:
Commonly used AngularJS directives
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.
ng-app command
The ng-app directive starts an AngularJS application. It defines the root element. It automatically initializes or starts an application that loads the web pages of the AngularJS application. It is also used to load various AngularJS modules AngularJS applications. In the following example, we define the default AngularJS application using the ng-app attribute of the div element.
<div ng-app="">...</div>
ng-init directive
The ng-init directive initializes the data of an AngularJS application. It is used to put values in the application to use variables. In the following example, we will initialize the countries array. Use JSON syntax to define countries arrays.
<div ng-app="" ng-init="countries=[{locale:'en-US',name:'United States'},{locale:'en-GB',name:'United Kingdom'},{locale:'en-FR',name:'France'}]">...</div>ng-model command
The ng-model directive defines models/variables used in AngularJS applications. In the following example, we define a model called "name".
<div ng-app="">...<p>Enter your Name: <input type="text" ng-model="name"></p></div>
ng-repeat directive
The ng-repeat directive repeats each item in the html element collection. In the following example, we have iterated over the array countries.
<div ng-app="">...<p>List of Country with locale:</p><ol><li ng-repeat="country in countries">{{ 'Country: ' + country.name + ', Locale: ' + country.locale }}</li></ol></div>AngularJS directive example
<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>What you type is: {{ firstName }}</p></div>The ng-app directive tells AngularJS that the current <div> element is an AngularJS application. The ng-init directive is used to initialize data, which is equivalent to the definition variable in javascript. Data binding in AngularJS, synchronizing AngularJS expressions and AngularJS data. {{ firstName }} is synchronized by ng-model="firstName". The above example will synchronize the content you entered in the input box on the page.
Notice
A web page can contain multiple AngularJS applications running in different elements.
It is not very common to initialize data using ng-init. You will learn a better way to initialize your data in subsequent chapters.
ng-repeat directive
The ng-repeat directive will repeat an HTML element, which is equivalent to each loop in javascript.
<div ng-app="" ng-init="names=['Jani','Hege','Kai']"><p>Use ng-repeat to loop arrays</p><ul><li ng-repeat="x in names">{{ x }}</li></ul></div>The example above will be parsed into the following HTML
<ul><li>Jani</li><li>Hege</li><li>Kai</li></ul>
ng-repeat works on object array:
<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>It will be parsed into the following HTML:
<ul><li>Jani, Norway</li><li>Hege, Sweden</li><li>Kai, Denmark</li></ul>
Custom commands
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 the camel method to name a directive, askh5Directive, but when using it, you need to split with - askh5-directive
<body ng-app="myApp"><askh5-directive></askh5-directive><script>var app = angular.module("myApp", []);app.directive("askh5Directive", function() {return {template : "<h1>custom directive!</h1>"};});</script></body>The above example is parsed as:
<h1>Custom command!</h1>
The command can be called in the following ways:
Element name: <askh5-directive></askh5-directive>
Attribute: <div askh5-directive></div>
class name: <div></div>
Comment: <!-- Directive: askh5-directive -->
Restrict restriction usage
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.
var app = angular.module("myApp", []);app.directive("askh5Directive", function() {return {restrict : "A",template : "<h1>custom directive!</h1>"};});AngularJS above will only allow property calls.
Related readings:
AngularJS Introductory Tutorial: AngularJS Expressions
The above content is the AngularJS introductory tutorial of AngularJS introduced to you by the editor. I hope it will be helpful to everyone!