Building AngularJS Web Applications for an International Audience
In AngularJS we can create a decorator over any existing service or
filter. Such a decorator can wrap an existing service and "decorate"
(extend) it with an additional functionality. AngularJS decorators are
great example of the decorator pattern (http://en.wikipedia.
org/wiki/Decorator_pattern).For example, to change the fullDate format for the fr-ca locale we could write a
wrapper around the date filter as follows:
angular.module('filterCustomization', [])
.config(function ($provide) {
varcustomFormats = {
'fr-ca': {
'fullDate': 'y'
}
};$provide.decorator('dateFilter', function ($delegate, $locale) {
return function (input, format) {
return $delegate(input, customFormats[$locale.id][format]
|| format);
};
});
})Here we are taking an advantage of decorators in the AngularJS dependency
injection system. By defining a new decorator ($provide.decorator()) we can
wrap an existing service inside our custom one yet still keep access to the original
service ($delegate). Apart from the new $provide service the rest of the code
should be easy to follow. We are simply consulting a hash of overridden formats for
a given locale (customFormats), and if an overridden format was specified we are
using it to call the original data filter. Otherwise we are using a format supplied in a
call the original date filter.
Our decorator replaces the date filter, since we've chosen to register it under the
same name as the original one. The advantage of this approach is that we don't need
to touch application's code to use the customized version of the filter.
We could elaborate this decorator further to choose a format in a situation when
none was specified.