Download - Angular Conceptos Practicos 1
![Page 1: Angular Conceptos Practicos 1](https://reader036.vdocuments.co/reader036/viewer/2022062419/5593106e1a28abf9788b4613/html5/thumbnails/1.jpg)
AngularJSConceptos Prácticos
![Page 2: Angular Conceptos Practicos 1](https://reader036.vdocuments.co/reader036/viewer/2022062419/5593106e1a28abf9788b4613/html5/thumbnails/2.jpg)
Filosofia de AngularJS
Directivas Básicas
Controladoras y Servicios
Routing
Directivas (Introducción)
Agenda
![Page 3: Angular Conceptos Practicos 1](https://reader036.vdocuments.co/reader036/viewer/2022062419/5593106e1a28abf9788b4613/html5/thumbnails/3.jpg)
FilosofiaY un poco de Introducción
![Page 4: Angular Conceptos Practicos 1](https://reader036.vdocuments.co/reader036/viewer/2022062419/5593106e1a28abf9788b4613/html5/thumbnails/4.jpg)
4
Single Page Apps Aplicaciones que no vuelven a refrescar
toda la página Pensadas para interacciones complejas Maximizar la experiencia de usuario
![Page 5: Angular Conceptos Practicos 1](https://reader036.vdocuments.co/reader036/viewer/2022062419/5593106e1a28abf9788b4613/html5/thumbnails/5.jpg)
5
Single Page Apps (SPA) Aplicaciones que no vuelven a refrescar
toda la página Pensadas para interacciones complejas Maximizar la experiencia de usuario
![Page 6: Angular Conceptos Practicos 1](https://reader036.vdocuments.co/reader036/viewer/2022062419/5593106e1a28abf9788b4613/html5/thumbnails/6.jpg)
6
Construyendolas tu mismo
![Page 7: Angular Conceptos Practicos 1](https://reader036.vdocuments.co/reader036/viewer/2022062419/5593106e1a28abf9788b4613/html5/thumbnails/7.jpg)
7
Usando un framework
![Page 8: Angular Conceptos Practicos 1](https://reader036.vdocuments.co/reader036/viewer/2022062419/5593106e1a28abf9788b4613/html5/thumbnails/8.jpg)
8
SPA Powers
![Page 9: Angular Conceptos Practicos 1](https://reader036.vdocuments.co/reader036/viewer/2022062419/5593106e1a28abf9788b4613/html5/thumbnails/9.jpg)
9
¿Por qué Angular? HTML es genial para webs estáticas.
Las aplicaciones reales son dinámicas
Angular le enseña nuevos trucos a tu viejo HTML
Controla muchos aspectos necesarios para construir SPA’s
![Page 10: Angular Conceptos Practicos 1](https://reader036.vdocuments.co/reader036/viewer/2022062419/5593106e1a28abf9788b4613/html5/thumbnails/10.jpg)
10
Single Page Application (SPA)
View View
ViewView
![Page 11: Angular Conceptos Practicos 1](https://reader036.vdocuments.co/reader036/viewer/2022062419/5593106e1a28abf9788b4613/html5/thumbnails/11.jpg)
11
The challenge with SPAs
DOM Manipulation
Routing
Data Binding
History
Caching
Ajax/Promises
Module Loading
Object Modeling
View Loading
![Page 12: Angular Conceptos Practicos 1](https://reader036.vdocuments.co/reader036/viewer/2022062419/5593106e1a28abf9788b4613/html5/thumbnails/12.jpg)
12
![Page 13: Angular Conceptos Practicos 1](https://reader036.vdocuments.co/reader036/viewer/2022062419/5593106e1a28abf9788b4613/html5/thumbnails/13.jpg)
13
![Page 14: Angular Conceptos Practicos 1](https://reader036.vdocuments.co/reader036/viewer/2022062419/5593106e1a28abf9788b4613/html5/thumbnails/14.jpg)
14
¿Qué es AngularJS? Framework para aplicaciones dinámicas.
Solución completa para el lado cliente.
Facilidad para el mantenimiento
Nunca mas ir y venir entre el DOM y el modelo
![Page 15: Angular Conceptos Practicos 1](https://reader036.vdocuments.co/reader036/viewer/2022062419/5593106e1a28abf9788b4613/html5/thumbnails/15.jpg)
15
Iniciando Angular
Inicio clásico
Inicio con módulo
![Page 16: Angular Conceptos Practicos 1](https://reader036.vdocuments.co/reader036/viewer/2022062419/5593106e1a28abf9788b4613/html5/thumbnails/16.jpg)
16
Data Binding “BiDireccional”
VS
![Page 17: Angular Conceptos Practicos 1](https://reader036.vdocuments.co/reader036/viewer/2022062419/5593106e1a28abf9788b4613/html5/thumbnails/17.jpg)
Directivas Básicas
![Page 18: Angular Conceptos Practicos 1](https://reader036.vdocuments.co/reader036/viewer/2022062419/5593106e1a28abf9788b4613/html5/thumbnails/18.jpg)
ng-app◦ Inicial. Se puede indicar el modulo de la App
ng-show◦ Muestra un elemento en base a una condición
ng-hide◦ Oculta un elemento en base a una condición
ng-click◦ Maneja el evento click sobre un elemento
http://docs.angularjs.org/api/
Directivas Básicas
![Page 19: Angular Conceptos Practicos 1](https://reader036.vdocuments.co/reader036/viewer/2022062419/5593106e1a28abf9788b4613/html5/thumbnails/19.jpg)
19
Ejemplo de Clase Convertir la barra de menu estatica
◦ Seleccionar y cambiar el color del link seleccionado
◦ Mostrar en la parte inferior el vinculo seleccionado
◦ No usar nada de javascript
◦ Base: http://jsfiddle.net/scyrizales/TzNhB/embedded/result/
◦ Final http://jsfiddle.net/scyrizales/5ZxMm/embedded/result/
![Page 20: Angular Conceptos Practicos 1](https://reader036.vdocuments.co/reader036/viewer/2022062419/5593106e1a28abf9788b4613/html5/thumbnails/20.jpg)
Controladoras y Servicios
![Page 21: Angular Conceptos Practicos 1](https://reader036.vdocuments.co/reader036/viewer/2022062419/5593106e1a28abf9788b4613/html5/thumbnails/21.jpg)
Un concepto de angular que maneja interacciones del usuario
Controla la data que viene de los “modelos”
Uno de los “elementos” mas usados es $scope
Que es una Controladora
![Page 22: Angular Conceptos Practicos 1](https://reader036.vdocuments.co/reader036/viewer/2022062419/5593106e1a28abf9788b4613/html5/thumbnails/22.jpg)
22
Entendiendo las controladoras Mediante el $scope se define el viewmodel
inicial
Las funciones del scope pueden ser usadas como manejadores de eventos
![Page 23: Angular Conceptos Practicos 1](https://reader036.vdocuments.co/reader036/viewer/2022062419/5593106e1a28abf9788b4613/html5/thumbnails/23.jpg)
23
$scope Este servicio sirve para unir la data a la
vista
Contexto para las expresiones usadas en la vista
Provee un metodo para “observar” los cambios
Provee un método para recibir cambios desde “afuera”.
![Page 24: Angular Conceptos Practicos 1](https://reader036.vdocuments.co/reader036/viewer/2022062419/5593106e1a28abf9788b4613/html5/thumbnails/24.jpg)
24
Inyeccion de dependencias Angular gestiona automáticamente que
servicio llamar Sin embargo es mejor hacer lo siguiente:
![Page 25: Angular Conceptos Practicos 1](https://reader036.vdocuments.co/reader036/viewer/2022062419/5593106e1a28abf9788b4613/html5/thumbnails/25.jpg)
25
Como usar las Controladoras
Controladoras para separar funciones
Para dar ámbito a las expresiones
Para organizar el paso de información desde los servicios
Para responder a los eventos del usuario
![Page 26: Angular Conceptos Practicos 1](https://reader036.vdocuments.co/reader036/viewer/2022062419/5593106e1a28abf9788b4613/html5/thumbnails/26.jpg)
26
La controladora no: Realiza cambios en el DOM
Formatea el input (form controls)
Filtra el output (filters)
Comparte código con otras
![Page 27: Angular Conceptos Practicos 1](https://reader036.vdocuments.co/reader036/viewer/2022062419/5593106e1a28abf9788b4613/html5/thumbnails/27.jpg)
27
Definiendo controladora
![Page 28: Angular Conceptos Practicos 1](https://reader036.vdocuments.co/reader036/viewer/2022062419/5593106e1a28abf9788b4613/html5/thumbnails/28.jpg)
28
Entendiendo las vistas Las vistas sirven para mostrar el
viewmodel.
Existen muchas directivas para lograr el comportamiento requerido
Directivas en Angular:◦ http://docs.angularjs.org/api/
![Page 29: Angular Conceptos Practicos 1](https://reader036.vdocuments.co/reader036/viewer/2022062419/5593106e1a28abf9788b4613/html5/thumbnails/29.jpg)
Hagamos un carrito de compra
◦ http://jsfiddle.net/scyrizales/k5Zfb/
Ejemplo de Clase
![Page 30: Angular Conceptos Practicos 1](https://reader036.vdocuments.co/reader036/viewer/2022062419/5593106e1a28abf9788b4613/html5/thumbnails/30.jpg)
30
Como ordenarnos (filtros) Sirven para formatear los datos También se puede usar para filtrar arreglos
![Page 31: Angular Conceptos Practicos 1](https://reader036.vdocuments.co/reader036/viewer/2022062419/5593106e1a28abf9788b4613/html5/thumbnails/31.jpg)
Refactorizemos el ejemplo anterior
Crearemos el filtro Moneda
Ejemplo de Clase
![Page 32: Angular Conceptos Practicos 1](https://reader036.vdocuments.co/reader036/viewer/2022062419/5593106e1a28abf9788b4613/html5/thumbnails/32.jpg)
32
Que es un servicio Los servicios son la mejor forma de
compartir información
Permiten encapsular funcionalidad
Gracias a la DI se pueden testear sin problemas
Los servicios se manejan como Singletons
![Page 33: Angular Conceptos Practicos 1](https://reader036.vdocuments.co/reader036/viewer/2022062419/5593106e1a28abf9788b4613/html5/thumbnails/33.jpg)
33
Definiendo Servicios
![Page 34: Angular Conceptos Practicos 1](https://reader036.vdocuments.co/reader036/viewer/2022062419/5593106e1a28abf9788b4613/html5/thumbnails/34.jpg)
Refactorizemos el ejemplo anterior
Crearemos el servicio Carrito
Ejemplo de Clase
![Page 35: Angular Conceptos Practicos 1](https://reader036.vdocuments.co/reader036/viewer/2022062419/5593106e1a28abf9788b4613/html5/thumbnails/35.jpg)
35
Routing
![Page 36: Angular Conceptos Practicos 1](https://reader036.vdocuments.co/reader036/viewer/2022062419/5593106e1a28abf9788b4613/html5/thumbnails/36.jpg)
36
El botón atrás. El browser no sabe nada acerca de las
vistas
El browser siempre va a regresar a la pagina anterior
Si hubieron varias vistas, lástima.
![Page 37: Angular Conceptos Practicos 1](https://reader036.vdocuments.co/reader036/viewer/2022062419/5593106e1a28abf9788b4613/html5/thumbnails/37.jpg)
37
Manejando la Historia El browser tiene que saber que hay
interacciones
Tenemos que controlar el evento Hashchanged
![Page 38: Angular Conceptos Practicos 1](https://reader036.vdocuments.co/reader036/viewer/2022062419/5593106e1a28abf9788b4613/html5/thumbnails/38.jpg)
38
$routeProvider Sirve para añadir nuevas rutas Dos métodos
◦ when◦ otherwhise
![Page 39: Angular Conceptos Practicos 1](https://reader036.vdocuments.co/reader036/viewer/2022062419/5593106e1a28abf9788b4613/html5/thumbnails/39.jpg)
39
$routeProvider.whenParametro Descripción
path La ruta que se compara contra $location.path
route Objeto con diversas propiedades que indican varios tipos de configuraciones:•controller: La controladora a usar.•template: String que define el template a usar•templateUrl: ruta fisica de donde cargar un template•redirectTo: manejar redirecciones dentro de angular
![Page 40: Angular Conceptos Practicos 1](https://reader036.vdocuments.co/reader036/viewer/2022062419/5593106e1a28abf9788b4613/html5/thumbnails/40.jpg)
40
$routeProvider.otherwise Define ruta por defecto. Recibe como parametro un objeto route
(explicado en la anterior diapositiva)
![Page 41: Angular Conceptos Practicos 1](https://reader036.vdocuments.co/reader036/viewer/2022062419/5593106e1a28abf9788b4613/html5/thumbnails/41.jpg)
41
ng-view Directiva que se usa como contenedor de
las vistas a renderizar
![Page 42: Angular Conceptos Practicos 1](https://reader036.vdocuments.co/reader036/viewer/2022062419/5593106e1a28abf9788b4613/html5/thumbnails/42.jpg)
42
Partial Inline templates Se puede definir un template dentro del
documento con el que trabajamos. Usamos la etiqueta script junto con el tipo
text/ng-template
![Page 43: Angular Conceptos Practicos 1](https://reader036.vdocuments.co/reader036/viewer/2022062419/5593106e1a28abf9788b4613/html5/thumbnails/43.jpg)
43
Ejemplo Servicio Externo http://jsfiddle.net/scyrizales/hm72F/
![Page 44: Angular Conceptos Practicos 1](https://reader036.vdocuments.co/reader036/viewer/2022062419/5593106e1a28abf9788b4613/html5/thumbnails/44.jpg)
44
Ejemplo: Carrito con Routing http://jsfiddle.net/scyrizales/sHP48/
![Page 45: Angular Conceptos Practicos 1](https://reader036.vdocuments.co/reader036/viewer/2022062419/5593106e1a28abf9788b4613/html5/thumbnails/45.jpg)
Directivas
![Page 46: Angular Conceptos Practicos 1](https://reader036.vdocuments.co/reader036/viewer/2022062419/5593106e1a28abf9788b4613/html5/thumbnails/46.jpg)
46
¿Qué es una Directiva? Las directivas es lo que hace diferente a
AngularJS Permiten encapsular funcionalidad en puro
html.
![Page 47: Angular Conceptos Practicos 1](https://reader036.vdocuments.co/reader036/viewer/2022062419/5593106e1a28abf9788b4613/html5/thumbnails/47.jpg)
47
Razones para escribir directivas Necesidades especiales
◦ Imaginen poder usar este código para compartir un mismo formulario en cualquier parte de su aplicación
![Page 48: Angular Conceptos Practicos 1](https://reader036.vdocuments.co/reader036/viewer/2022062419/5593106e1a28abf9788b4613/html5/thumbnails/48.jpg)
48
Razones para escribir directivas Encapsular un plugin de otra libreria
La directiva no existe
Las directivas que existen no cumplen con las necesidades.
![Page 49: Angular Conceptos Practicos 1](https://reader036.vdocuments.co/reader036/viewer/2022062419/5593106e1a28abf9788b4613/html5/thumbnails/49.jpg)
49
¿Como crear Directivas?
![Page 50: Angular Conceptos Practicos 1](https://reader036.vdocuments.co/reader036/viewer/2022062419/5593106e1a28abf9788b4613/html5/thumbnails/50.jpg)
50
Valores de las propiedadesPropiedad Valor
restrict Puede ser A,E,C y M que significan attribute, element, class, o comment
scope Cada subpropiedad puede tener cualquiera de estos 3 valores:•@: el valor es de un solo sentido•=: el valor es de dos sentidos•&: guarda una referencia a una función o expresión
template La base para escribir el código que usará la directiva
replace Boolean que indica si se debe reemplazar el html original por el html generado por el template
transclude Indica si se debe preservar el contenido de la declaración de la directiva en el html original, se usa en conjunto con ng-transclude
controller La controladora que se usara para darle ambito al template, no siempre es necesario
![Page 51: Angular Conceptos Practicos 1](https://reader036.vdocuments.co/reader036/viewer/2022062419/5593106e1a28abf9788b4613/html5/thumbnails/51.jpg)
51
Valores de las propiedadesPropiedad Valor
requires Indica si una directiva depende de otra
link Función que realiza la configuración inicial de la directiva. Recibe cuatro parametros:function link(scope, iElement, iAttrs, controller)•scope: indica el objeto creado por la propiedad scope.•iElement: se refiere al objeto base de la controladora. Este vienen encapsulado en jqLite o Jquery (si es que se incluyo en el proyecto)•iAttrs: los atributos que se asignaron al html original de la directiva declarada•Controller: el controller de la directiva padre. Solo cuando se ha establecido la propiedad requires
![Page 52: Angular Conceptos Practicos 1](https://reader036.vdocuments.co/reader036/viewer/2022062419/5593106e1a28abf9788b4613/html5/thumbnails/52.jpg)
52
Jerarquía de scopes Al usar directivas, se crean nuevos scopes, o
se heredan los scopes padres. Si al definir la directiva, no se usa la
propiedad scope, la directiva crea un nuevo scope que hereda todas las propiedades del scope de la controladora que contiene a la directiva.
Al momento de usar la propiedad scope, se pierde toda conexión con el scope padre, y se genera un scope independiente para la directiva.
![Page 53: Angular Conceptos Practicos 1](https://reader036.vdocuments.co/reader036/viewer/2022062419/5593106e1a28abf9788b4613/html5/thumbnails/53.jpg)
53
Usando $watch El método $watch (forma parte del scope)
sirve para verificar cambios en alguna propiedad del scope.
La sintaxis es:◦ $scope.$watch(‘propiedad’, function(value){ });◦ La funcion suscrita es la forma de realizar los
cambios necesarios ante un cambio en la propiedad suscrita
Se puede usar para verificar cambios en propiedades de la controladora padre inclusive.
![Page 54: Angular Conceptos Practicos 1](https://reader036.vdocuments.co/reader036/viewer/2022062419/5593106e1a28abf9788b4613/html5/thumbnails/54.jpg)
54
Ejemplos (Directiva Simple)
Hagamos una calculadora◦ http://jsfiddle.net/scyrizales/mUJhL/
![Page 55: Angular Conceptos Practicos 1](https://reader036.vdocuments.co/reader036/viewer/2022062419/5593106e1a28abf9788b4613/html5/thumbnails/55.jpg)
55
Ejemplos (Directiva Simple) Hagamos un time formatter
◦ http://jsfiddle.net/scyrizales/rUbsE/
![Page 56: Angular Conceptos Practicos 1](https://reader036.vdocuments.co/reader036/viewer/2022062419/5593106e1a28abf9788b4613/html5/thumbnails/56.jpg)
56
Ejemplos (Directiva Anidada) Hagamos un tab panel
◦ http://jsfiddle.net/scyrizales/6C6Mv/
![Page 57: Angular Conceptos Practicos 1](https://reader036.vdocuments.co/reader036/viewer/2022062419/5593106e1a28abf9788b4613/html5/thumbnails/57.jpg)
Muchas Gracias¿Alguna pregunta?
Sergio CastilloFront End Developer@scyrizales