Directive in AngularJS

AngularJS directive is used to inherit HTML. There are special attributes that start with the prefix-.

AngularJS directive is used to extend HTML. There are special attributes that start with the prefix-. We will discuss these directives:

ng-app - Directive to start an AngularJS application.
ng-init - Directive to initialize data for the application.
ng-model - This directive links the value of AngularJS application data with HTML input controls.
ng-repeat - The Directive repeats the HTML elements for each item in a collection.

Below we will learn the details of the directives mentioned above.

The ng-app directive in AngularJS

ng-app directive starts an AngularJS application. It defines the root element. It automatically initializes the application and initializes the web application using AngularJS. It is also used to load different modules of AngularJS application. In the following examples, we define a default AngularJS application using the ng-app attribute of a div element.

 ng-app = "" > .

Ng-init directives in AngularJS

ng-init initializes data for the AngularJS application. It is used to initialize values for a variable used in the application. In the example below, we define an array of States. We use JSON syntax to define the array of States.

 ng-app = "" ng-init = "cacquocgia = [{locale: 'en-VN', ten: 'Cong Hoa Socialist Vietnam'}, {locale: 'en-GB', ten: 'Vuong Quoc Anh' }, {locale: 'en-FR', ten: 'Cong Hoa Phap'}] " > .

Ng-model directive in AngularJS

ng-model directive defines models / variables used in AngularJS applications. In the following example, we will define a model under the name "ten".

 ng-app = "" > .

 Member:  type = "text" ng-model = "ten" >

Directive ng-repeat in AngularJS

ng-repeat directive repeats HTML elements for each item in a set. In the example below, we will browse an array of Countries.

 ng-app = "" > .

 List of National Locale elephants:  ng-repeat = "quocgia in cacquocgia" > {{'Quoc Gia:' + quocgia.ten + ', Locale:' + quocgia.locale}}

Example of AngularJS application

Below is an example that includes all directives described above:

vidudirective.html

 Directive in AngularJS

 Use AngularJS  ng-app = "" ng-init = "cacquocgia = [{locale: 'en-VN', ten: 'Socialist Vietnam'}, {locale: 'en-GB', ten: 'Vuong Quoc Anh'} , {locale: 'en-FR', ten: 'Curve' {}] " >

 Member:  type = "text" ng-model = "ten" >

 Please  ng-bind = "ten" > !

 List of country and locale types:  ng-repeat = "quocgia in cacquocgia" > {{'Quoc Gia:' + quocgia.ten + ', Locale:' + quocgia.locale}}  src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js" >

Result

Open the vidudirective.html page in your browser, enter your name and see the results below.

Directive in AngularJS Picture 1 Directive in AngularJS Picture 1