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.

Author: btford

modules/angular1_router/build.js

@@ -22,70 +22,22 @@ var PRELUDE = '(function(){\n';
 var POSTLUDE = '\n}());\n';
 var FACADES = fs.readFileSync(__dirname + '/lib/facades.es5', 'utf8');
 var DIRECTIVES = fs.readFileSync(__dirname + '/src/ng_outlet.js', 'utf8');
+var moduleTemplate = fs.readFileSync(__dirname + '/src/module_template.js', 'utf8');
+
 function main() {
   var ES6_SHIM = fs.readFileSync(__dirname + '/../../node_modules/es6-shim/es6-shim.js', 'utf8');
   var dir = __dirname + '/../angular2/src/router/';
 
-  var out = '';
-
   var sharedCode = '';
   files.forEach(function (file) {
     var moduleName = 'router/' + file.replace(/\.ts$/, '');
 
     sharedCode += transform(moduleName, fs.readFileSync(dir + file, 'utf8'));
   });
 
-  out += "angular.module('ngComponentRouter')";
-  out += angularFactory('$router', ['$q', '$location', '$$controllerIntrospector',
-                                    '$browser', '$rootScope', '$injector'], [
-    FACADES,
-    "var exports = {Injectable: function () {}};",
-    "var require = function () {return exports;};",
-    sharedCode,
-    "var RouteConfig = exports.RouteConfig;",
-    "angular.annotations = {RouteConfig: RouteConfig, CanActivate: exports.CanActivate};",
-    "angular.stringifyInstruction = exports.stringifyInstruction;",
-    "var RouteRegistry = exports.RouteRegistry;",
-    "var RootRouter = exports.RootRouter;",
-    //TODO: move this code into a templated JS file
-    "var registry = new RouteRegistry();",
-    "var location = new Location();",
-
-    "$$controllerIntrospector(function (name, constructor) {",
-      "if (constructor.$canActivate) {",
-        "constructor.annotations = constructor.annotations || [];",
-        "constructor.annotations.push(new angular.annotations.CanActivate(function (instruction) {",
-          "return $injector.invoke(constructor.$canActivate, constructor, {",
-            "$routeParams: instruction.component ? instruction.component.params : instruction.params",
-          "});",
-        "}));",
-      "}",
-      "if (constructor.$routeConfig) {",
-        "constructor.annotations = constructor.annotations || [];",
-        "constructor.annotations.push(new angular.annotations.RouteConfig(constructor.$routeConfig));",
-      "}",
-      "if (constructor.annotations) {",
-        "constructor.annotations.forEach(function(annotation) {",
-          "if (annotation instanceof RouteConfig) {",
-            "annotation.configs.forEach(function (config) {",
-              "registry.config(constructor, config);",
-            "});",
-          "}",
-        "});",
-      "}",
-    "});",
-
-    "var router = new RootRouter(registry, location, new Object());",
-    "$rootScope.$watch(function () { return $location.path(); }, function (path) {",
-      "if (router.lastNavigationAttempt !== path) {",
-        "router.navigateByUrl(path);",
-      "}",
-    "});",
-
-    "return router;"
-  ].join('\n'));
+  var out = moduleTemplate.replace('//{{FACADES}}', FACADES).replace('//{{SHARED_CODE}}', sharedCode);
 
-  return PRELUDE + ES6_SHIM + DIRECTIVES + out + POSTLUDE;
+  return PRELUDE + DIRECTIVES + out + POSTLUDE;
 }
 
 

modules/angular1_router/lib/facades.es5

@@ -32,6 +32,10 @@ function isArray(obj) {
   return Array.isArray(obj);
 }
 
+function getTypeNameForDebugging (fn) {
+  return fn.name || 'Root';
+}
+
 var PromiseWrapper = {
   resolve: function (reason) {
     return $q.when(reason);
@@ -251,8 +255,8 @@ var StringWrapper = {
     return s.replace(from, replace);
   },
 
-   startsWith: function(s, start) {
-    return s.startsWith(start);
+  startsWith: function(s, start) {
+    return s.substr(0, start.length) === start;
   },
 
   replaceAllMapped: function(s, from, cb) {
@@ -272,14 +276,18 @@ var StringWrapper = {
 
 //TODO: implement?
 // I think it's too heavy to ask 1.x users to bring in Rx for the router...
-function EventEmitter() {
-
-}
+function EventEmitter() {}
 
 var BaseException = Error;
 
 var ObservableWrapper = {
-  callNext: function(){}
+  callNext: function(ob, val) {
+    ob.fn(val);
+  },
+
+  subscribe: function(ob, fn) {
+    ob.fn = fn;
+  }
 };
 
 // TODO: https://github.com/angular/angular.js/blob/master/src/ng/browser.js#L227-L265

modules/angular1_router/src/module_template.js

@@ -0,0 +1,66 @@
+
+angular.module('ngComponentRouter').
+    value('$route', null). // can be overloaded with ngRouteShim
+    factory('$router', ['$q', '$location', '$$directiveIntrospector', '$browser', '$rootScope', '$injector', '$route', routerFactory]);
+
+function routerFactory($q, $location, $$directiveIntrospector, $browser, $rootScope, $injector) {
+
+  // When this file is processed, the line below is replaced with
+  // the contents of `../lib/facades.es5`.
+  //{{FACADES}}
+
+  var exports = {Injectable: function () {}};
+  var require = function () {return exports;};
+
+  // When this file is processed, the line below is replaced with
+  // the contents of the compiled TypeScript classes.
+  //{{SHARED_CODE}}
+
+  //TODO: this is a hack to replace the exiting implementation at run-time
+  exports.getCanActivateHook = function (directiveName) {
+    var factory = $$directiveIntrospector.getTypeByName(directiveName);
+    return factory && factory.$canActivate && function (next, prev) {
+      return $injector.invoke(factory.$canActivate, null, {
+        $nextInstruction: next,
+        $prevInstruction: prev
+      });
+    };
+  };
+
+  // This hack removes assertions about the type of the "component"
+  // property in a route config
+  exports.assertComponentExists = function () {};
+
+  angular.stringifyInstruction = exports.stringifyInstruction;
+
+  var RouteRegistry = exports.RouteRegistry;
+  var RootRouter = exports.RootRouter;
+
+  var registry = new RouteRegistry();
+  var location = new Location();
+
+  $$directiveIntrospector(function (name, factory) {
+    if (angular.isArray(factory.$routeConfig)) {
+      factory.$routeConfig.forEach(function (config) {
+        registry.config(name, config);
+      });
+    }
+  });
+
+  // Because Angular 1 has no notion of a root component, we use an object with unique identity
+  // to represent this.
+  var ROOT_COMPONENT_OBJECT = new Object();
+
+  var router = new RootRouter(registry, location, ROOT_COMPONENT_OBJECT);
+  $rootScope.$watch(function () { return $location.path(); }, function (path) {
+    if (router.lastNavigationAttempt !== path) {
+      router.navigateByUrl(path);
+    }
+  });
+
+  router.subscribe(function () {
+    $rootScope.$broadcast('$routeChangeSuccess', {});
+  });
+
+  return router;
+}