Directive in Angularjs: Explained

Directive in Angularjs is easier to understand when the core ideas are paired with practical examples. The sections below explain the topic clearly, highlight useful steps, and point out details that can prevent common errors.

AngularJS directive helps 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 you 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 helps 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 example below, 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

FAQ

What should you know about 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.

What should you know about ng-init directives in AngularJS?

Ng-init initializes data for the AngularJS application. It helps 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.