AngularJS directive is used to extend HTML. These are all special properties starting with the ng- prefix. We will discuss the following directives:
ng-app - This directive starts an AngularJS application.
ng-init - This directive initializes application data.
ng-model - This directive defines a model that is a variable used in AngularJS.
ng-repeat - This directive will repeat HTML elements for each item in the collection.
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 Countryes with locale:</p> <ol> <li ng-repeat="country in countries"> {{ 'Country: ' + country.name + ', Locale: ' + country.locale }} </li> </ol></div>example
The following examples will show all the above instructions.
testAngularJS.html
<html><title>AngularJS Directives</title><body><h1>Sample Application</h1><div ng-app="" ng-init="countries=[{locale:'en-US',name:'United States'}, {locale:'en-GB',name:'United Kingdom'}, {locale:'en-FR',name:'France'}]"> <p>Enter your Name: <input type="text" ng-model="name"></p> <p>Hello <span ng-bind="name"></span>!</p> <p>List of Countries with locale:</p> <ol> <li ng-repeat="country in countries"> {{ 'Country: ' + country.name + ', Locale: ' + country.locale }} </li> </ol></div><script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script></body></html>Output
Open textAngularJS.html in a web browser. Enter your name and see the following results.
The above is the basic information of the AngularJS directive. We will continue to add relevant information in the future. Thank you for your support to this site!