Angular JS

Transcript

2. @zezzi! ceciliacastillo@elementalgeeks.com
3. http://angularjs.org
6. 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>
7. • 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
8. http://yeoman.io/
9. Es una herramienta que te permite generar scaffolds de una aplicación web de una manera “opinionated” yo grunt bower
11. 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
12. 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://  
13. MVC Routing Testing jqLite Templates History Factories ViewModel Controllers Views Directives Services Dependency Injection Validation Data Binding
14. 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
15. 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
16. 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
17. CREAR PROYECTO
19. Estructura del proyecto
20. Template
21. Template
22. 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
24. Filters
25. Filters filert currency number date json lowercase uppercase limitTo orderBy
26. Data Binding Data-binding es la sincronización automatica entre el modelo y la vista.
27. Data Binding
28. Data Binding
29. $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
30. 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 metodo 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.
31. 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)
32. Services
33. Routes
34. @zezzi! ceciliacastillo@elementalgeeks.com