logo angularJS

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>
Ejercicio 2.1:
Ejecuta el código anterior y prueba que funciona en tu navegador.
Ejercicio 2.2:
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.
¿Dónde colocar los script de AngularJS?
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>
Ejercicio 2.3:
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>
Ejercicio 2.4:
Ejecuta el código anterior y prueba que funciona en tu navegador, luego crea algo diferente utilizando objetos en Angular.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.