Upgrade to Pro — share decks privately, control downloads, hide ads and more …

WTMLima 2014

zezzi
March 15, 2014

WTMLima 2014

Angular JS WTMLima 2014

zezzi

March 15, 2014
Tweet

More Decks by zezzi

Other Decks in Technology

Transcript

  1. Viaje en el tiempo Que es angular? var hola=“Estamos en

    el taller” ! Old school! <div id=“mensaje”></div> document.getElementById(“mensaje”).textContent=hola; ! JQuery! <div id=“mensaje”></div> $(“mensaje”).text(hola); ! Ahora con Angular! <div>{{hola}}</div>
  2. • Angular JS es “opinionated”. 
 • !Spaghetti Code. •

    Te ayuda a realizar la manipulación del DOM • Escribir código con unit testing en mente. Usualmente hay una manera “correcta” de hacer lo que quieres
  3. MVC Routing Testing jqLite Templates History Factories ViewModel Controllers Views

    Directives Services Dependency Injection Validation Data Binding
  4. Modelo La información de tu aplicación Vista La representación de

    la información del modelo Data de una Base de datos,Informacion que escribe el usuario Lo que mira el usuario Controlador mediador entre el modelo y la vista Cuando se guarda información , cuando se obtiene información de un api, cuando se realiza alguna búsqueda. Recordando MVC
  5. Modelo la información de tu aplicación Vista La representación de

    la información del modelo ej: Un arreglo de datos html fragment w/ ng-controller attribute Controlador mediador entre el modelo y la vista Pasa la información del modelo a la vista a través de data binding MVC a la manera de Angular
  6. Modelo la información de tu aplicación Vista La representación de

    la información del modelo ej: Un arreglo de datos html fragment w/ ng-controller attribute Controlador mediador entre el modelo y la vista Pasa la información del modelo a la vista a través de data binding MVC a la manera de Angular
  7. Es una herramienta que te permite generar scaffolds de una

    aplicación web de una manera “opinionated” yo grunt bower
  8. Pasos para empezar $yo ->#Instalar generator $npm install -g generator-angular

    $mkdir aplicación $cd aplicación $npm install -g karma $ yo angular ! Troubleshooting: git  config  -­‐-­‐global  url."https://".insteadOf  git://  
  9. $scope Scope es la goma que une el controlador de

    la application con la vista • Organizan Jerarquicamente (Similar al DOM) • $watch : Para observar cambios en los modelos • $apply : para propagar cualquier cambio que ocurra en el modelo a las vistas
  10. Directives • Son marcadores en el DOM que le dicen

    al “compilador” de Angular hacer attachment de cierto comportamiento a los elementos del DOM • ngBind,ngModel,ngView
  11. Modules Es un contenedor de las diferentes partes de tu

    aplicación: controllers, services, filters, directives, etc. ! La mayoría de aplicaciones tiene algún metido main que junta todos los elementos de la aplicación. Angular no tienen un metido main, en lugar de eso cada modulo especifica como debe ser inicializado y sus dependencias.
  12. Services Son objetos sustituibles que están unidos a la aplicación

    por el DI. Organizar y Compartir codigo dentro de la aplicación. Lazily Intsantiated Singleton (Service Factory)