angular decorate

angular decorate

Use AngularJS' decorate function with ease

9809d0f32f9e4e3f4b14ce26400c0866?s=128

damienklinnert

April 09, 2014
Tweet

Transcript

  1. $PROVIDE .DECORATOR() MODIFYING THE BEHAVIOR OF ANGULARJS' CORE SERVICES

  2. DAMIEN KLINNERT Software Engineer at Small-Improvements damienklinnert.com twitter.com/damienklinnert github.com/damienklinnert

  3. THE DECORATOR PATTERN

  4. None
  5. THE COMPLEX WAY angular.module(moduleName, []) .config(function ($provide) { $provide.decorator(serviceName, function

    ($delegate) { // modify behavior here return $delegate; }); });
  6. THE SIMPLE WAY angular.module(moduleName, []) .decorate(serviceName, function ($delegate) { //

    modify behavior here return $delegate; }); www.github.com/damienklinnert/angular-decorate
  7. ONE APPEND FILE EXTENSION IN $TEMPLATECACHE.GET()

  8. What you have is: <div ng-include="'views/custom-template.html'"></div> What you want is:

    <div ng-include="'views/custom-template'"></div>
  9. // Decorator definition angular.module('$templateCache+get', ['ng']) .decorate('$templateCache', function ($delegate) { var

    _get = $delegate.get; $delegate.get = function (key) { return _get.call(_get, key + ".html"); }; return $delegate; }); // Use decorator in whole app angular.module('app', ['$templateCache+get', ...])
  10. TWO ADD BASEURL TO EACH $RESOURCE

  11. Make this possible: var users = $resource('http://localhost/users'); console.log(users.baseUrl); // this

    is new
  12. // Decorator definition angular.module("$resource+baseUrl", ['ngResource']) .decorate('$resource', function ($delegate) { return

    function (baseUrl) { var ret = $delegate.apply(this, arguments); ret.baseUrl = baseUrl; return ret; }; }); // Use decorator in whole app angular.module('app', ['$resource+baseUrl', ...])
  13. THREE INSTRUMENT ANGULAR PERFORMANCE

  14. What can you do with this? angular.module('$rootScope+instrument', []).decorate('$rootScope', function ($delegate)

    { $delegate.__proto__.$watch = function () { ... }; $delegate.__proto__.$apply = function () { ... }; return $delegate; });
  15. THANK YOU RELATED MATERIAL angular-decorate www.github.com/damienklinnert/angular-decorate Hacking Core Directives in

    AngularJS http://briantford.com/blog/angular-hacking-core.html Angular $provide http://docs.angularjs.org/api/auto/object/$provide