Download - Angular decorate
![Page 1: Angular decorate](https://reader036.vdocuments.us/reader036/viewer/2022081816/53fe11838d7f72d92d8b4591/html5/thumbnails/1.jpg)
$PROVIDE.DECORATOR()
MODIFYING THE BEHAVIOROF ANGULARJS' CORE SERVICES
![Page 2: Angular decorate](https://reader036.vdocuments.us/reader036/viewer/2022081816/53fe11838d7f72d92d8b4591/html5/thumbnails/2.jpg)
DAMIEN KLINNERTSoftware Engineer at Small-Improvements
damienklinnert.comtwitter.com/damienklinnertgithub.com/damienklinnert
![Page 3: Angular decorate](https://reader036.vdocuments.us/reader036/viewer/2022081816/53fe11838d7f72d92d8b4591/html5/thumbnails/3.jpg)
THE DECORATOR PATTERN
![Page 4: Angular decorate](https://reader036.vdocuments.us/reader036/viewer/2022081816/53fe11838d7f72d92d8b4591/html5/thumbnails/4.jpg)
![Page 5: Angular decorate](https://reader036.vdocuments.us/reader036/viewer/2022081816/53fe11838d7f72d92d8b4591/html5/thumbnails/5.jpg)
THE COMPLEX WAYangular.module(moduleName, []) .config(function ($provide) { $provide.decorator(serviceName, function ($delegate) {
// modify behavior here
return $delegate; }); });
![Page 6: Angular decorate](https://reader036.vdocuments.us/reader036/viewer/2022081816/53fe11838d7f72d92d8b4591/html5/thumbnails/6.jpg)
THE SIMPLE WAYangular.module(moduleName, []) .decorate(serviceName, function ($delegate) {
// modify behavior here
return $delegate; });
www.github.com/damienklinnert/angular-decorate
![Page 7: Angular decorate](https://reader036.vdocuments.us/reader036/viewer/2022081816/53fe11838d7f72d92d8b4591/html5/thumbnails/7.jpg)
ONEAPPEND FILE EXTENSION IN
$TEMPLATECACHE.GET()
![Page 8: Angular decorate](https://reader036.vdocuments.us/reader036/viewer/2022081816/53fe11838d7f72d92d8b4591/html5/thumbnails/8.jpg)
What you have is:<div ng-include="'views/custom-template.html'"></div>
What you want is:<div ng-include="'views/custom-template'"></div>
![Page 9: Angular decorate](https://reader036.vdocuments.us/reader036/viewer/2022081816/53fe11838d7f72d92d8b4591/html5/thumbnails/9.jpg)
// Decorator definitionangular.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 appangular.module('app', ['$templateCache+get', ...])
![Page 10: Angular decorate](https://reader036.vdocuments.us/reader036/viewer/2022081816/53fe11838d7f72d92d8b4591/html5/thumbnails/10.jpg)
TWOADD BASEURL TO EACH
$RESOURCE
![Page 11: Angular decorate](https://reader036.vdocuments.us/reader036/viewer/2022081816/53fe11838d7f72d92d8b4591/html5/thumbnails/11.jpg)
Make this possible:var users = $resource('http://localhost/users');console.log(users.baseUrl); // this is new
![Page 12: Angular decorate](https://reader036.vdocuments.us/reader036/viewer/2022081816/53fe11838d7f72d92d8b4591/html5/thumbnails/12.jpg)
// Decorator definitionangular.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 appangular.module('app', ['$resource+baseUrl', ...])
![Page 13: Angular decorate](https://reader036.vdocuments.us/reader036/viewer/2022081816/53fe11838d7f72d92d8b4591/html5/thumbnails/13.jpg)
THREEINSTRUMENT ANGULAR
PERFORMANCE
![Page 14: Angular decorate](https://reader036.vdocuments.us/reader036/viewer/2022081816/53fe11838d7f72d92d8b4591/html5/thumbnails/14.jpg)
What can you do with this?angular.module('$rootScope+instrument', []).decorate('$rootScope', function ($delegate) {
$delegate.__proto__.$watch = function () { ... }; $delegate.__proto__.$apply = function () { ... };
return $delegate;});
![Page 15: Angular decorate](https://reader036.vdocuments.us/reader036/viewer/2022081816/53fe11838d7f72d92d8b4591/html5/thumbnails/15.jpg)
THANK YOURELATED MATERIAL
angular-decorate www.github.com/damienklinnert/angular-decorateHacking Core Directives in AngularJS http://briantford.com/blog/angular-hacking-core.htmlAngular $provide http://docs.angularjs.org/api/auto/object/$provide