Angular decorate

  • 4,913 views
Uploaded on

Use AngularJS' decorate function with ease

Use AngularJS' decorate function with ease

More in: Software
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
4,913
On Slideshare
0
From Embeds
0
Number of Embeds
9

Actions

Shares
Downloads
9
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