Uploaded on

 

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
425
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
14
Comments
0
Likes
2

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

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

Transcript

  • 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. 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. 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. 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. 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. 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. 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. Scope  Datos que se quieren mostrar  Uso desde HTML  Bindings  Isolated Scope  Herencia  $parent  $rootScope
  • 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. Bindings II  Colecciones  ngOptions (select)  ngRepeat (li o tr)  Binding a atributos  ngClick  ngHref, ngSrc  ngStyle, ngClass  Forms  Validations  ngSubmit
  • 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. 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. 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. 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. 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