Introducción a Angularjs
Pedro Hurtado
@_PedroHurtado
pedrohurt@gmail.com
http://geeks.ms/blogs/phurtado
Xavier Jorge
@Xav...
Iniciar
 Herramientas recomendadas
 Google Chrome
 Extensión de Chrome “AngularJS Batarang”
 Web y recursos
 http://w...
Bootstrap
 Declarativa
 <div ng-app>…
 <div ng-app=“…”>… (recomenada)
 Javascript
 <div id=“app”>…
 angular.bootstra...
Módulo
 Forma de organizar el código y la lógica
 Patrón Requiere
 DI (Inyección de dependencias)
 angular.module(‘myA...
Arquitectura
 Arquitectura MVC, MVVM / MVW (Model-View-Whatever)
 Model (scope)
 Información del sistema con la que se ...
HTML + CSS + JS de aspecto visual
 Define cómo se van a ver las cosas
 Se puede utilizar cualquier tipo de plantilla com...
Controllers
 Gestiona el flujo de la parte de presentación
 Se le pueden inyectar:
 Values / Constants
 Definición y r...
Scope
 Datos que se quieren mostrar
 Uso desde HTML
 Bindings
 Isolated Scope
 Herencia
 $parent
 $rootScope
Bindings I
 Enlaza la información qué se quiere mostrar y el aspecto cómo se quiere
mostrar
 One-way binding
 ngBind / ...
Bindings II
 Colecciones
 ngOptions (select)
 ngRepeat (li o tr)
 Binding a atributos
 ngClick
 ngHref, ngSrc
 ngSt...
Filters
 Se utiliza para transformar la información del scope al formato que se quiera
visualizar
 <span>{{name| pascali...
Value / Constants
 Sirve para reutilizar y compartir valores
 Se inyecta en los controladores
 Value
 Define valores p...
Factory / Service / Provider
 Sirve para encapsular y reutilizar código
 Se inyecta en los controladores
 Singleton
 F...
Factory / Service / Provider
Factory Service Value Constant Provider
can have dependencies yes yes no no yes
uses type fri...
Bibliografía
 Ejemplos de la charla
 http://jsfiddle.net/user/pedrohurtado/fiddles/
 Sitio oficial
 http://www.angular...
Upcoming SlideShare
Loading in …5
×

Angularjs

1,186 views

Published on

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,186
On SlideShare
0
From Embeds
0
Number of Embeds
25
Actions
Shares
0
Downloads
24
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide
  • Poner todos los elementos del obj módulo
  • Explicar directivas
  • Angularjs

    1. 1. Introducción a Angularjs Pedro Hurtado @_PedroHurtado pedrohurt@gmail.com http://geeks.ms/blogs/phurtado Xavier Jorge @XaviPaper jajorcer@hotmail.com http://geeks.ms/blogs/xavipaper
    2. 2. Iniciar  Herramientas recomendadas  Google Chrome  Extensión de Chrome “AngularJS Batarang”  Web y recursos  http://www.angularjs.org  Incluir el js  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0- beta.10/angular.min.js"></script>
    3. 3. Bootstrap  Declarativa  <div ng-app>…  <div ng-app=“…”>… (recomenada)  Javascript  <div id=“app”>…  angular.bootstrap(document.getElementById(‘app’),[optional modules]);  Jquery o jqLite  Nomenclatura  Prefijo de 2 letras: miDirectiva / mi-directiva (en HTML)  ng-app, ng:app, x-ng-app, data-ng-app
    4. 4. Módulo  Forma de organizar el código y la lógica  Patrón Requiere  DI (Inyección de dependencias)  angular.module(‘myApp’, […], function (…) {…})
    5. 5. Arquitectura  Arquitectura MVC, MVVM / MVW (Model-View-Whatever)  Model (scope)  Información del sistema con la que se hace binding en la parte visual  View (HTML + CSS + JS de aspectos visuales)  Define el aspecto visual de la información  ViewModel / Whatever (Controllers + scope)  Lógica de presentación de la ventana para gestionar el flujo  Comunicación con servicios que se inyectarían  Código lo más liviano posible
    6. 6. HTML + CSS + JS de aspecto visual  Define cómo se van a ver las cosas  Se puede utilizar cualquier tipo de plantilla como bootstrap  El equipo de angular ha definido directivas para trabajar con bootstrap  El enlace entre el V y el VM se realiza con  ngController  Directivas (AECM)
    7. 7. Controllers  Gestiona el flujo de la parte de presentación  Se le pueden inyectar:  Values / Constants  Definición y reutilización de valores  Factories / Services  Encapsulamiento y reutilización de código  Objetos de js  Factory implementa el patrón Factory  Service imlementa el patrón Constructor  Es la pieza donde está la lógica de presentación  Se enlaza con los servicios que se han inyectado previamente
    8. 8. Scope  Datos que se quieren mostrar  Uso desde HTML  Bindings  Isolated Scope  Herencia  $parent  $rootScope
    9. 9. Bindings I  Enlaza la información qué se quiere mostrar y el aspecto cómo se quiere mostrar  One-way binding  ngBind / Mustache {{…}}  Two-way binding  ngModel  Dirty checking  $apply
    10. 10. Bindings II  Colecciones  ngOptions (select)  ngRepeat (li o tr)  Binding a atributos  ngClick  ngHref, ngSrc  ngStyle, ngClass  Forms  Validations  ngSubmit
    11. 11. Filters  Se utiliza para transformar la información del scope al formato que se quiera visualizar  <span>{{name| pascalize}}</span>  Se usa para:  Formatear visualmente los datos  Filtrar u ordenar listas
    12. 12. Value / Constants  Sirve para reutilizar y compartir valores  Se inyecta en los controladores  Value  Define valores para run-time  Constants  Define valores para run-time y configuration-time http://blogs.clevertech.biz/startupblog/angularjs-factory-service-provider
    13. 13. Factory / Service / Provider  Sirve para encapsular y reutilizar código  Se inyecta en los controladores  Singleton  Factory  Patrón module de js  Service  Patrón constructor de js  Provider  Puede utilizar configuración gobal http://blogs.clevertech.biz/startupblog/angularjs-factory-service-provider
    14. 14. Factory / Service / Provider Factory Service Value Constant Provider can have dependencies yes yes no no yes uses type friendly injection no yes yes* yes* no object available in config phase no no no yes yes** can create functions/primitives yes no yes yes yes * at the cost of eager initialization by using new operator directly ** the service object is not available during the config phase, but the provider instance is https://docs.angularjs.org/guide/providers
    15. 15. Bibliografía  Ejemplos de la charla  http://jsfiddle.net/user/pedrohurtado/fiddles/  Sitio oficial  http://www.angular.js  Chrome y extension Batarang  http://www.chorme.com  https://chrome.google.com/webstore/detail/angularjs- batarang/ighdmehidhipcmcojjgiloacoafjmpfk?hl=es

    ×