contenido - profesoresisis3710/dokuwiki/lib/... · llamada ng-repeat. Ésta nos permite recorrer un...
Post on 21-Oct-2018
216 Views
Preview:
TRANSCRIPT
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).
top related