AngularJS - Directivas

Las directivas AngularJS se utilizan para extender HTML. Son atributos especiales que comienzan conng-prefijo. Analicemos las siguientes directivas:

ng-app - Esta directiva inicia una aplicación AngularJS.
ng-init - Esta directiva inicializa los datos de la aplicación.
ng-model - Esta directiva define el modelo que es variable para ser utilizado en AngularJS.
ng-repeat - Esta directiva repite elementos HTML para cada elemento de una colección.

directiva ng-app

La directiva ng-app inicia una aplicación AngularJS. Define el elemento raíz. Inicializa o arranca automáticamente la aplicación cuando se carga la página web que contiene la aplicación AngularJS. También se utiliza para cargar varios módulos AngularJS en la aplicación AngularJS. En el siguiente ejemplo, definimos una aplicación AngularJS predeterminada usando el atributo ng-app de un elemento <div>.

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

directiva ng-init

La directiva ng-init inicializa los datos de una aplicación AngularJS. Se utiliza para asignar valores a las variables. En el siguiente ejemplo, inicializamos una serie de países. Usamos la sintaxis JSON para definir la matriz de países.

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

directiva ng-model

La directiva ng-model define el modelo / variable que se utilizará en la aplicación AngularJS. En el siguiente ejemplo, definimos un modelo llamado name .

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

directiva ng-repeat

La directiva ng-repeat repite elementos HTML para cada elemento de una colección. En el siguiente ejemplo, iteramos sobre la matriz de países.

<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>

Ejemplo

El siguiente ejemplo muestra el uso de todas las directivas mencionadas anteriormente.

testAngularJS.htm

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

Salida

Abra el archivo testAngularJS.htm en un navegador web. Ingrese su nombre y vea el resultado.