Your SlideShare is downloading. ×
0
Angular decorate
Angular decorate
Angular decorate
Angular decorate
Angular decorate
Angular decorate
Angular decorate
Angular decorate
Angular decorate
Angular decorate
Angular decorate
Angular decorate
Angular decorate
Angular decorate
Angular decorate
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Angular decorate

6,706

Published on

Use AngularJS' decorate function with ease

Use AngularJS' decorate function with ease

Published in: Software
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
6,706
On Slideshare
0
From Embeds
0
Number of Embeds
11
Actions
Shares
0
Downloads
24
Comments
0
Likes
5
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

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. THE COMPLEX WAY angular.module(moduleName, []) .config(function ($provide) { $provide.decorator(serviceName, function ($delegate) { // modify behavior here return $delegate; }); });
  • 5. THE SIMPLE WAY angular.module(moduleName, []) .decorate(serviceName, function ($delegate) { // modify behavior here return $delegate; }); www.github.com/damienklinnert/angular-decorate
  • 6. ONE APPEND FILE EXTENSION IN $TEMPLATECACHE.GET()
  • 7. What you have is: <div ng-include="'views/custom-template.html'"></div> What you want is: <div ng-include="'views/custom-template'"></div>
  • 8. // 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', ...])
  • 9. TWO ADD BASEURL TO EACH $RESOURCE
  • 10. Make this possible: var users = $resource('http://localhost/users'); console.log(users.baseUrl); // this is new
  • 11. // 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', ...])
  • 12. THREEINSTRUMENT ANGULAR PERFORMANCE
  • 13. What can you do with this? angular.module('$rootScope+instrument', []).decorate('$rootScope', function ($delegate) { $delegate.__proto__.$watch = function () { ... }; $delegate.__proto__.$apply = function () { ... }; return $delegate; });
  • 14. 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

×