Desarrollando apps
single page con angularjs
Julio López Montalvo - @TheBlasfem
Extendiendo el HTML con...
Single page apps (SPA)
Aplicaciones que no refrescan toda la página
Maximizan la experiencia del usuario
Operaciones complejas
Desafíos:
Manipulación DOM
Routing
View Loading
Ajax / Promises
Object Modeling
Data Binding
Necesitamos un héroe SPA!!!
angular superhero
Models
Controller
Templating
Asincronism - Prepare to REST
Two Way Data Binding - Scopes
Dependency Injecttion
Routes (for SPA)
Location Handling
Support events by directives
Easy webcomponents
Testing philosophy
tranquilo, tu jquery sigue aquí
addClass(), after(), append(), attr(), bind(), children() , clone(), contents(), css(), data(), empty(), eq(), find(), hasClass(), html(), next() , on() , off() , one() , parent() , prepend(), prop(), ready(), remove(), removeAttr(),
removeClass(), removeData(), replaceWith(), text(), toggleClass()
, triggerHandler() , unbind() , val(), wrap()
Iniciando:
Agregar el script de AngularJS (cero dependencias yuju!)
Colocar la directiva ng-app a algún elemento HTML para que AngularJS lo tome como root de la aplicación.
MODELS
Contienen la información a desplegarse en las vistas
Se declaran empleando la directiva ng-model
controllers
Se emplea la directiva ng-controller para referenciar a las funciones que actuarán como controllers
Los controllers poseen un $scope
Los $scope son contextos que pueden almacenar variables y funciones
Los controllers soportan herencia
two-way data binding
Most Templating systems AngularJS
modules
Código mejor organizado
directives
Asocia comportamientos a elementos HTML. Escuchan eventos. Se minimiza la cantidad de código JS usado en lógica e interacción.
ng-click:
ng-show:
ng-repeat:
value
Permite definir un valor para usarlo en los controllers que necesitemos
filters
Los filtros transforman nuestros valores y los renderizan. No afectan la fuente source. Se indican antecediendo un |
filter:
lowercase, limitTo
currency
custom filters
factory()
Factory nos permite crear nuestros propios servicios, cuando creemos servicios debemos retornar funciones para que nuestras controladoras puedan ejecutarlas
service()
Al igual que fabric() permite crear servicios, se diferencia en que aquí el servicio se define con una función construcora
routes
Indica los controllers y templates por ruta
Si linkeamos a alguna ruta definida en nuestra angular app, nuestra aplicación no sufrirá un refresh
Con la directiva ng-view definimos el elemento HTML que actuará como base layout
Asincronismo
Operaciones asíncronas
webcomponents!
Podemos crear nuevas etiquetas y atributos
E: Elemento, A: Atributo, C: Clase CSS
GRACIAS
Source:
https://github.com/TheBlasfem/youwrotehere