Expresiones de AngularJS Primera aplicación de AngularJS

Directivas de AngularJS

Las directivas AngularJS se utilizan para extender HTML. Se basan en ng-Hablemos de las directivas especiales que comienzan con el prefijo

ng-app −Esta directiva inicia la aplicación AngularJS.
ng-init −Esta directiva inicializa los datos de la aplicación.
ng-model −Esta directiva define las variables de modelo utilizadas en AngularJS.
ng-repeat −Esta pseudo-directiva repite elementos HTML para cada elemento de una colección.

ng-La directiva app

ng-La directiva app inicia la aplicación AngularJS. Define el elemento raíz. Al cargar la página que contiene la aplicación AngularJS, se inicializará o guiará automáticamente la aplicación. También se utiliza para cargar varios módulos AngularJS en la aplicación AngularJS. En el siguiente ejemplo, usamos el elemento ng del div-La propiedad app define la aplicación AngularJS predeterminada.

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

ng-La directiva init

ng-La directiva init inicializa los datos de la aplicación AngularJS. Se utiliza para asignar valores a variables. En el siguiente ejemplo, inicializamos un grupo de países. Usamos la notación JSON para definir los países/La matriz de regiones.

<div ng-app = "" ng-init　=　"countries　=　[{locale:'en-US',name:'Estados Unidos'},　
　　　{locale:'en-GB',name:'Reino Unido'},　{locale:'en-FR',name:'France'}]">
　　　...</div>

ng-La directiva model

ng-La directiva model define los modelos utilizados en la aplicación AngularJS./variable. En el siguiente ejemplo, definimos una variable llamadanamedel modelo.

<div ng-app = "">
　　　...
　　　<p>Ingrese su Nombre: <input type = "text" ng-model　=　"name"></p></div>

ng-La directiva repeat

ng-La directiva repeat repite elementos HTML para cada elemento de una colección. En el siguiente ejemplo, recorremos los países/matriz de regiones.

<div ng-app = "">
　　　...
　　　<p>Lista de países con localización:</p>
　　　
　　　<ol>
　　　　　　<li　ng-repeat　=　"country　in　countries">
　　　　　　　　　{{　'Country:　'　+　country.name　+　',　Locale:　'　+　country.locale　}}
　　　　　　</li>
　　　</ol>
</div>

Ejemplo en línea

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

testAngularJS.htm

Ejemplo

<html>
　　　<head>
　　　　　　<title>Directivas AngularJS</title>
　　　</head>
　　　
　　　<body>
　　　　　　<h1>Aplicación de ejemplo</h1>
　　　　　　
　　　　　　<div ng-app = "" ng-init　=　"countries　=　[{locale:'en-US',name:'Estados Unidos'},　
　　　　　　　　　{locale:'en-GB',name:'Reino Unido'},　{locale:'en-FR',name:'France'}]">　
　　　　　　　　　<p>Ingrese su nombre:　<input　type　=　"text"　ng-model　=　"name"></p>
　　　　　　　　　<p>Hello　<span　ng-bind　=　"name"></span>!</p>
　　　　　　　　　<p>Lista de países con regiones:</p>
　　　　　　
　　　　　　　　　<ol>
　　　　　　　　　　　　<li　ng-repeat　=　"country　in　countries">
　　　　　　　　　　　　　　　{{　'Country:　'　+　country.name　+　',　Locale:　'　+　country.locale　}}
　　　　　　　　　　　　</li>
　　　　　　　　　</ol>
　　　　　　</div>
　　　　　　
　　　　　　<script　src　=　"https://cdn.staticfile.org/angular.js/1.3.14/angular.min.js">
　　　　　　</script>
　　　　　　
　　　</body>
</html>

Prueba para ver‹/›