HomeProgramAngularJS

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

  • The Module in AngularJSThe 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.
  • Create the first AngularJS applicationCreate the first AngularJS application
    to start, we start with creating the actual xinchao application by using angularjs, we will show you the specific parts of an angularjs application.
  • Multilingual (i18n) in AngularJSMultilingual (i18n) in AngularJS
    angularjs provides multi-lingual functions (i18n) with 3 types of filters, currency, date and number. we just need to combine the js corresponding to the location depending on the country. by default it will attach to the location in the web browser.
  • Preprocessor directive in C #Preprocessor directive in C #
    preprocessor directive directives provide instructions to the compiler to preprocess the information before the actual compilation process begins. all preprocessor directives in c # start with #, and only white-space characters can appear before a preprocessor directive in a line. preprocessor directives in c # are not commands, so they do not end with a semicolon (;).
  • Controller component in AngularJSController component in AngularJS
    an angularjs application works primarily based on the controller component to control the flow of data in the application.
  • MVC structure in AngularJSMVC structure in AngularJS
    model view controller or mvc is a popular call, a software design model for web-based applications.
  • Scope in AngularJSScope in AngularJS
    scope is a special javascript object with the role of linking controllers and views. scope contains information as model data. in the controller, model data can be accessed via the $ scope object.
  • Include syntax in AngularJSInclude syntax in AngularJS
    html does not support embedding html web pages in html pages. to achieve this function, the following methods can be used:
  • Bphone 4 continued to postpone the launch date due to the influence of COVID-19Bphone 4 continued to postpone the launch date due to the influence of COVID-19
    the bphone launch event will be scheduled to comply with the prime minister's social isolation directive.
  • Tooltip creation tools are useful with VueJSTooltip creation tools are useful with VueJS
    creating a tooltip is the quickest and easiest way to add a caption to an image or a piece of text without clicking on anything. let's explore the 6 useful tooltip creation tools with vuejs through the following article!

AngularJS