• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Advanced angular 1
 

Advanced angular 1

on

  • 686 views

 

Statistics

Views

Total Views
686
Views on SlideShare
686
Embed Views
0

Actions

Likes
0
Downloads
23
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Advanced angular 1 Advanced angular 1 Presentation Transcript

    • Angular Avanzado Sesion 1 Sergio Castillo Yrizales @scyrizales
    • Agenda  Arquitectura de Angular  Routing  Explicando la Magia 2
    • Arquitectura de Angular 3
    • 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 4
    • Modulo  Es el punto de partida para la organización de código en Angular  Se indica en la directiva ng-app 5
    • Data Binding “BiDireccional” 6
    • Entendiendo las controladoras  Mediante el $scope se define el viewmodel inicial  Las funciones del scope pueden ser usadas como manejadores de eventos 7
    • Inyeccion de dependencias  Angular gestiona automáticamente que servicio llamar  Sin embargo es mejor hacer lo siguiente: 8
    • $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”. 9
    • 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. 10
    • La controladora no:  Realiza cambios en el DOM  Formatea el input (form controls)  Filtra el output (filters)  Comparte código con otras 11
    • 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/ 12
    • Routing 13
    • Ejemplo de Clase  Construir un carrito de compras:  Categorias  Productos  Cantidades  Checkout 14
    • 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. 15
    • Manejando la Historia  El browser tiene que saber que hay interacciones  Tenemos que controlar el evento Hashchanged 16
    • $routeProvider  Sirve para añadir nuevas rutas  Dos métodos  when  otherwhise 17
    • $routeProvider.when Parametro path La ruta que se compara contra $location.path route 18 Descripción 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
    • $routeProvider.otherwise  Define ruta por defecto.  Recibe como parametro un objeto route (explicado en la anterior diapositiva) 19
    • ng-view  Directiva que se usa como contenedor de las vistas a renderizar 20
    • 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 21
    • Ejemplo: Carrito con Routing  http://jsfiddle.net/scyrizales/sHP48/ 22
    • Explicando la magia 23
    • Explicando el Data Binding  Cada vez que cambia el scope, se actualiza la vista.  Cada vez que un “major event” sucede en la aplicación, y luego de que sucede, se ejecuta una operación “digest” y se actualiza el scope 24
    • Major Events  Entradas de usuario:  Mouse, keyboard, etc.  Eventos de Navegador:  timeout, blur, etc.  Llamadas Ajax:  json, templates, etc… 25
    • $apply, $digest and $$phase  $digest es un metodo interno que realiza la verificación de los cambios entre la vista y el scope y hace las respectivas actualizaciones al scope  $apply sirve para llamar desde fuera al $digest. Cuando usamos otras librerias externas, es necesario llamar a $apply  $$phase es un indicador de si esta corriendo un 26 $digest. Debemos tenerlo en cuenta para no aplicar $apply porque nos dará un error.
    • Llamando a Angular desde fuera  angular.element(domElement).scope()  Sobre este scope, podemos aplicar las funciones $apply y $digest. 27
    • SafeApply  Para evitar los problemas de usar el $apply podemos crear esta función en el rootScope 28
    • Contruyamos un blog  Listado de entradas  Agregar nuevos posts (eliminarlos y modificarlos) 29
    • Directivas 30
    • ¿Qué es una Directiva?  Las directivas es lo que hace diferente a AngularJS  Permiten encapsular funcionalidad en puro html. 31
    • Razones para escribir directivas  Necesidades especiales  Imaginen poder usar este código para compartir un mismo formulario en cualquier parte de su aplicación 32
    • Razones para escribir directivas  Encapsular un plugin de otra libreria  La directiva no existe  Las directivas que existen no cumplen con las necesidades. 33
    • ¿Como crear Directivas? 34
    • Valores de las propiedades Propiedad 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 35 Valor La controladora que se usara para darle ambito al template, no siempre es necesario
    • Valores de las propiedades Propiedad requires Indica si una directiva depende de otra link 36 Valor 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
    • 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. 37
    • 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. 38
    • Ejemplos (Directiva Simple)  Hagamos una calculadora  http://jsfiddle.net/scyrizales/mUJhL/ 39
    • Ejemplos (Directiva Simple)  Hagamos un time formatter  http://jsfiddle.net/scyrizales/rUbsE/ 40
    • Ejemplos (Directiva Anidada)  Hagamos un tab panel  http://jsfiddle.net/scyrizales/6C6Mv/ 41