introducciòn a angularjs
TRANSCRIPT
![Page 1: Introducciòn a AngularJS](https://reader033.vdocuments.site/reader033/viewer/2022042816/559433f41a28ab961a8b4643/html5/thumbnails/1.jpg)
AngularJS
![Page 2: Introducciòn a AngularJS](https://reader033.vdocuments.site/reader033/viewer/2022042816/559433f41a28ab961a8b4643/html5/thumbnails/2.jpg)
Sobre mi
René [email protected]://minet.com.do/
● BSc. Ingenieria de Sistemas.● MSc. Electronic Commerce.● 14 años de experiencia en
el área web.● Hobbies: Cerveza, aprender,
enseñar & all-things-web-development
![Page 3: Introducciòn a AngularJS](https://reader033.vdocuments.site/reader033/viewer/2022042816/559433f41a28ab961a8b4643/html5/thumbnails/3.jpg)
Què veremos?
1. Què es AngularJS? 2. Por què usar AngularJS?3. MVC 4. Controladores y Modelos 5. Views y Directivas6. Enrutamiento / SPA7. Resources
![Page 4: Introducciòn a AngularJS](https://reader033.vdocuments.site/reader033/viewer/2022042816/559433f41a28ab961a8b4643/html5/thumbnails/4.jpg)
Què es AngularJS?
● Framework de Javascript.● Adopta el modelo MVC.● Extiende el lenguaje HTML.● Promueve el uso de unit tests.● jQuery ahorra Javascript; Angular ahorra
jQuery.
![Page 5: Introducciòn a AngularJS](https://reader033.vdocuments.site/reader033/viewer/2022042816/559433f41a28ab961a8b4643/html5/thumbnails/5.jpg)
Por què usar AngularJS?
● Plain old Javascript● KISS● Stand Alone● Full-featured
![Page 6: Introducciòn a AngularJS](https://reader033.vdocuments.site/reader033/viewer/2022042816/559433f41a28ab961a8b4643/html5/thumbnails/6.jpg)
AngularJS / Otros
● Ember (link)● KnockOut(link)● Angular (link)
![Page 7: Introducciòn a AngularJS](https://reader033.vdocuments.site/reader033/viewer/2022042816/559433f41a28ab961a8b4643/html5/thumbnails/7.jpg)
Angular MVC
![Page 8: Introducciòn a AngularJS](https://reader033.vdocuments.site/reader033/viewer/2022042816/559433f41a28ab961a8b4643/html5/thumbnails/8.jpg)
Controladores / Modelos
![Page 9: Introducciòn a AngularJS](https://reader033.vdocuments.site/reader033/viewer/2022042816/559433f41a28ab961a8b4643/html5/thumbnails/9.jpg)
Vistas / Directivas
![Page 10: Introducciòn a AngularJS](https://reader033.vdocuments.site/reader033/viewer/2022042816/559433f41a28ab961a8b4643/html5/thumbnails/10.jpg)
Demo Simple
http://plnkr.co/edit/Vk6tt1WByib2AjA0ka7Z?p=preview
![Page 11: Introducciòn a AngularJS](https://reader033.vdocuments.site/reader033/viewer/2022042816/559433f41a28ab961a8b4643/html5/thumbnails/11.jpg)
Modelos
● Contienen toda la informaciòn a desplegarse en las vistas.
● Se insertan a travès de $scope.● Pueden ser tipos primitivos, objetos, clases,
etc.● Es buena práctica colocar los modelos
dentro de un objeto.
![Page 12: Introducciòn a AngularJS](https://reader033.vdocuments.site/reader033/viewer/2022042816/559433f41a28ab961a8b4643/html5/thumbnails/12.jpg)
Controladores
● Encapsulan todo el comportamiento y los modelos que debe tener una vista.
● Inyectan servicios y recursos al scope.● Posibilidad de herencia de scope en forma
de cascada.● Pueden emitir y escuchar eventos.● No se debe accesar el DOM desde aquì
![Page 13: Introducciòn a AngularJS](https://reader033.vdocuments.site/reader033/viewer/2022042816/559433f41a28ab961a8b4643/html5/thumbnails/13.jpg)
Demo màs completo
http://plnkr.co/edit/nOJqrklbC48i71ETHb6p?p=preview
![Page 14: Introducciòn a AngularJS](https://reader033.vdocuments.site/reader033/viewer/2022042816/559433f41a28ab961a8b4643/html5/thumbnails/14.jpg)
Servicios $http y $timeout
http://plnkr.co/edit/3Nhrc3eEQRZg7uMsSec3
![Page 15: Introducciòn a AngularJS](https://reader033.vdocuments.site/reader033/viewer/2022042816/559433f41a28ab961a8b4643/html5/thumbnails/15.jpg)
$scope Inheritance
http://plnkr.co/edit/LOfEWjsEjMammFtBK1N5
![Page 16: Introducciòn a AngularJS](https://reader033.vdocuments.site/reader033/viewer/2022042816/559433f41a28ab961a8b4643/html5/thumbnails/16.jpg)
Vistas
● Despliegan la informaciòn contenida en los modelos de un controlador en especìfico.
● Pueden declarar distintos controladores para diferentes àreas.
![Page 17: Introducciòn a AngularJS](https://reader033.vdocuments.site/reader033/viewer/2022042816/559433f41a28ab961a8b4643/html5/thumbnails/17.jpg)
Filtros
● Helpers para modificar modelos.● Se pueden usar tanto en los views,
directivas y hasta desde los controladores.
![Page 18: Introducciòn a AngularJS](https://reader033.vdocuments.site/reader033/viewer/2022042816/559433f41a28ab961a8b4643/html5/thumbnails/18.jpg)
Ejemplo Filtro
http://plnkr.co/edit/L4KeMW0XuU5s82T3qKZo
![Page 19: Introducciòn a AngularJS](https://reader033.vdocuments.site/reader033/viewer/2022042816/559433f41a28ab961a8b4643/html5/thumbnails/19.jpg)
Directivas
● Sirven para enlazar los modelos con las vistas.
● Extienden el comportamiento de las etiquetas HTML.
● Permiten la creaciòn de nuevas etiquetas y/o atributos.
![Page 20: Introducciòn a AngularJS](https://reader033.vdocuments.site/reader033/viewer/2022042816/559433f41a28ab961a8b4643/html5/thumbnails/20.jpg)
Demo Directivas
http://plnkr.co/edit/E1Lqg1DHXhDQSY0LJxBD
![Page 21: Introducciòn a AngularJS](https://reader033.vdocuments.site/reader033/viewer/2022042816/559433f41a28ab961a8b4643/html5/thumbnails/21.jpg)
Enrutamiento
● Controla el flujo de la aplicaciòn.● SPA (Single Page Applications).● Ayudan a separar la aplicaciòn en
responsabilidades.● Soporta enrutamiento de HTML5 (urls
clàsicas y history).● Permite hacer bookmark de una url en
especìfica.
![Page 22: Introducciòn a AngularJS](https://reader033.vdocuments.site/reader033/viewer/2022042816/559433f41a28ab961a8b4643/html5/thumbnails/22.jpg)
Ejemplo Enrutamiento
http://plnkr.co/edit/zhnts7QBavD1zyKsGARt
![Page 23: Introducciòn a AngularJS](https://reader033.vdocuments.site/reader033/viewer/2022042816/559433f41a28ab961a8b4643/html5/thumbnails/23.jpg)
Resources
● Facilitan la interacciòn con servicios basados en REST
● Permiten la definiciòn de servicios REST con mètodos estàticos y particulares para cada instancia.
● Permite la definiciòn de acciones. Conectores a distintas partes de nuestros end-points.
![Page 24: Introducciòn a AngularJS](https://reader033.vdocuments.site/reader033/viewer/2022042816/559433f41a28ab961a8b4643/html5/thumbnails/24.jpg)
DemoResources, Modulos, Forms, Animaciones….
![Page 25: Introducciòn a AngularJS](https://reader033.vdocuments.site/reader033/viewer/2022042816/559433f41a28ab961a8b4643/html5/thumbnails/25.jpg)
● No le pongan el nombre de un animal extinto a su empresa.
Conclusiòn
● Ya pueden borrar a EmberJS de sus discos duros.
● No se olviden del WHERE en el DELETE FROM.
![Page 26: Introducciòn a AngularJS](https://reader033.vdocuments.site/reader033/viewer/2022042816/559433f41a28ab961a8b4643/html5/thumbnails/26.jpg)
Observaciones Finales
● Usen la versión 1.2 (aunque sea inestable)● No accesen el DOM desde los controladores
http://ruoyusun.com/2013/05/25/things-i-wish-i-were-told-about-angular-js.html
● Sigan aprendiendohttp://marcosecchi.blogspot.com/2013/08/angularjs-resource-page.html
![Page 27: Introducciòn a AngularJS](https://reader033.vdocuments.site/reader033/viewer/2022042816/559433f41a28ab961a8b4643/html5/thumbnails/27.jpg)
Preguntas y Respuestas
![Page 28: Introducciòn a AngularJS](https://reader033.vdocuments.site/reader033/viewer/2022042816/559433f41a28ab961a8b4643/html5/thumbnails/28.jpg)
Gracias