angular decorate

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