AngularJSConceptos Prácticos

Filosofia de AngularJS

Directivas Básicas

Controladoras y Servicios

Routing

Directivas (Introducción)

Agenda

FilosofiaY un poco de Introducción

4

Single Page Apps Aplicaciones que no vuelven a refrescar

toda la página Pensadas para interacciones complejas Maximizar la experiencia de usuario

5

Single Page Apps (SPA) Aplicaciones que no vuelven a refrescar

toda la página Pensadas para interacciones complejas Maximizar la experiencia de usuario

6

Construyendolas tu mismo

7

Usando un framework

8

SPA Powers

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

10

Single Page Application (SPA)

View View

ViewView

11

The challenge with SPAs

DOM Manipulation

Routing

Data Binding

History

Caching

Ajax/Promises

Module Loading

Object Modeling

View Loading

12

13

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

15

Iniciando Angular

Inicio clásico

Inicio con módulo

16

Data Binding “BiDireccional”

VS

Directivas Básicas

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

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/

Controladoras y Servicios

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

22

Entendiendo las controladoras Mediante el $scope se define el viewmodel

inicial

Las funciones del scope pueden ser usadas como manejadores de eventos

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”.

24

Inyeccion de dependencias Angular gestiona automáticamente que

servicio llamar Sin embargo es mejor hacer lo siguiente:

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

26

La controladora no: Realiza cambios en el DOM

Formatea el input (form controls)

Filtra el output (filters)

Comparte código con otras

27

Definiendo controladora

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/

Hagamos un carrito de compra

◦ http://jsfiddle.net/scyrizales/k5Zfb/

Ejemplo de Clase

30

Como ordenarnos (filtros) Sirven para formatear los datos También se puede usar para filtrar arreglos

Refactorizemos el ejemplo anterior

Crearemos el filtro Moneda

Ejemplo de Clase

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

33

Definiendo Servicios

Refactorizemos el ejemplo anterior

Crearemos el servicio Carrito

Ejemplo de Clase

35

Routing

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.

37

Manejando la Historia El browser tiene que saber que hay

interacciones

Tenemos que controlar el evento Hashchanged

38

$routeProvider Sirve para añadir nuevas rutas Dos métodos

◦ when◦ otherwhise

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

40

$routeProvider.otherwise Define ruta por defecto. Recibe como parametro un objeto route

(explicado en la anterior diapositiva)

41

ng-view Directiva que se usa como contenedor de

las vistas a renderizar

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

43

Ejemplo Servicio Externo http://jsfiddle.net/scyrizales/hm72F/

44

Ejemplo: Carrito con Routing http://jsfiddle.net/scyrizales/sHP48/

Directivas

46

¿Qué es una Directiva? Las directivas es lo que hace diferente a

AngularJS Permiten encapsular funcionalidad en puro

html.

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

48

Razones para escribir directivas Encapsular un plugin de otra libreria

La directiva no existe

Las directivas que existen no cumplen con las necesidades.

49

¿Como crear Directivas?

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

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

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.

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.

54

Ejemplos (Directiva Simple)

Hagamos una calculadora◦ http://jsfiddle.net/scyrizales/mUJhL/

55

Ejemplos (Directiva Simple) Hagamos un time formatter

◦ http://jsfiddle.net/scyrizales/rUbsE/

56

Ejemplos (Directiva Anidada) Hagamos un tab panel

◦ http://jsfiddle.net/scyrizales/6C6Mv/

Muchas Gracias¿Alguna pregunta?

Sergio CastilloFront End Developer@scyrizales