angular decorate

Use AngularJS' decorate function with ease

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
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