docs(guide/decorators): add decorator guide

+ explain decorators and how they are implemented in angular
+ explain how different types of services can be selected
+ explain `$delegate` objects and how they differ between services
+ warn of the risks/caveats of `$delegate` modification
+ note the exposure of `decorator` through the module api
+ show an example of decorating a core service
+ show an example of decorating a core directive
+ show an example of decorating a core filter

closes angular#12163

Author: sjbarker

docs/content/guide/decorators.ngdoc

@@ -0,0 +1,368 @@
+@ngdoc overview
+@name Decorators
+@sortOrder 345
+@description
+
+# Decorators in AngularJS
+
+<div class="alert alert-warning">
+  **NOTE:** This guide is targeted towards developers who are already familiar with AngularJS basics.
+  If you're just getting started, we recommend the {@link tutorial/ tutorial} first.
+</div>
+
+## What are decorators?
+
+Decorators are used to facilitate a decorator design pattern. This pattern is used to separate modification or
+*decoration* of a class without modifying the original source code. In Angular, decorators are functions that allow a
+service to be modified after their instantiation.
+
+## $provide.decorator
+
+The {@link api/auto/service/$provide#decorator decorator function} allows access to a $delegate of the service once it
+has been instantiated. For example:
+
+```js
+angular.module('myApp', [])
+
+.config([ '$provide', function($provide) {
+
+  $provide.decorator('$log', [
+    '$delegate',
+    function $logDecorator($delegate) {
+
+      var originalWarn = $delegate.warn;
+      $delegate.warn = function decoratedWarn(msg) {
+        msg = 'Decorated Warn: ' + msg;
+        originalWarn.apply($delegate, arguments);
+      };
+
+      return $delegate;
+    }
+  ]);
+}]);
+```
+
+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.
+
+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.
+
+| Service Type | Selector                      | $delegate                                                             |
+|--------------|-------------------------------|-----------------------------------------------------------------------|
+| Service      | `serviceName`                 | The `object` or `function` returned by the service                    |
+| Directive    | `directiveName + 'Directive'` | An `Array.<DirectiveObject>`<sub>{@link guide/decorators#drtvArray 1}</sub> |
+| Filter       | `filterName + 'Filter'`       | The `function` returned by the filter                                 |
+
+<small id="drtvArray">1. Multiple directives may be registered to the same selector/name</small>
+
+<div class="alert alert-warning">
+  **NOTE:** Developers should take care in how and why they are modifying the `$delegate` for the service. Not only
+  should expectations for the consumer be kept, but some functionality (such as directive registration) does not take
+  place after decoration, but during creation/registration of the original service. This means, for example, that
+  an action such as pushing a directive object to a directive `$delegate` will likely result in unexpected behavior.
+</div>
+
+## module.decorator
+
+This {@link api/ng/type/angular.Module#decorator 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. The
+main caveat here is that you will need to take note the order in which you create your decorators.
+
+Unlike in the module config block (which allows configuration of services prior to their creation), the service must be
+registered prior to the decorator (see {@link guide/providers#provider-recipe Provider Recipe}). For example, the
+following would not work because you are attempting to decorate outside of the configuration phase and the service
+hasn't been created yet:
+
+```js
+// will cause an error since 'someService' hasn't been registered
+angular.module('myApp').decorator('someService', ...);
+
+angular.module('myApp').factory('someService', ...);
+```
+
+## Example Applications
+
+The following sections provide examples each of a service decorator, a directive decorator, and a filter decorator.
+
+### Service Decorator Example
+
+This example shows how we can decorate the `$rootScope` service to add a default value to every scope created in our
+app.
+
+<example module="scopeDecorator" name="service-decorator">
+  <file name="script.js">
+    angular.module('scopeDecorator', []).
+
+      controller('Ctrl', ['$scope', function ($scope) {
+        $scope.anotherValue = 'Another value for Ctrl\'s scope';
+      }]).
+
+      directive('myDirective', function() {
+        return {
+          restrict: 'E',
+          scope: {},
+          replace: true,
+          template: '<p id="myDirective">My directive with an isolate scope: {{ someDefaultValue }}.</p>'
+        };
+      }).
+
+      config(['$provide', function($provide) {
+
+        $provide.decorator('$rootScope', [
+          '$delegate',
+          function rootScopeDecorator($delegate) {
+
+            // store the old $new fn
+            var originalNewScopeFn = $delegate.$new;
+
+            // create a new $new function that wraps the original
+            function newScope() {
+
+              // create the new child scope and add the default value prior to returning
+              var newChild = originalNewScopeFn.apply($delegate, arguments);
+              newChild.someDefaultValue = 'Default value for every scope';
+
+              return newChild;
+            }
+
+            // set $new to our new fn
+            $delegate.$new = newScope;
+
+            return $delegate;
+          }
+        ]);
+      }]);
+  </file>
+
+  <file name="index.html">
+    <div ng-controller="Ctrl">
+      <p id="scopeDecorator">Here is a default value added to every scope: {{ someDefaultValue }}.</p>
+      <p>Here is a value only on Ctrl's scope: {{ anotherValue }}.</p>
+      <my-directive></my-directive>
+    </div>
+  </file>
+
+  <file name="protractor.js" type="protractor">
+    it('should have default value on scope', function() {
+      expect(element(by.id('scopeDecorator')).getText())
+          .toEqual('Here is a default value added to every scope: Default value for every scope.');
+      expect(element(by.id('myDirective')).getText())
+                .toEqual('My directive with an isolate scope: Default value for every scope.');
+    });
+  </file>
+</example>
+
+### Directive Decorator Example
+
+Failed interpolated expressions in `ng-href` attributes can easily go unnoticed. We can decorate `ngHref` to warn us of
+those conditions.
+
+<example module="urlDecorator" name="directive-decorator">
+  <file name="script.js">
+    angular.module('urlDecorator', []).
+
+      controller('Ctrl', ['$scope', function ($scope) {
+        $scope.id = 3;
+      }]).
+
+      config(['$provide', function($provide) {
+
+        // matchExpressions looks for interpolation markup in the directive attribute, extracts the expressions
+        // from that markup (if they exist) and returns an array of those expressions
+        function matchExpressions(str) {
+          var exps = str.match(/{{([^}]+)}}/g);
+
+          // if there isn't any, get out of here
+          if (exps === null) return;
+
+          exps = exps.map(function(exp) {
+            var prop = exp.match(/[^{}]+/);
+            return prop === null ? null : prop[0];
+          });
+
+          return exps;
+        }
+
+        // remember: directives must be selected by appending 'Directive' to the directive selector
+        $provide.decorator('ngHrefDirective', [
+          '$delegate',
+          '$log',
+          '$parse',
+          function($delegate, $log, $parse) {
+
+            // store the original link fn
+            var originalLinkFn = $delegate[0].link;
+
+            // replace the compile fn
+            $delegate[0].compile = function(tElem, tAttr) {
+
+              // store the original exp in the directive attribute for our warning message
+              var originalExp = tAttr.ngHref;
+
+              // get the interpolated expressions
+              var exps = matchExpressions(originalExp);
+
+              // create and store the getters using $parse
+              var getters = exps.map(function(el) {
+                if (el) return $parse(el);
+              });
+
+              return function newLinkFn(scope, elem, attr) {
+                // fire the originalLinkFn
+                originalLinkFn.apply($delegate[0], arguments);
+
+                // observe the directive attr and check the expressions
+                attr.$observe('ngHref', function(val) {
+
+                  // if we have getters and getters is an array...
+                  if (getters && angular.isArray(getters)) {
+
+                    // loop through the getters and process them
+                    angular.forEach(getters, function(g, idx) {
+
+                      // if val is truthy, then the warning won't log
+                      var val = angular.isFunction(g) ? g(scope) : true;
+                      if (!val) {
+                        $log.warn('NgHref Warning: "' + exps[idx] + '" in the expression "' + originalExp +
+                          '" is falsy!');
+                      }
+
+                    });
+
+                  }
+
+                });
+
+              };
+
+            };
+
+            // get rid of the old link function since we return a link function in compile
+            delete $delegate[0].link;
+
+            // return the $delegate
+            return $delegate;
+
+          }
+
+        ]);
+
+      }]);
+  </file>
+
+  <file name="index.html">
+    <div ng-controller="Ctrl">
+      <a ng-href="/products/{{ id }}/view" id="id3">View Product {{ id }}</a>
+      - <strong>id == 3</strong>, so no warning<br>
+      <a ng-href="/products/{{ id + 5 }}/view" id="id8">View Product {{ id + 5 }}</a>
+      - <strong>id + 5 == 8</strong>, so no warning<br>
+      <a ng-href="/products/{{ someOtherId }}/view" id="someOtherId">View Product {{ someOtherId }}</a>
+      - <strong style="background-color: #ffff00;">someOtherId == undefined</strong>, so warn<br>
+      <a ng-href="/products/{{ someOtherId + 5 }}/view" id="someOtherId5">View Product {{ someOtherId + 5 }}</a>
+      - <strong>someOtherId + 5 == 5</strong>, so no warning<br>
+    </div>
+  </file>
+
+  <file name="protractor.js" type="protractor">
+    it('should only warn when an expression in the interpolated value is falsy', function() {
+      var id3 = element(by.id('id3'));
+      var id8 = element(by.id('id8'));
+      var someOther = element(by.id('someOtherId'));
+      var someOther5 = element(by.id('someOtherId5'));
+
+      expect(id3.getText()).toEqual('View Product 3');
+      expect(id3.getAttribute('href')).toContain('/products/3/view');
+
+      expect(id8.getText()).toEqual('View Product 8');
+      expect(id8.getAttribute('href')).toContain('/products/8/view');
+
+      expect(someOther.getText()).toEqual('View Product');
+      expect(someOther.getAttribute('href')).toContain('/products//view');
+
+      expect(someOther5.getText()).toEqual('View Product 5');
+      expect(someOther5.getAttribute('href')).toContain('/products/5/view');
+
+      browser.manage().logs().get('browser').then(function(browserLog) {
+        var loggedMessage = false;
+        var loggedOnce = true;
+
+        browserLog.forEach(function(logObj) {
+          if (logObj.message.indexOf('NgHref Warning: " someOtherId " ' +
+            'in the expression "/products/{{ someOtherId }}/view" is falsy!') > -1) {
+            if (loggedMessage) loggedOnce = false;
+            loggedMessage = true;
+          } else if (logObj.message.indexOf('NgHref Warning:') > -1) {
+            loggedOnce = false;
+          }
+        });
+
+        expect(loggedMessage).toBe(true);
+        expect(loggedOnce).toBe(true);
+      });
+    });
+  </file>
+</example>
+
+### Filter Decorator Example
+
+Let's say we have created an app that uses the default format for many of our `Date` filters. Suddenly requirements have
+changed (that never happens) and we need all of our default dates to be `'shortDate'` instead of `'mediumDate'`.
+
+<example module="filterDecorator" name="filter-decorator">
+  <file name="script.js">
+    angular.module('filterDecorator', []).
+
+      controller('Ctrl', ['$scope', function ($scope) {
+        $scope.genesis = new Date(2010, 0, 5);
+        $scope.ngConf = new Date(2016, 4, 4);
+      }]).
+
+      config(['$provide', function($provide) {
+
+        $provide.decorator('dateFilter', [
+          '$delegate',
+          function dateDecorator($delegate) {
+
+            // store the original filter
+            var originalFilter = $delegate;
+
+            // return our filter
+            return shortDateDefault;
+
+            // shortDateDefault sets the format to shortDate if it is falsy
+            function shortDateDefault(date, format, timezone) {
+              if (!format) format = 'shortDate';
+
+              // return the result of the original filter
+              return originalFilter(date, format, timezone);
+            }
+
+          }
+
+        ]);
+
+      }]);
+  </file>
+
+  <file name="index.html">
+    <div ng-controller="Ctrl">
+      <div id="genesis">Initial Commit default to short date: {{ genesis | date }}</div>
+      <div>ng-conf 2016 default short date: {{ ngConf | date }}</div>
+      <div id="ngConf">ng-conf 2016 with full date format: {{ ngConf | date:'fullDate' }}</div>
+    </div>
+  </file>
+
+  <file name="protractor.js" type="protractor">
+    it('should default date filter to short date format', function() {
+      expect(element(by.id('genesis')).getText()).toContain('Initial Commit default to short date: 1/5/10');
+    });
+
+    it('should still allow dates to be formatted', function() {
+      expect(element(by.id('ngConf')).getText())
+        .toContain('ng-conf 2016 with full date format: Wednesday, May 4, 2016');
+    });
+  </file>
+</example>