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
SpecKitでどこまでできる? コストはどれくらい?
leveragestech
0
490
ててべんす独演会〜Flowの全てを語ります〜
tbsten
1
220
非同期jobをtransaction内で 呼ぶなよ!絶対に呼ぶなよ!
alstrocrack
0
500
なぜGoのジェネリクスはこの形なのか? Featherweight Goが明かす設計の核心
ryotaros
7
1k
Model Pollution
hschwentner
1
180
monorepo の Go テストをはやくした〜い!~最小の依存解決への道のり~ / faster-testing-of-monorepos
convto
2
330
Advance Your Career with Open Source
ivargrimstad
0
300
overlayPreferenceValue で実現する ピュア SwiftUI な AdMob ネイティブ広告
uhucream
0
100
iOSエンジニア向けの英語学習アプリを作る!
yukawashouhei
0
180
Go Conference 2025: Goで体感するMultipath TCP ― Go 1.24 時代の MPTCP Listener を理解する
takehaya
7
1.5k
アメ車でサンノゼを走ってきたよ!
s_shimotori
0
130
プログラミングどうやる? ~テスト駆動開発から学ぶ達人の型~
a_okui
0
190
Featured
See All Featured
Building Flexible Design Systems
yeseniaperezcruz
329
39k
Embracing the Ebb and Flow
colly
88
4.8k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Into the Great Unknown - MozCon
thekraken
40
2.1k
The Cost Of JavaScript in 2023
addyosmani
53
9k
Done Done
chrislema
185
16k
The Power of CSS Pseudo Elements
geoffreycrofte
79
6k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
610
Building an army of robots
kneath
306
46k
How GitHub (no longer) Works
holman
315
140k
A Tale of Four Properties
chriscoyier
160
23k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
188
55k
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