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 necesarios están marcados *

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>