angularjs
DESCRIPTION
AngularjsTRANSCRIPT
![Page 2: Angularjs](https://reader031.vdocuments.us/reader031/viewer/2022020306/55619861d8b42a96778b5902/html5/thumbnails/2.jpg)
● Patrones● BootStrap● Binding ● Controller● Scope● Módulo● Routing● Factory,services y Provider● Decorator● Directives● Http e interceptor● Cache y Templates● Testing
Agenda
![Page 3: Angularjs](https://reader031.vdocuments.us/reader031/viewer/2022020306/55619861d8b42a96778b5902/html5/thumbnails/3.jpg)
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);});
![Page 4: Angularjs](https://reader031.vdocuments.us/reader031/viewer/2022020306/55619861d8b42a96778b5902/html5/thumbnails/4.jpg)
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
![Page 5: Angularjs](https://reader031.vdocuments.us/reader031/viewer/2022020306/55619861d8b42a96778b5902/html5/thumbnails/5.jpg)
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
![Page 6: Angularjs](https://reader031.vdocuments.us/reader031/viewer/2022020306/55619861d8b42a96778b5902/html5/thumbnails/6.jpg)
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
![Page 7: Angularjs](https://reader031.vdocuments.us/reader031/viewer/2022020306/55619861d8b42a96778b5902/html5/thumbnails/7.jpg)
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’);
}
![Page 8: Angularjs](https://reader031.vdocuments.us/reader031/viewer/2022020306/55619861d8b42a96778b5902/html5/thumbnails/8.jpg)
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
![Page 9: Angularjs](https://reader031.vdocuments.us/reader031/viewer/2022020306/55619861d8b42a96778b5902/html5/thumbnails/9.jpg)
Módulo
● Que es?● Config● Run● Provider● Services● Factory● Filters● Directives● Controller● Value● Constant
![Page 10: Angularjs](https://reader031.vdocuments.us/reader031/viewer/2022020306/55619861d8b42a96778b5902/html5/thumbnails/10.jpg)
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";});
![Page 11: Angularjs](https://reader031.vdocuments.us/reader031/viewer/2022020306/55619861d8b42a96778b5902/html5/thumbnails/11.jpg)
Routing-$RouteProvider● Necesitamos ngRoute● $routeProvider.when● $routeProvier.otherWise● $routeParams /segment/:id● $route● Ampliar object Route en RouteProvider
![Page 12: Angularjs](https://reader031.vdocuments.us/reader031/viewer/2022020306/55619861d8b42a96778b5902/html5/thumbnails/12.jpg)
Factory● Nuestra lógica de negocio● Patrón module de JavaScript
myApp.factory('helloWorldFromFactory', function() { return { sayHello: function() { return "Hello, World!" } };});
![Page 13: Angularjs](https://reader031.vdocuments.us/reader031/viewer/2022020306/55619861d8b42a96778b5902/html5/thumbnails/13.jpg)
Service● Patrón Prototype JavaScript
myApp.service('helloWorldFromService', function() { this.sayHello = function() { return "Hello, World!" };});
![Page 14: Angularjs](https://reader031.vdocuments.us/reader031/viewer/2022020306/55619861d8b42a96778b5902/html5/thumbnails/14.jpg)
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; };});
![Page 15: Angularjs](https://reader031.vdocuments.us/reader031/viewer/2022020306/55619861d8b42a96778b5902/html5/thumbnails/15.jpg)
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;
}]);
}]);
![Page 16: Angularjs](https://reader031.vdocuments.us/reader031/viewer/2022020306/55619861d8b42a96778b5902/html5/thumbnails/16.jpg)
Directives
● Extender nuestro html● Evitar código repetitivo
<my-element attrs></my-element>
The Hitchhiker’s Guide to the Directive
![Page 17: Angularjs](https://reader031.vdocuments.us/reader031/viewer/2022020306/55619861d8b42a96778b5902/html5/thumbnails/17.jpg)
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
![Page 18: Angularjs](https://reader031.vdocuments.us/reader031/viewer/2022020306/55619861d8b42a96778b5902/html5/thumbnails/18.jpg)
Cache y Template
● Todas las templates se cachean.● Definir una estrategia para limpiar la cache.● $cacheFactory● $templateCache● get,put,remove,info,removeAll,destroy
![Page 19: Angularjs](https://reader031.vdocuments.us/reader031/viewer/2022020306/55619861d8b42a96778b5902/html5/thumbnails/19.jpg)
Testing
KarmaProtactor
JasmineMocha
![Page 20: Angularjs](https://reader031.vdocuments.us/reader031/viewer/2022020306/55619861d8b42a96778b5902/html5/thumbnails/20.jpg)
Futuro
● WebComponents● Polymer● Object.Observe● Brik● X-tags
![Page 21: Angularjs](https://reader031.vdocuments.us/reader031/viewer/2022020306/55619861d8b42a96778b5902/html5/thumbnails/21.jpg)
Demo
![Page 22: Angularjs](https://reader031.vdocuments.us/reader031/viewer/2022020306/55619861d8b42a96778b5902/html5/thumbnails/22.jpg)
Fin