Angularjs

967 views

Published on

Angularjs

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
967
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
9
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Angularjs

  1. 1. Angularjs Twitter: @_PedroHurtado Blog:http://geeks.ms/blogs/phurtado/ email: pedrohurt@gmail.com
  2. 2. Agenda ● ● ● ● ● ● ● ● ● ● ● ● ● Patrones BootStrap Binding Controller Scope Módulo Routing Factory,services y Provider Decorator Directives Http e interceptor Cache y Templates Testing
  3. 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. 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. 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. 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. 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. 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. 9. Módulo ● ● ● ● ● ● ● ● ● ● ● Que es? Config Run Provider Services Factory Filters Directives Controller Value Constant
  10. 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. 11. Routing-$RouteProvider ● ● ● ● ● ● Necesitamos ngRoute $routeProvider.when $routeProvier.otherWise $routeParams /segment/:id $route Ampliar object Route en RouteProvider
  12. 12. Factory ● ● Nuestra lógica de negocio Patrón module de JavaScript myApp.factory('helloWorldFromFactory', function() { return { sayHello: function() { return "Hello, World!" } }; });
  13. 13. Service ● Patrón Prototype JavaScript myApp.service('helloWorldFromService', function() { this.sayHello = function() { return "Hello, World!" }; });
  14. 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. 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. 16. Directives ● ● Extender nuestro html Evitar código repetitivo <my-element attrs></my-element> The Hitchhiker’s Guide to the Directive
  17. 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. 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. 19. Testing Karma Protactor Jasmine Mocha
  20. 20. Futuro ● ● ● ● ● WebComponents Polymer Object.Observe Brik X-tags
  21. 21. Demo
  22. 22. Fin

×