refactor(angular_1_router): use directives for route targets

BREAKING CHANGE:

Previously, route configuration took a controller constructor function as the value of
`component` in a route definition:

```
$route.config([
  { route: '/', component: MyController }
])
```

Based on the name of the controller, we used to use a componentMapper service to
determine what template to pair with each controller, how to bind the instance to
the $scope.

To make the 1.x router more semantically alligned with Angular 2, we now route to a directive.
Thus a route configuration takes a normalized directive name:

```
$route.config([
  { route: '/', component: 'myDirective' }
])
```

BREAKING CHANGE:

In order to avoid name collisions, lifecycle hooks are now prefixed with `$`. Before:

```
MyController.prototype.onActivate = ...
```

After:

```
MyController.prototype.$onActivate = ...
```

Same for `$canActivate` (which now lives on the directive factory function),
`$canDeactivate`, `$canReuse`, and `$onDeactivate` hooks.

modules/angular1_router/test/integration/animation_spec.js

@@ -0,0 +1,102 @@
+'use strict';
+
+describe('ngOutlet animations', function () {
+  var elt,
+    $animate,
+    $compile,
+    $rootScope,
+    $router,
+    $compileProvider;
+
+  beforeEach(function () {
+    module('ng');
+    module('ngAnimate');
+    module('ngAnimateMock');
+    module('ngComponentRouter');
+    module(function (_$compileProvider_) {
+      $compileProvider = _$compileProvider_;
+    });
+
+    inject(function (_$animate_, _$compile_, _$rootScope_, _$router_) {
+      $animate = _$animate_;
+      $compile = _$compile_;
+      $rootScope = _$rootScope_;
+      $router = _$router_;
+    });
+
+    registerComponent('userCmp', {
+      template: '<div>hello {{userCmp.$routeParams.name}}</div>'
+    });
+  });
+
+  afterEach(function () {
+    expect($animate.queue).toEqual([]);
+  });
+
+  it('should work in a simple case', function () {
+    var item;
+
+    compile('<div ng-outlet></div>');
+
+    $router.config([
+      { path: '/user/:name', component: 'userCmp' }
+    ]);
+
+    $router.navigateByUrl('/user/brian');
+    $rootScope.$digest();
+    expect(elt.text()).toBe('hello brian');
+
+    // "user" component enters
+    item = $animate.queue.shift();
+    expect(item.event).toBe('enter');
+
+    // navigate to pete
+    $router.navigateByUrl('/user/pete');
+    $rootScope.$digest();
+    expect(elt.text()).toBe('hello pete');
+
+    // "user pete" component enters
+    item = $animate.queue.shift();
+    expect(item.event).toBe('enter');
+    expect(item.element.text()).toBe('hello pete');
+
+    // "user brian" component leaves
+    item = $animate.queue.shift();
+    expect(item.event).toBe('leave');
+    expect(item.element.text()).toBe('hello brian');
+  });
+
+
+  function registerComponent(name, options) {
+    var controller = options.controller || function () {};
+
+    ['$onActivate', '$onDeactivate', '$onReuse', '$canReuse', '$canDeactivate'].forEach(function (hookName) {
+      if (options[hookName]) {
+        controller.prototype[hookName] = options[hookName];
+      }
+    });
+
+    function factory() {
+      return {
+        template: options.template || '',
+        controllerAs: name,
+        controller: controller
+      };
+    }
+
+    if (options.$canActivate) {
+      factory.$canActivate = options.$canActivate;
+    }
+    if (options.$routeConfig) {
+      factory.$routeConfig = options.$routeConfig;
+    }
+
+    $compileProvider.directive(name, factory);
+  }
+
+  function compile(template) {
+    elt = $compile('<div>' + template + '</div>')($rootScope);
+    $rootScope.$digest();
+    return elt;
+  }
+});