1

Contenido

Tutorial básico de Angular JS .......................................................................................................... 2

Ejemplo 1: Hola mundo .............................................................................................................. 3

Ejemplo 2: Dar bienvenida a usuario .......................................................................................... 5

Ejemplo 3: Lista de comentarios de un servidor remoto ............................................................. 8

Ejemplo 4: Barra de navegación ............................................................................................... 12

Ejemplo 5: Ejecutar método dado un intervalo de tiempo ........................................................ 16

2

Tutorial básico de Angular JS

Por Cristian Arango Daza

Angular es un framework, diseñado por Google, de tipo MVW (Model View Whatever) para el

frontend.

¿Cuándo usar Angular?

Cuando las vistas se construyen a partir de datos

Cuando las vistas modifican los datos de la aplicación

Cuando la aplicación consume datos de un REST API

Cuando se quiere tener una lógica compleja en Javascript

Beneficios de usar Angular

Directivas: Super Tags de HTML

Controladores: Maneja la lógica de la aplicación por medio de un Scope

Factories y Services: Organiza y comparte código en la aplicación

Filtros: Dar formato a los datos cuando son presentados

3

Ejemplo 1: Hola mundo

1) Ingresa a https://angularjs.org.

2) Haz click en descargar AngularJS1 y escoge la opción que desees. (Si presentas problemas

de conexión se recomienda descargar el zip con Angular).

4

3) Para este caso, usaremos el CDN para agilizar el proceso. Para empezar, se debe importar

Angular en el archivo index.html de tu proyecto.

4) Listo. Ahora vamos a decirle a Angular que nuestra aplicación va a usar su framework. Para

esto vamos a hablar de la directiva ng-app. Ésta es muy importante porque sin ella nuestro

proyecto no usaría Angular. (Cabe recordar que las directivas son Super Tags de HTML).

5) Vamos a utilizar la sintaxis {{code}} para referirnos a Angular.

5

6) Por último, vamos a probar nuestro código en el navegador. Podemos buscar el archivo y

abrirlo con el navegador.

7) Ahora que conocemos lo más básico, vamos a navegar agregando un poco más de dificultad.

Ejemplo 2: Dar bienvenida a usuario

1) Vamos a partir del cuarto paso del Ejemplo 1.

2) Ahora vamos a ver como se manejará la lógica. Para empezar, añadiremos una nueva

directiva llamada ng-controller. Ésta le dirá a la aplicación qué controlador se va encargar

6

de manejar la lógica de la aplicación. Además, necesitamos darle un nombre a la aplicación

para que pueda ser identificada (ng-app=”id”).

3) Vamos a crear nuestro script.js, el cual tendrá la lógica de nuestra aplicación. Para empezar,

se necesita declarar el módulo que contendrá la aplicación.

4) Posteriormente, vamos a crear un controlador de nuestra aplicación. (Debemos colocar el

mismo nombre que pusimos en la directiva en el index.html).

5) El elemento $scope que recibe la función será un elemento que tiene disponible la vista y

el controlador, es el intermediario entre estas dos.

6) Vamos a crear una variable que almacene el nombre de usuario.

7) Ahora vamos a usarlo en la vista. (No olvidar importar el script.js que hicimos).

7

8) El resultado de este ejemplo es el siguiente:

9) Por último, veremos la directiva ng-model. Ésta consiste en asignarle un valor en la vista a

un valor en el controlador.

10) Cuando el usuario escribe algún valor, ng-model busca la variable asignada dentro del

controlador y le asigna el valor digitado. En este caso, lo que digite el usuario será guardado

en la variable usuario dentro del controlador.

8

Ejemplo 3: Lista de comentarios de un servidor remoto

1) Partiremos de la situación que se presenta en la figura a continuación. Se observa un nuevo

objeto llamado $http que se pondrá como parámetro en la función del controlador. Éste

nos va permitir hacer peticiones http.

2) Para este ejemplo vamos a usar una REST API ubicada en

https://jsonplaceholder.typicode.com. A continuación, vamos a hacer una petición de tipo

get para obtener unos datos alojados en esta API. (Se puede usar la consola del navegador

para ver la respuesta).

9

3) Ahora vamos a crear un arreglo para alojar la información que llego del servidor.

