Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
angular decorate
Search
damienklinnert
April 09, 2014
Programming
1
79
angular decorate
Use AngularJS' decorate function with ease
damienklinnert
April 09, 2014
Tweet
Share
More Decks by damienklinnert
See All by damienklinnert
Angular Performance Tuning
damienklinnert
4
270
Angular Performance Talk
damienklinnert
0
120
Fight the Rot - Refactor stinky JavaScript
damienklinnert
0
170
modern web apps
damienklinnert
0
120
Become a node package maintainer
damienklinnert
1
88
bootstrap single page apps
damienklinnert
1
300
test your nodejs code
damienklinnert
5
360
Other Decks in Programming
See All in Programming
Laravel Boost 超入門
fire_arlo
3
210
私の後悔をAWS DMSで解決した話
hiramax
4
210
そのAPI、誰のため? Androidライブラリ設計における利用者目線の実践テクニック
mkeeda
2
280
Compose Multiplatform × AI で作る、次世代アプリ開発支援ツールの設計と実装
thagikura
0
140
旅行プランAIエージェント開発の裏側
ippo012
2
890
Flutter with Dart MCP: All You Need - 박제창 2025 I/O Extended Busan
itsmedreamwalker
0
150
Putting The Genie in the Bottle - A Crash Course on running LLMs on Android
iurysza
0
140
時間軸から考えるTerraformを使う理由と留意点
fufuhu
15
4.7k
はじめてのMaterial3 Expressive
ym223
2
260
Introducing ReActionView: A new ActionView-compatible ERB Engine @ Rails World 2025, Amsterdam
marcoroth
0
670
Testing Trophyは叫ばない
toms74209200
0
860
testingを眺める
matumoto
1
140
Featured
See All Featured
Done Done
chrislema
185
16k
A designer walks into a library…
pauljervisheath
207
24k
GitHub's CSS Performance
jonrohan
1032
460k
Balancing Empowerment & Direction
lara
3
620
The Cost Of JavaScript in 2023
addyosmani
53
8.9k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.4k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Gamification - CAS2011
davidbonilla
81
5.4k
We Have a Design System, Now What?
morganepeng
53
7.8k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
139
34k
Typedesign – Prime Four
hannesfritz
42
2.8k
Transcript
$PROVIDE .DECORATOR() MODIFYING THE BEHAVIOR OF ANGULARJS' CORE SERVICES
DAMIEN KLINNERT Software Engineer at Small-Improvements damienklinnert.com twitter.com/damienklinnert github.com/damienklinnert
THE DECORATOR PATTERN
None
THE COMPLEX WAY angular.module(moduleName, []) .config(function ($provide) { $provide.decorator(serviceName, function
($delegate) { // modify behavior here return $delegate; }); });
THE SIMPLE WAY angular.module(moduleName, []) .decorate(serviceName, function ($delegate) { //
modify behavior here return $delegate; }); www.github.com/damienklinnert/angular-decorate
ONE APPEND FILE EXTENSION IN $TEMPLATECACHE.GET()
What you have is: <div ng-include="'views/custom-template.html'"></div> What you want is:
<div ng-include="'views/custom-template'"></div>
// 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', ...])
TWO ADD BASEURL TO EACH $RESOURCE
Make this possible: var users = $resource('http://localhost/users'); console.log(users.baseUrl); // this
is new
// 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', ...])
THREE INSTRUMENT ANGULAR PERFORMANCE
What can you do with this? angular.module('$rootScope+instrument', []).decorate('$rootScope', function ($delegate)
{ $delegate.__proto__.$watch = function () { ... }; $delegate.__proto__.$apply = function () { ... }; return $delegate; });
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