Aprendiendo AngularJS (II). Las expresiones y las variables.
En el post anterior vimos algunas directivas como ng-app, ng-model y ng-bind, en esta entrega veremos algunas más. De momento vamos a ejecutar el siguiente código para inicializar una variable con ng-init y luego vincularla a nuestro código HTML con ng-bind.
El código a ejecutar es el siguiente:
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<div ng-app="" ng-init="web='Myfpschool.com'">
<p>Recomienda <strong ng-bind="web"></strong></p>
</div>
Y este es el resultado:
Recomienda
También podemos utilizar data-ng en vez de ng- y será valido de igual manera.
En nuestros programas también podemos utilizar expresiones con dobles llaves y de esa manera AngularJS se encargará de calcularlas y convertirlas en HTML. Veamos un ejemplo de uso de literales y variables en una expresión:
<div ng-app="" data-ng-init="a=1970">
<p>Esto es una expresión: {{ a + 3 }}</p>
</div>
Ejecuta el código anterior y prueba que funciona en tu navegador.
Realiza una pequeña aplicación en AngularJS que pase una cantidad en euros a dólares teniendo en cuenta que el euro está a 1,12 dólares.
Colócalos mejor siempre dentro de las etiquetas body. Justo al final. Así será lo primero que se ejecutará cuando se cargue la página y la navegación será mucho más fluida.
En AngularJS también se pueden utilizar objetos en las aplicaciones. Aquí te mostramos un ejemplo de cómo se inicializa un objeto y se visualiza su información en una pequeña aplicación.
<div ng-app="" ng-init="web={URL:'Myfpschool.com',descripcion:'Tutorial de AngularJS'}">
<p>Nuestra web es: {{ web.URL }}</p>
<p>Y ahora trabajamos en: {{ web.descripcion }}</p>
</div>
Ejecuta el código anterior y prueba que funciona en tu navegador.
También puedes utiliza arrays. En el siguiente ejemplo verás cómo se puede utilizar un array dentro de tu aplicación en AngularJS.
<div ng-app="" ng-init="fibonacci=[1,1,2,3,5,8,13]">
<p>fibonacci(4) es: {{ fibonacci[4] }}</p>
</div>
Ejecuta el código anterior y prueba que funciona en tu navegador, luego crea algo diferente utilizando objetos en Angular.