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
MCPでVibe Working。そして、結局はContext Eng(略)/ Working with Vibe on MCP And Context Eng
rkaga
5
2.3k
アプリの "かわいい" を支えるアニメーションツールRiveについて
uetyo
0
270
パッケージ設計の黒魔術/Kyoto.go#63
lufia
3
440
Namespace and Its Future
tagomoris
6
700
アセットのコンパイルについて
ojun9
0
130
🔨 小さなビルドシステムを作る
momeemt
4
680
testingを眺める
matumoto
1
140
時間軸から考えるTerraformを使う理由と留意点
fufuhu
16
4.8k
Deep Dive into Kotlin Flow
jmatsu
1
350
Introducing ReActionView: A new ActionView-compatible ERB Engine @ Rails World 2025, Amsterdam
marcoroth
0
690
print("Hello, World")
eddie
2
530
今だからこそ入門する Server-Sent Events (SSE)
nearme_tech
PRO
3
230
Featured
See All Featured
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.4k
Producing Creativity
orderedlist
PRO
347
40k
Speed Design
sergeychernyshev
32
1.1k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
4 Signs Your Business is Dying
shpigford
184
22k
Code Review Best Practice
trishagee
70
19k
Being A Developer After 40
akosma
90
590k
Writing Fast Ruby
sferik
628
62k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
GraphQLの誤解/rethinking-graphql
sonatard
72
11k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
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