decorator<\/li>\n<\/ul>\nEach provide access to a $delegate, which is the instantiated service\/directive\/filter, prior to being passed to the service that required it.<\/p>\n
$provide.decorator<\/h4>\n
The decorator function allows access to a $delegate of the service once it has been instantiated. For example:<\/p>\n
angular.module(‘myApp’, [])<\/p>\n
.config([ ‘$provide’, function($provide) {<\/p>\n
$provide.decorator(‘$log’, [<\/p>\n
‘$delegate’,<\/p>\n
function $logDecorator($delegate) {<\/p>\n
var originalWarn = $delegate.warn;<\/p>\n
$delegate.warn = function decoratedWarn(msg) {<\/p>\n
msg = ‘Decorated Warn: ‘ + msg;<\/p>\n
originalWarn.apply($delegate, arguments);<\/p>\n
};<\/p>\n
return $delegate;<\/p>\n
}<\/p>\n
]);<\/p>\n
}]);<\/p>\n
After the $log service has been instantiated the decorator is fired. The decorator function has a $delegate object injected to provide access to the service that matches the selector in the decorator. This $delegate will be the service you are decorating. The return value of the function provided to the decorator will take place of the service, directive, or filter being decorated.<\/p>\n
The $delegate may be either modified or completely replaced. Given a service myService with a method someFn, the following could all be viable solutions:<\/p>\n
Completely Replace the $delegate<\/strong><\/p>\nangular.module(‘myApp’, [])<\/p>\n
.config([ ‘$provide’, function($provide) {<\/p>\n
$provide.decorator(‘myService’, [<\/p>\n
‘$delegate’,<\/p>\n
function myServiceDecorator($delegate) {<\/p>\n
var myDecoratedService = {<\/p>\n
\/\/ new service object to replace myService<\/p>\n
};<\/p>\n
return myDecoratedService;<\/p>\n
}<\/p>\n
]);<\/p>\n
}]);<\/p>\n
Patch the $delegate<\/strong><\/p>\nangular.module(‘myApp’, [])<\/p>\n
.config([ ‘$provide’, function($provide) {<\/p>\n
$provide.decorator(‘myService’, [<\/p>\n
‘$delegate’,<\/p>\n
function myServiceDecorator($delegate) {<\/p>\n
var someFn = $delegate.someFn;<\/p>\n
function aNewFn() {<\/p>\n
\/\/ new service function<\/p>\n
someFn.apply($delegate, arguments);<\/p>\n
}<\/p>\n
$delegate.someFn = aNewFn;<\/p>\n
return $delegate;<\/p>\n
}<\/p>\n
]);<\/p>\n
}]);<\/p>\n
Augment the $delegate<\/strong><\/p>\nangular.module(‘myApp’, [])<\/p>\n
.config([ ‘$provide’, function($provide) {<\/p>\n
$provide.decorator(‘myService’, [<\/p>\n
‘$delegate’,<\/p>\n
function myServiceDecorator($delegate) {<\/p>\n
function helperFn() {<\/p>\n
\/\/ an additional fn to add to the service<\/p>\n
}<\/p>\n
$delegate.aHelpfulAddition = helperFn;<\/p>\n
return $delegate;<\/p>\n
}<\/p>\n
]);<\/p>\n
}]);<\/p>\n
Note that whatever is returned by the decorator function will replace that which is being decorated. For example, a missing return statement will wipe out the entire object being decorated.<\/p>\n
Decorators have different rules for different services. This is because services are registered in different ways. Services are selected by name, however filters and directives are selected by appending “Filter” or “Directive” to the end of the name. The $delegate provided is dictated by the type of service.<\/p>\n
\n\n\nService Type <\/strong><\/td>\nSelector <\/strong><\/td>\n$delegate<\/strong><\/td>\n<\/tr>\n<\/thead>\n\n\n| Service<\/td>\n | serviceName<\/td>\n | The object or function returned by the service<\/td>\n<\/tr>\n | \n| Directive<\/td>\n | directiveName + ‘Directive’<\/td>\n | An Array.<DirectiveObject>*<\/td>\n<\/tr>\n | \n| Filter<\/td>\n | filterName + ‘Filter’<\/td>\n | The function returned by the filter<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n * Multiple directives may be registered to the same selector\/name<\/p>\n module.decorator<\/h4>\nThis function is the same as the $provide.decorator function except it is exposed through the module API. This allows you to separate your decorator patterns from your module config blocks.<\/p>\n Like with $provide.decorator, the module.decorator function runs during the config phase of the app. That means you can define a module.decorator before the decorated service is defined.<\/p>\n Since you can apply multiple decorators, it is noteworthy that decorator application always follows order of declaration:<\/p>\n \n- If a service is decorated by both $provide.decorator and module.decorator, the decorators are applied in order:<\/li>\n<\/ul>\n
angular<\/p>\n .module(‘theApp’, [])<\/p>\n .factory(‘theFactory’, theFactoryFn)<\/p>\n .config(function($provide) {<\/p>\n $provide.decorator(‘theFactory’, provideDecoratorFn); \/\/ runs first<\/p>\n })<\/p>\n .decorator(‘theFactory’, moduleDecoratorFn); \/\/ runs seconds<\/p>\n \n- If the service has been declared multiple times, a decorator will decorate the service that has been declared last:<\/li>\n<\/ul>\n
angular<\/p>\n .module(‘theApp’, [])<\/p>\n .factory(‘theFactory’, theFactoryFn)<\/p>\n .decorator(‘theFactory’, moduleDecoratorFn)<\/p>\n .factory(‘theFactory’, theOtherFactoryFn);<\/p>\n \/\/ `theOtherFactoryFn` is selected as ‘theFactory’ provider and it is decorated via `moduleDecoratorFn`.<\/p>\n","protected":false},"excerpt":{"rendered":" Decorators are a design pattern that is used to separate modification or decoration of a class without modifying the original source code. In AngularJS, decorators are functions that allow a service, directive or filter to be modified prior to its usage. There are two ways to register decorators $provide.decorator, and decorator Each provide access to…<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"categories":[8417],"tags":[8442],"class_list":["post-72375","page","type-page","status-publish","hentry","category-angular-js-web-development","tag-decorators"],"acf":[],"yoast_head":"\n Decorators - Tutorial<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.vskills.in\/certification\/tutorial\/decorators\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Decorators - Tutorial\" \/>\n<meta property=\"og:description\" content=\"Decorators are a design pattern that is used to separate modification or decoration of a class without modifying the original source code. In AngularJS, decorators are functions that allow a service, directive or filter to be modified prior to its usage. There are two ways to register decorators $provide.decorator, and decorator Each provide access to...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.vskills.in\/certification\/tutorial\/decorators\/\" \/>\n<meta property=\"og:site_name\" content=\"Tutorial\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/vskills.in\/\" \/>\n<meta property=\"article:modified_time\" content=\"2024-04-12T08:52:54+00:00\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/decorators\/\",\"url\":\"https:\/\/www.vskills.in\/certification\/tutorial\/decorators\/\",\"name\":\"Decorators - Tutorial\",\"isPartOf\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#website\"},\"datePublished\":\"2020-01-14T04:46:06+00:00\",\"dateModified\":\"2024-04-12T08:52:54+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/decorators\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.vskills.in\/certification\/tutorial\/decorators\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/decorators\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.vskills.in\/certification\/tutorial\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Decorators\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#website\",\"url\":\"https:\/\/www.vskills.in\/certification\/tutorial\/\",\"name\":\"Tutorial\",\"description\":\"Vskills - A initiative in elearning and certification\",\"publisher\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.vskills.in\/certification\/tutorial\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#organization\",\"name\":\"Vskills\",\"url\":\"https:\/\/www.vskills.in\/certification\/tutorial\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2017\/07\/vskills-min-logo.jpg\",\"contentUrl\":\"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2017\/07\/vskills-min-logo.jpg\",\"width\":73,\"height\":55,\"caption\":\"Vskills\"},\"image\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/vskills.in\/\",\"https:\/\/x.com\/vskills_in\",\"https:\/\/www.linkedin.com\/company-beta\/1371554\/\",\"https:\/\/www.youtube.com\/channel\/UCMWnscxPwRF_PqXo9B7q_Tw\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Decorators - Tutorial","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.vskills.in\/certification\/tutorial\/decorators\/","og_locale":"en_US","og_type":"article","og_title":"Decorators - Tutorial","og_description":"Decorators are a design pattern that is used to separate modification or decoration of a class without modifying the original source code. In AngularJS, decorators are functions that allow a service, directive or filter to be modified prior to its usage. There are two ways to register decorators $provide.decorator, and decorator Each provide access to...","og_url":"https:\/\/www.vskills.in\/certification\/tutorial\/decorators\/","og_site_name":"Tutorial","article_publisher":"https:\/\/www.facebook.com\/vskills.in\/","article_modified_time":"2024-04-12T08:52:54+00:00","twitter_misc":{"Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/decorators\/","url":"https:\/\/www.vskills.in\/certification\/tutorial\/decorators\/","name":"Decorators - Tutorial","isPartOf":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#website"},"datePublished":"2020-01-14T04:46:06+00:00","dateModified":"2024-04-12T08:52:54+00:00","breadcrumb":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/decorators\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.vskills.in\/certification\/tutorial\/decorators\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/decorators\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.vskills.in\/certification\/tutorial\/"},{"@type":"ListItem","position":2,"name":"Decorators"}]},{"@type":"WebSite","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#website","url":"https:\/\/www.vskills.in\/certification\/tutorial\/","name":"Tutorial","description":"Vskills - A initiative in elearning and certification","publisher":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.vskills.in\/certification\/tutorial\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#organization","name":"Vskills","url":"https:\/\/www.vskills.in\/certification\/tutorial\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#\/schema\/logo\/image\/","url":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2017\/07\/vskills-min-logo.jpg","contentUrl":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2017\/07\/vskills-min-logo.jpg","width":73,"height":55,"caption":"Vskills"},"image":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/vskills.in\/","https:\/\/x.com\/vskills_in","https:\/\/www.linkedin.com\/company-beta\/1371554\/","https:\/\/www.youtube.com\/channel\/UCMWnscxPwRF_PqXo9B7q_Tw"]}]}},"_links":{"self":[{"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/pages\/72375","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/comments?post=72375"}],"version-history":[{"count":3,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/pages\/72375\/revisions"}],"predecessor-version":[{"id":72549,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/pages\/72375\/revisions\/72549"}],"wp:attachment":[{"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/media?parent=72375"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/categories?post=72375"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/tags?post=72375"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}} | | | |