Angularjs

1. Angularjs
Twitter: @_PedroHurtado
Blog:http://geeks.ms/blogs/phurtado/
email: pedrohurt@gmail.com

2. Agenda
●
●
●
●
●
●
●
●
●
●
●
●
●
Patrones
BootStrap
Binding
Controller
Scope
Módulo
Routing
Factory,services y Provider
Decorator
Directives
Http e interceptor
Cache y Templates
Testing

3. Patrones
●
●
●
MVC
MVVM
MVW(whatever)
●
DI
angular.module('myApp',[])
.service('myService',['$http','$q',function(http,promise){
console.log(http);
}])
.controller('myCtrl',function(myService){
console.log(myService);
});

4. BootStrap ng-app
●
De forma declarativa.
<div ng-app> </div>
<div ng-app=”modulo”></div>
●
JavaScript
<div id=”app”><div>
angular.bootstrap(document.getElementById('app'),[optional modules]);
●
Utiliza JQuery o jqLite

5. Binding {{}} ng-model
●
One Binding
Una sola dirección desde el modelo a la vista (Mustache sintax).
{{property}} o {{expression}}
●
Two-Binding
Dos direcciones desde el modelo a la vista y desde esta al modelo.
ng-model=”property”
$scope.$apply:dirty checking u observable
Observable o Dirty. Menos lobos caperucita

6. Binding
●
●
●
●
●
●
●
●
●
●
ng-model
ng-href
ng-style
ng-class
ng-click
ng-repeat(item in collection)
ng-options
ng-bind-html(antiXSS)
ng-view
ng-submit

7. Controller ng-controller
●
●
●
●
Una simple function de JavaScript
La C de MVC
Mala práctica utilizar function’s fuera de un modulo.
Parámetros inyectables.
function myCtrl($scope){
console.log(‘hello’);
}

8. Scope-$scope
●
●
●
●
●
●
●
La M de MVC.
$RootScope
Ámbito privado
Herencia o anidamiento de controladores
Isolated Scope.
$apply,$digest,$eval,$$phase,$on,$watch,$emit,$broadcast
Encapsula tus datos y no transportar nulos

9. Módulo
●
●
●
●
●
●
●
●
●
●
●
Que es?
Config
Run
Provider
Services
Factory
Filters
Directives
Controller
Value
Constant

10. Módulo
●
●
●
Nomenclatura
Dependencias
Organizar tu código
angular.module('myApp', [])
.controller('myCtrl', function($scope) {
$scope.data = $scope.data || {};
})
.controller('myChildCtrl', function($scope) {
$scope.data.surName = "Hurtado";
});

11. Routing-$RouteProvider
●
●
●
●
●
●
Necesitamos ngRoute
$routeProvider.when
$routeProvier.otherWise
$routeParams /segment/:id
$route
Ampliar object Route en RouteProvider

12. Factory
●
●
Nuestra lógica de negocio
Patrón module de JavaScript
myApp.factory('helloWorldFromFactory', function() {
return {
sayHello: function() {
return "Hello, World!"
}
};
});

13. Service
●
Patrón Prototype JavaScript
myApp.service('helloWorldFromService', function() {
this.sayHello = function() {
return "Hello, World!"
};
});

14. Provider
myApp.provider('helloWorld', function() {
this.name = 'Default';
this.$get = function() {
var name = this.name;
return {
sayHello: function() {
return "Hello, " + name + "!"
}
}
};
this.setName = function(name) {
this.name = name;
};
});

15. Decorator
.config([
"$provide", function( $provide ) {
$provide.decorator( '$log', [ "$delegate", function( $delegate ){
// Save the original $log.debug()
var debugFn = $delegate.debug;
$delegate.debug = function( )
{
var args
now
= [].slice.call(arguments),
= DateTime.formattedNow();
// Prepend timestamp
args[0] = supplant("{0} - {1}", [ now, args[0] ]);
// Call the original with the output prepended with formatted timestamp
debugFn.apply(null, args)
};
return $delegate;
}]);
}]);

16. Directives
●
●
Extender nuestro html
Evitar código repetitivo
<my-element attrs></my-element>
The Hitchhiker’s Guide to the Directive

17. Http e Interceptor
●
●
●
●
●
Wrapper sobre XmlHttpRequest
get,post,put,delete,head o jsonp
Cors
Permite cachear datos
Cuidado con csrf, json attack
$http.get('ruta',cofig).success(function(){}).error(function(){});
Anatomy of a Subtle JSON Vulnerability

18. Cache y Template
●
●
●
●
●
Todas las templates se cachean.
Definir una estrategia para limpiar la cache.
$cacheFactory
$templateCache
get,put,remove,info,removeAll,destroy

19. Testing
Karma
Protactor
Jasmine
Mocha

20. Futuro
●
●
●
●
●
WebComponents
Polymer
Object.Observe
Brik
X-tags

21. Demo

22. Fin