src/ng/compile.js

@@ -968,21 +968,19 @@ function $CompileProvider($provide, $$sanitizeUriProvider) {
    *      See {@link ng.$compile#-bindtocontroller- `bindToController`}.
    *    - `transclude` – `{boolean=}` – whether {@link $compile#transclusion content transclusion} is enabled.
    *      Disabled by default.
-   *    - `restrict` - `{string=}` - a string containing one or more characters from {@link ng.$compile#-restrict- EACM},
-   *      which restricts the component to specific directive declaration style. If omitted, this defaults to 'E'.
-   *    - `$canActivate` – `{function()=}` – TBD.
-   *    - `$routeConfig` – `{object=}` – TBD.
+   *    - `$...` – `{function()=}` – additional annotations to provide to the directive factory function.
    *
    * @returns {ng.$compileProvider} the compile provider itself, for chaining of function calls.
    * @description
-   * Register a **Component definition** with the compiler. This is a shorthand for registering a special
-   * type of directive, which represents a self-contained UI component in your application.
+   * Register a **component definition** with the compiler. This is a shorthand for registering a special
+   * type of directive, which represents a self-contained UI component in your application. Such components
+   * are always isolated (i.e. `scope: {}`) and are always restricted to elements (i.e. `restrict: 'E'`).
    *
-   * Component definitions are very simple and do not require much of the complexity behind defining general
+   * Component definitions are very simple and do not require as much configuration as defining general
    * directives. Component definitions usually consist only of a template and a controller backing it.
    *
    * In order to make the definition easier, components enforce best practices like use of `controllerAs`,
-   * `bindToController`, **isolate scope** and default behaviors like restriction to elements.
+   * `bindToController`. They always have **isolate scope** and are restricted to elements.
    *
    * Here are a few examples of how you would usually define components:
    *
@@ -1077,16 +1075,18 @@ function $CompileProvider($provide, $$sanitizeUriProvider) {
         transclude: options.transclude,
         scope: {},
         bindToController: options.bindings || {},
-        restrict: options.restrict || 'E'
+        restrict: 'E'
       };
     }
 
-    if (options.$canActivate) {
-      factory.$canActivate = options.$canActivate;
-    }
-    if (options.$routeConfig) {
-      factory.$routeConfig = options.$routeConfig;
-    }
+    // Copy any annotation properties (starting with $) over to the factory function
+    // These could be used by libraries such as the new component router
+    forEach(options, function(val, key) {
+      if (key.charAt(0) === '$') {
+        factory[key] = val;
+      }
+    });
+
     factory.$inject = ['$injector'];
 
     return this.directive(name, factory);

test/ng/compileSpec.js

@@ -9321,14 +9321,16 @@ describe('$compile', function() {
       });
     });
 
-    it('should add router annotations to directive factory', function() {
+    it('should add additional annotations to directive factory', function() {
       var myModule = angular.module('my', []).component('myComponent', {
         $canActivate: 'canActivate',
-        $routeConfig: 'routeConfig'
+        $routeConfig: 'routeConfig',
+        $customAnnotation: 'XXX'
       });
       expect(myModule._invokeQueue.pop().pop()[1]).toEqual(jasmine.objectContaining({
         $canActivate: 'canActivate',
-        $routeConfig: 'routeConfig'
+        $routeConfig: 'routeConfig',
+        $customAnnotation: 'XXX'
       }));
     });
 
@@ -9357,8 +9359,7 @@ describe('$compile', function() {
         template: 'abc',
         templateUrl: 'def.html',
         transclude: true,
-        bindings: {abc: '='},
-        restrict: 'EA'
+        bindings: {abc: '='}
       });
       module('my');
       inject(function(myComponentDirective) {
@@ -9370,7 +9371,7 @@ describe('$compile', function() {
           transclude: true,
           scope: {},
           bindToController: {abc: '='},
-          restrict: 'EA'
+          restrict: 'E'
         }));
       });
     });