angularjs
DESCRIPTION
AngularjsTRANSCRIPT
● Patrones● BootStrap● Binding ● Controller● Scope● Módulo● Routing● Factory,services y Provider● Decorator● Directives● Http e interceptor● Cache y Templates● Testing
Agenda
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);});
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
Binding {{}} ng-model● One Binding
Una sola dirección desde el modelo a la vista (Mustache sintax).{{property}} o {{expression}}
● Two-BindingDos 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
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
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’);
}
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
Módulo
● Que es?● Config● Run● Provider● Services● Factory● Filters● Directives● Controller● Value● Constant
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";});
Routing-$RouteProvider● Necesitamos ngRoute● $routeProvider.when● $routeProvier.otherWise● $routeParams /segment/:id● $route● Ampliar object Route en RouteProvider
Factory● Nuestra lógica de negocio● Patrón module de JavaScript
myApp.factory('helloWorldFromFactory', function() { return { sayHello: function() { return "Hello, World!" } };});
Service● Patrón Prototype JavaScript
myApp.service('helloWorldFromService', function() { this.sayHello = function() { return "Hello, World!" };});
ProvidermyApp.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; };});
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 = [].slice.call(arguments),
now = 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;
}]);
}]);
Directives
● Extender nuestro html● Evitar código repetitivo
<my-element attrs></my-element>
The Hitchhiker’s Guide to the Directive
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
Cache y Template
● Todas las templates se cachean.● Definir una estrategia para limpiar la cache.● $cacheFactory● $templateCache● get,put,remove,info,removeAll,destroy
Testing
KarmaProtactor
JasmineMocha
Futuro
● WebComponents● Polymer● Object.Observe● Brik● X-tags
Demo
Fin