HomeProgramAngularJSDirective in AngularJS

Directive in AngularJS

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

  1. ng-app - Directive to start an AngularJS application.
  2. ng-init - Directive to initialize data for the application.
  3. ng-model - This directive links the value of AngularJS application data with HTML input controls.
  4. 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

Follow tutorialspoint

Previous lesson: Create the first AngularJS application

Next article: Expression in AngularJS

5 ★ | 1 Vote

You should read it

May be interested

  • Expression in AngularJSPhoto of Expression in AngularJS
    expression is used to bind application data to html tags. expression is written in {{expression}}. expression has a similar way of operating as the ng-bind directive.
  • Controller component in AngularJSPhoto of Controller component in AngularJS
    an angularjs application works primarily based on the controller component to control the flow of data in the application.
  • HTML DOM element in AngularJSPhoto of HTML DOM element in AngularJS
    the directives below can be used to bind application data to attributes in the html dom element.
  • The Module in AngularJSPhoto of The Module in AngularJS
    angularjs supports module-oriented approach. the module is used to distinguish the logic, service and application processing ... and make the code clear.
  • Form in AngularJSPhoto of Form in AngularJS
    angularjs complements the form of filling and validation features. you can use ng-click directive to handle the event by clicking on the button and using the flags $ dirty and $ invalid to make it effective. use novalidate with the form declaration to disable the valicate feature of the form. the control section of the form uses an effective set of angularjs events.
  • Include syntax in AngularJSPhoto of Include syntax in AngularJS
    html does not support embedding html web pages in html pages. to achieve this function, the following methods can be used:

AngularJS