feat(angular1_router): allow component to bind to router

modules/angular1_router/src/ng_outlet.ts

@@ -156,10 +156,11 @@ function ngOutletDirective($animate, $q: ng.IQService, $router) {
 
         this.controller.$$routeParams = instruction.params;
         this.controller.$$template =
-            '<' + dashCase(componentName) + '></' + dashCase(componentName) + '>';
+            '<' + dashCase(componentName) + ' router="$$router"></' + dashCase(componentName) + '>';
         this.controller.$$router = this.router.childRouter(instruction.componentType);
 
         let newScope = scope.$new();
+        newScope.$$router = this.controller.$$router;
 
         let clone = $transclude(newScope, clone => {
           $animate.enter(clone, null, this.currentElement || element);

modules/angular1_router/test/integration/router_spec.js

@@ -44,36 +44,84 @@ describe('router', function () {
     expect(elt.text()).toBe('Home');
   }));
 
-  function registerComponent(name, options) {
-    var controller = options.controller || function () {};
 
-    ['$onActivate', '$onDeactivate', '$onReuse', '$canReuse', '$canDeactivate'].forEach(function (hookName) {
+  it('should bind the component to the current router', inject(function($location) {
-      if (options[hookName]) {
+    var router;
-        controller.prototype[hookName] = options[hookName];
+    registerComponent('homeCmp', {
-      }
+      bindings: { router: '=' },
+      controller: function($scope, $element) {
+        this.$routerOnActivate = function() {
+          router = this.router;
+        };
+      },
+      template: 'Home'
     });
 
+    registerComponent('app', {
+      template: '<div ng-outlet></div>',
+      $routeConfig: [
+        { path: '/', component: 'homeCmp' }
+      ]
+    });
+
+    compile('<app></app>');
+
+    $location.path('/');
+    $rootScope.$digest();
+    var homeElement = elt.find('home-cmp');
+    expect(homeElement.text()).toBe('Home');
+    expect(homeElement.isolateScope().$ctrl.router).toBeDefined();
+    expect(router).toBeDefined();
+  }));
+
+  function registerDirective(name, options) {
     function factory() {
       return {
         template: options.template || '',
         controllerAs: name,
-        controller: controller
+        controller: getController(options)
       };
     }
-
+    applyStaticProperties(factory, options);
-    if (options.$canActivate) {
-      factory.$canActivate = options.$canActivate;
-    }
-    if (options.$routeConfig) {
-      factory.$routeConfig = options.$routeConfig;
-    }
-
     $compileProvider.directive(name, factory);
   }
 
+  function registerComponent(name, options) {
+
+    var definition = {
+      bindings: options.bindings,
+      template: options.template || '',
+      controller: getController(options),
+    }
+    applyStaticProperties(definition, options);
+    $compileProvider.component(name, definition);
+  }
+
   function compile(template) {
     elt = $compile('<div>' + template + '</div>')($rootScope);
     $rootScope.$digest();
     return elt;
   }
-});
+
+  function getController(options) {
+    var controller = options.controller || function () {};
+    [
+      '$routerOnActivate', '$routerOnDeactivate',
+      '$routerOnReuse', '$routerCanReuse',
+      '$routerCanDeactivate'
+    ].forEach(function (hookName) {
+      if (options[hookName]) {
+        controller.prototype[hookName] = options[hookName];
+      }
+    });
+    return controller;
+  }
+
+  function applyStaticProperties(target, options) {
+    ['$canActivate', '$routeConfig'].forEach(function(property) {
+      if (options[property]) {
+        target[property] = options[property];
+      }
+    });
+  }
+});