WTMLima 2014

Angular JS WTMLima 2014

Transcript

1. @zezzi! ceciliacastillo@elementalgeeks.com
2. @zezzi! ceciliacastillo@elementalgeeks.com
3. https://github.com/zezzi/WTMAngularjscompleto https://github.com/zezzi/WTMAngularjs http://bit.ly/1fIy1ht @zezzi! ceciliacastillo@elementalgeeks.com
4. http://angularjs.org
7. 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>
8. • 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
9. MVC Routing Testing jqLite Templates History Factories ViewModel Controllers Views Directives Services Dependency Injection Validation Data Binding
10. 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
11. 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
12. 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
13. http://yeoman.io/
14. Es una herramienta que te permite generar scaffolds de una aplicación web de una manera “opinionated” yo grunt bower
16. Pasos para empezar • 1) Instalar Node: 
 https://github.com/joyent/node/wiki/Installing-Node.js-via- package-manager • 2) Instalar Yeoman
 npm install -g yo
17. 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://  
18. CREAR PROYECTO
19. Estructura del proyecto
20. DEMO CH0-CH2 ! Index.html(Estatico) http://bit.ly/1m3nJvS JSON inicial(Estatico) http://bit.ly/1kQQnjt
21. Data Binding Data-binding es la sincronización automatica entre el modelo y la vista.
22. Data Binding
23. Data Binding
24. $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
25. 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
26. Template
27. DEMO CH3
28. Filters filert currency number date json lowercase uppercase limitTo orderBy
29. Filters
30. DEMO CH4
31. 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.
32. 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)
33. DEMO CH5-6
34. @zezzi! ceciliacastillo@elementalgeeks.com