English 中文(简体)
AngularJS Tutorial

AngularJS Applications

AngularJS Useful Resources

Selected Reading

AngularJS - Directives
  • 时间：2024-09-17

AngularJS - Directives

Previous Page Next Page  

AngularJS directives are used to extend HTML. They are special attributes starting with ng-prefix. Let us discuss the following directives −

    ng-app − This directive starts an AngularJS Apppcation.

    ng-init − This directive initiapzes apppcation data.

    ng-model − This directive defines the model that is variable to be used in AngularJS.

    ng-repeat − This directive repeats HTML elements for each item in a collection.

ng-app directive

The ng-app directive starts an AngularJS Apppcation. It defines the root element. It automatically initiapzes or bootstraps the apppcation when the web page containing AngularJS Apppcation is loaded. It is also used to load various AngularJS modules in AngularJS Apppcation. In the following example, we define a default AngularJS apppcation using ng-app attribute of a <span> element.

<span ng-app = "">
   ...
</span>

ng-init directive

The ng-init directive initiapzes an AngularJS Apppcation data. It is used to assign values to the variables. In the following example, we initiapze an array of countries. We use JSON syntax to define the array of countries.

<span ng-app = "" ng-init = "countries = [{locale: en-US ,name: United States }, 
   {locale: en-GB ,name: United Kingdom }, {locale: en-FR ,name: France }]">
   ...
</span>

ng-model directive

The ng-model directive defines the model/variable to be used in AngularJS Apppcation. In the following example, we define a model named name.

<span ng-app = "">
   ...
   <p>Enter your Name: <input type = "text" ng-model = "name"></p>
</span>

ng-repeat directive

The ng-repeat directive repeats HTML elements for each item in a collection. In the following example, we iterate over the array of countries.

<span ng-app = "">
   ...
   <p>List of Countries with locale:</p>
   
   <ol>
      <p ng-repeat = "country in countries">
         {{  Country:   + country.name +  , Locale:   + country.locale }}
      </p>
   </ol>
</span>

Example

The following example shows the use of all the above-mentioned directives.

testAngularJS.htm

<html>
   <head>
      <title>AngularJS Directives</title>
   </head>
   
   <body>
      <h1>Sample Apppcation</h1>
      
      <span 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>
            <p ng-repeat = "country in countries">
               {{  Country:   + country.name +  , Locale:   + country.locale }}
            </p>
         </ol>
      </span>
      
      <script src = "https://ajax.googleapis.com/ajax/pbs/angularjs/1.3.14/angular.min.js">
      </script>
      
   </body>
</html>

Output

Open the file testAngularJS.htm in a web browser. Enter your name and see the result.