Posteriormente, vamos a asignarla. (No olvidar que se debe crear el arreglo posts).

4) En este momento es necesario conocer cómo llega la información y qué podemos

preguntarle a cada objeto del arreglo. Para esto miramos el resultado de la petición a

https://jsonplaceholder.typicode.com/posts.

10

5) Ahora, sabiendo que tiene cada objeto, vamos al index.html y usamos una nueva directiva

llamada ng-repeat. Ésta nos permite recorrer un arreglo o un grupo de información para

desplegarla en la vista.

6) Ya con este código podemos mostrar en la vista lo que recibimos del servidor.

7) Ahora vamos a añadir la funcionalidad de agregar un comentario. Para esto necesitamos

acoplar la vista, preguntándole al usuario por un comentario, y un botón para enviar el

comentario. En este instante aparece la nueva directiva ng-click, la cual responderá a los

eventos de click.

11

8) Ahora vamos a crear un comentario vacío en nuestro controlador y, además, el método que

agrega comentarios en nuestro arreglo.

12

9) Posteriormente, podemos probar y veremos que ya se agregan comentarios nuevos al final

de la lista.

10) En el controlador podemos manejar la lógica de la aplicación, desde hacer CRUD hasta cosas

mucho más interesantes.

Ejemplo 4: Barra de navegación

1) Para este ejemplo partiremos del punto que se ilustra a continuación.

13

2) Para empezar, añadiremos una barra de navegación de

http://getbootstrap.com/components/#navbar en el archivo index.html. (No olvidar importar

bootstrap).

Éste es el resultado:

3) Ahora utilizaremos la directiva llamada ng-hide. Así, cuando se cumpla una condición, el

elemento HTML desaparecerá de la interfaz gráfica. Primero debemos añadir la directiva en el

tag que deseamos que interactúe con la directiva.

14

Ahora debemos crear un usuario en el controlador para que pueda interactuar con la directiva.

4) La interfaz sigue funcionando de la misma manera porque aún no hemos puesto los casos en

los cuales la condición que está en el ng-hide se cumple. Para hacerlo, usaremos la directiva

ng-click de tal forma que se ejecute una función que cambiará el valor de la condición de

ng-hide.

Ahora, en el controlador, crearemos un método iniciarSesion de tal forma que, cuando se haga

click en el botón, la condición usuario==true se cumpla.

15

5) Éste será el resultado cuando se ejecute el botón. Sin embargo, el ejercicio aún está incompleto.

Para solucionar esto vamos a proponer el uso de la directiva ng-show y mostrar nuevas cosas

cuando el usuario inicie sesión.

16

Propuse como elementos un mensaje de bienvenida, un link relacionado a la cuenta del usuario

y un botón para cerrar sesión. Ahora se debe crear el método cerrarSesion en el controlador.

6) El resultado es el siguiente:

Al oprimir el botón que cambia las condiciones, Angular oculta el elemento que contiene el

mensaje Tutorial Angular y el botón de iniciar sesión.

Ejemplo 5: Ejecutar método dado un intervalo de tiempo 1) Empezamos desde este punto.

Index.html

17

script.js

2) El objetivo de este ejemplo será agregar un comentario a la interfaz cada 5 segundos. En

primer lugar, se define un arreglo el cual se llena con comentarios de la API.

// No olvidar importar el objeto $http para poder realizar la petición.

18

3) Angular tiene un objeto capaz de ejecutar un método dado un intervalo de tiempo

($interval). Este objeto recibe como parámetro el método que desea ejecutar, y el tiempo

de intervalo en milisegundos.

El resultado es el siguiente en la consola del navegador

4) Ahora vamos a crear un arreglo vacío (Para ir agregando en cada intervalo un post del otro

arreglo) y un contador (Ir avanzando en el arreglo viejo).

19

script.js

//No olvidar ponerle $scope.array para que la interfaz pueda encontrarlo y pintarlo.

20

5) Por último, una interfaz simple para mostrar los datos del arreglo. (Se utiliza la directiva

ng-repeat para recorrer un arreglo en la interfaz).

El resultado es el siguiente en el navegador

Cada 5 segundos agregará un nuevo elemento a la interfaz.