introducciòn a angularjs
Post on 02-Jul-2015
1.417 Views
Preview:
TRANSCRIPT
AngularJS
Sobre mi
René Olivorene@minet.com.dohttp://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
Què veremos?
1. Què es AngularJS? 2. Por què usar AngularJS?3. MVC 4. Controladores y Modelos 5. Views y Directivas6. Enrutamiento / SPA7. Resources
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.
Por què usar AngularJS?
● Plain old Javascript● KISS● Stand Alone● Full-featured
AngularJS / Otros
● Ember (link)● KnockOut(link)● Angular (link)
Angular MVC
Controladores / Modelos
Vistas / Directivas
Demo Simple
http://plnkr.co/edit/Vk6tt1WByib2AjA0ka7Z?p=preview
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.
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ì
Demo màs completo
http://plnkr.co/edit/nOJqrklbC48i71ETHb6p?p=preview
Servicios $http y $timeout
http://plnkr.co/edit/3Nhrc3eEQRZg7uMsSec3
$scope Inheritance
http://plnkr.co/edit/LOfEWjsEjMammFtBK1N5
Vistas
● Despliegan la informaciòn contenida en los modelos de un controlador en especìfico.
● Pueden declarar distintos controladores para diferentes àreas.
Filtros
● Helpers para modificar modelos.● Se pueden usar tanto en los views,
directivas y hasta desde los controladores.
Ejemplo Filtro
http://plnkr.co/edit/L4KeMW0XuU5s82T3qKZo
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.
Demo Directivas
http://plnkr.co/edit/E1Lqg1DHXhDQSY0LJxBD
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.
Ejemplo Enrutamiento
http://plnkr.co/edit/zhnts7QBavD1zyKsGARt
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.
DemoResources, Modulos, Forms, Animaciones….
● 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.
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
Preguntas y Respuestas
Gracias
top related