ANGULARJS instructions and sample code _ANGULARJS

The ANGULARJS directive is used to extend HTML. These are the special attributes from the ng-prefix first. We will discuss the following instructions:

Ng-app-This instruction initiates a ANGULARJS application.

Ng-init-This instruction initializes the application data.

Ng-model-this directive defines the model that the variable is used in Angularjs.

Ng-repeat-the directive will repeat the HTML element for each item in the collection.

Ng-app directives

Ng-app command to start a ANGULARJS application. It defines the root element. It automatically initializes or launches the application that loads the Web page containing the ANGULARJS application. It is also used to load various ANGULARJS modules ANGULARJS applications. In the following example, we define the default ANGULARJS application using the Ng-app attribute of the DIV element.

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

Ng-init directives

The ng-init instruction initializes the data for a ANGULARJS application. A variable that is used to put a value in an application. In the following example, we will initialize the countries array. Use the JSON syntax to define the countries array.

<div ng-app= "" ng-init= "countries=[{locale: ' en-us ', Name: ' United States '},
                  {locale: ' EN-GB ', Name: ' United Kingdom '},
                  {locale: ' en-fr ', Name: ' France '}] ' > ...
</div>

Ng-model directives

The Ng-model directive defines the model/variable that is used in the ANGULARJS application. In the following example, we define a model named "name".

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

Ng-repeat directives

The ng-repeat instruction repeats each item in the collection of HTML elements. In the following example, we have iterated the array countries.

<div ng-app= "" > ...
  <p>list of Countries with locale:</p>
  <ol>
   <li ng-repeat= ' country in Countries ' >
     {{' Country: ' + country.name + ', Locale: ' + Country.locale}}
   </li>
  </ol>
</div>

Example

The following example shows all of the above instructions.

Testangularjs.html

</div>
<script src= "Http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js" > </script>
</body>
 
 

Output

Open textangularjs.html in a Web browser. Enter a name and see the following results.

The above is the basic information of the ANGULARJS instructions, follow-up continue to supplement the relevant information, thank you for your support for this site!