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