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
AkarengaLT vol.38
hashimoto_kei
1
110
チームの境界をブチ抜いていけ
tokai235
0
200
Google Opalで使える37のライブラリ
mickey_kubo
2
120
技術的負債の正体を知って向き合う
irof
0
210
タスクの特性や不確実性に応じた最適な作業スタイルの選択(ペアプロ・モブプロ・ソロプロ)と実践 / Optimal Work Style Selection: Pair, Mob, or Solo Programming.
honyanya
3
180
Devoxx BE 2025 Loom lab
josepaumard
0
110
デミカツ切り抜きで面倒くさいことはPythonにやらせよう
aokswork3
0
250
overlayPreferenceValue で実現する ピュア SwiftUI な AdMob ネイティブ広告
uhucream
0
200
NixOS + Kubernetesで構築する自宅サーバーのすべて
ichi_h3
0
1.1k
Writing Better Go: Lessons from 10 Code Reviews
konradreiche
2
4.4k
あなたとKaigi on Rails / Kaigi on Rails + You
shimoju
0
170
Domain-centric? Why Hexagonal, Onion, and Clean Architecture Are Answers to the Wrong Question
olivergierke
3
930
Featured
See All Featured
Embracing the Ebb and Flow
colly
88
4.9k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
How to train your dragon (web standard)
notwaldorf
97
6.3k
Making the Leap to Tech Lead
cromwellryan
135
9.6k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
Being A Developer After 40
akosma
91
590k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
Building Applications with DynamoDB
mza
96
6.7k
Fireside Chat
paigeccino
40
3.7k
Build your cross-platform service in a week with App Engine
jlugia
232
18k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
9
990
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