refactor(*): Create a Router class for bootstrapping ui-router.

refactor(*): Create a coreservices API paving the way for ng1 or ng2 module plugins
refactor(*): externalize some ng1 services and injector registrations

Author: christopherthielen

src/common/angular1.ts

@@ -1,7 +1,15 @@
 /** @module common */ /** for typedoc */
+
+/**
+ * Provides the implementation for services defined in [[coreservices]], and registers some
+ * with the angular 1 injector.
+ */
+
 /// <reference path='../../typings/angularjs/angular.d.ts' />
 import {IQService} from "angular";
 import {Router} from "../router";
+import {services} from "./coreservices";
+import {isObject} from "./common";
 
 let app = angular.module("ui.router.angular1", []);
 
@@ -60,11 +68,42 @@ function runBlock($injector) {
 
 app.run(runBlock);
 
+const bindFunctions = (fnNames: string[], from, to) =>
+    fnNames.forEach(name => to[name] = from[name].bind(from));
 
-let router = new Router();
+let router = null;
 
+ng1UIRouter.$inject = ['$locationProvider'];
+function ng1UIRouter($locationProvider) {
+  router = new Router();
+  bindFunctions(['hashPrefix'], $locationProvider, services.location);
+
+  this.$get = $get;
+  $get.$inject = ['$location', '$browser', '$sniffer'];
+  function $get($location, $browser, $sniffer) {
+
+    services.location.html5Mode = function() {
+      var html5Mode = $locationProvider.html5Mode();
+      html5Mode = isObject(html5Mode) ? html5Mode.enabled : html5Mode;
+      return html5Mode && $sniffer.history;
+    };
+
+    var $locationFnNames = ['hash', 'path', 'replace', 'search', 'url', 'port', 'protocol', 'host'];
+    bindFunctions($locationFnNames, $location, services.location);
+    bindFunctions(['baseHref'], $browser, services.location);
+
+    return router;
+  }
+}
+
+angular.module('ui.router.init', ['ng']).provider("ng1UIRouter", <any> ng1UIRouter);
 // Register as a provider so it's available to other providers
-angular.module('ui.router.util').provider('$urlMatcherFactory', () => router.urlMatcherFactory);
+angular.module('ui.router.util').provider('$urlMatcherFactory', ['ng1UIRouterProvider', () => router.urlMatcherFactory]);
+angular.module('ui.router.router').provider('$urlRouter', ['ng1UIRouterProvider', () => router.urlRouterProvider]);
+angular.module('ui.router.state').provider('$state', ['ng1UIRouterProvider', () => router.stateProvider]);
+
+/* This effectively calls $get() to init when we enter runtime */
+angular.module('ui.router.state').run(['ng1UIRouter', function(ng1UIRouter) { }]);
+angular.module('ui.router.state').run(['$state', function($state) { }]);
 angular.module('ui.router.util').run(['$urlMatcherFactory', function($urlMatcherFactory) { }]);
 
-export { router };

src/common/common.ts

@@ -411,7 +411,7 @@ export function tail(collection: any[]): any {
  * in your angular app (use {@link ui.router} module instead).
  *
  */
-angular.module('ui.router.util', ['ng']);
+angular.module('ui.router.util', ['ng', 'ui.router.init']);
 
 /**
  * @ngdoc overview
@@ -479,6 +479,6 @@ angular.module('ui.router.state', ['ui.router.router', 'ui.router.util', 'ui.rou
  * </html>
  * </pre>
  */
-angular.module('ui.router', ['ui.router.state', 'ui.router.angular1']);
+angular.module('ui.router', ['ui.router.init', 'ui.router.state', 'ui.router.angular1']);
 
 angular.module('ui.router.compat', ['ui.router']);

src/common/coreservices.ts

@@ -0,0 +1,50 @@
+import * as foo from "./common";
+
+/**
+ * Services related to the browser location (url)
+ */
+interface LocationServices {
+  replace(): void;
+  url(newurl: string): string;
+  url(): string;
+  path(): string;
+  search(): string;
+  hash(): string;
+
+  port(): number;
+  protocol(): string;
+  host(): string;
+
+  baseHref(): string;
+  html5Mode(): boolean;
+  hashPrefix(): string;
+  hashPrefix(newprefix: string): string;
+}
+
+interface Services {
+    location: LocationServices;
+}
+
+let services: Services = {
+  location: <any> {}
+};
+
+let notImplemented = (fnname) => () => {
+  throw new Error(`${fnname}(): No coreservices implementation for UI-Router is loaded. You should include one of: ['angular1.js']`);
+};
+
+[
+  "replace",
+  "url",
+  "path",
+  "search",
+  "hash",
+  "port",
+  "protocol",
+  "host",
+  "baseHref",
+  "html5Mode",
+  "hashPrefix"
+].forEach(key => services.location[key] = notImplemented(key));
+
+export {services};

src/common/module.ts

@@ -1,5 +1,6 @@
 /** @module common */ /** for typedoc */
 export * from "./angular1";
 export * from "./common";
+export * from "./coreservices";
 export * from "./queue";
 export * from "./trace";

src/router.ts

@@ -1,8 +1,15 @@
 import {UrlMatcherFactory} from "./url/urlMatcherFactory";
+import {$UrlRouterProvider} from "./url/urlRouter";
+import {$StateProvider} from "./state/state";
 
 class Router {
-  constructor() {}
   urlMatcherFactory: UrlMatcherFactory = new UrlMatcherFactory();
+  urlRouterProvider = new $UrlRouterProvider(this.urlMatcherFactory);
+  stateProvider = new $StateProvider(this.urlRouterProvider, this.urlMatcherFactory);
+
+  constructor() {
+
+  }
 }
 
 export { Router };

src/state/state.ts

@@ -3,7 +3,7 @@ import {
   extend, defaults, copy, equalForKeys, forEach, find, prop,
   propEq, ancestors, noop, isDefined, isObject, isString, values
 } from "../common/common";
-import {Queue} from "../common/module";
+import {Queue} from "../common/queue";
 
 import {IServiceProviderFactory, IPromise} from "angular";
 import {StateService, StateDeclaration, StateOrName, HrefOptions, ViewDeclaration } from "./interface";
@@ -17,6 +17,7 @@ import {TransitionManager} from "./hooks/transitionManager";
 import {paramTypes, Param, Type, StateParams} from "../params/module";
 import {UrlMatcher} from "../url/urlMatcher";
 import {ViewConfig} from "../view/view";
+import {UrlMatcherFactory} from "../url/urlMatcherFactory";
 
 /**
  * @ngdoc object
@@ -39,8 +40,7 @@ import {ViewConfig} from "../view/view";
  *
  * The `$stateProvider` provides interfaces to declare these states for your app.
  */
-$StateProvider.$inject = ['$urlRouterProvider', '$urlMatcherFactoryProvider'];
-function $StateProvider(   $urlRouterProvider,   $urlMatcherFactoryProvider) {
+export function $StateProvider($urlRouterProvider, $urlMatcherFactoryProvider: UrlMatcherFactory) {
 
   let root: State, states: { [key: string]: State } = {};
   let $state: StateService = <any> function $state() {};
@@ -795,7 +795,3 @@ function $StateProvider(   $urlRouterProvider,   $urlMatcherFactoryProvider) {
     return $state;
   }
 }
-
-angular.module('ui.router.state')
-  .provider('$state', <IServiceProviderFactory> $StateProvider)
-  .run(['$state', function($state) { /* This effectively calls $get() to init when we enter runtime */ }]);

src/state/stateBuilder.ts

@@ -4,6 +4,8 @@ import {StateDeclaration} from "./interface";
 
 import {State, StateMatcher} from "./module";
 import {Param} from "../params/module";
+import {UrlMatcherFactory} from "../url/urlMatcherFactory";
+import {UrlMatcher} from "../url/urlMatcher";
 
 const parseUrl = (url: string): any => {
   if (!isString(url)) return false;
@@ -42,7 +44,7 @@ export class StateBuilder {
   /** An object that contains all the BuilderFunctions registered, key'd by the name of the State property they build */
   private builders: Builders;
 
-  constructor(root: () => State, private matcher: StateMatcher, $urlMatcherFactoryProvider) {
+  constructor(root: () => State, private matcher: StateMatcher, $urlMatcherFactoryProvider: UrlMatcherFactory) {
     let self = this;
 
     this.builders = {
@@ -72,7 +74,7 @@ export class StateBuilder {
 
         if (!url) return null;
         if (!$urlMatcherFactoryProvider.isMatcher(url)) throw new Error(`Invalid url '${url}' in state '${state}'`);
-        return (parsed && parsed.root) ? url : ((parent && parent.navigable) || root()).url.append(url);
+        return (parsed && parsed.root) ? url : ((parent && parent.navigable) || root()).url.append(<UrlMatcher> url);
       }],
 
       // Keep track of the closest ancestor state that has a URL (i.e. is navigable)

src/url/urlMatcherFactory.ts

@@ -66,7 +66,7 @@ export class UrlMatcherFactory {
    * @param config  The config object hash.
    * @returns The UrlMatcher.
    */
-  compile(pattern: string, config: { [key: string]: any }) {
+  compile(pattern: string, config?: { [key: string]: any }) {
     return new UrlMatcher(pattern, extend(getDefaultConfig(), config));
   }
 

src/url/urlRouter.ts

@@ -3,6 +3,11 @@
 import {isFunction, isString, isDefined, isArray, isObject, extend} from "../common/common";
 import {IServiceProviderFactory} from "angular";
 import {UrlMatcher} from "./module";
+import {services} from "../common/coreservices";
+import {UrlMatcherFactory} from "./urlMatcherFactory";
+import {runtime} from "../common/angular1";
+
+let $location = services.location;
 
 /**
  * @ngdoc object
@@ -20,8 +25,7 @@ import {UrlMatcher} from "./module";
  * There are several methods on `$urlRouterProvider` that make it useful to use directly
  * in your module config.
  */
-$UrlRouterProvider.$inject = ['$locationProvider', '$urlMatcherFactoryProvider'];
-function $UrlRouterProvider(   $locationProvider,   $urlMatcherFactory) {
+export function $UrlRouterProvider($urlMatcherFactory: UrlMatcherFactory) {
   var rules = [], otherwise = null, interceptDeferred = false, listener;
 
   // Returns a string that is a prefix of all strings matching the RegExp
@@ -172,8 +176,8 @@ function $UrlRouterProvider(   $locationProvider,   $urlMatcherFactory) {
           redirect = $urlMatcherFactory.compile(handler);
           handler = ['$match', redirect.format.bind(redirect)];
         }
-        return extend(function ($injector, $location) {
-          return handleIfMatch($injector, handler, what.exec($location.path(), $location.search(), $location.hash()));
+        return extend(function () {
+          return handleIfMatch(runtime.$injector, handler, what.exec($location.path(), $location.search(), $location.hash()));
         }, {
           prefix: isString(what.prefix) ? what.prefix : ''
         });
@@ -185,8 +189,8 @@ function $UrlRouterProvider(   $locationProvider,   $urlMatcherFactory) {
           redirect = handler;
           handler = ['$match', ($match) => interpolate(redirect, $match)];
         }
-        return extend(function ($injector, $location) {
-          return handleIfMatch($injector, handler, what.exec($location.path()));
+        return extend(function () {
+          return handleIfMatch(runtime.$injector, handler, what.exec($location.path()));
         }, {
           prefix: regExpPrefix(what)
         });
@@ -262,22 +266,17 @@ function $UrlRouterProvider(   $locationProvider,   $urlMatcherFactory) {
    * @ngdoc object
    * @name ui.router.router.$urlRouter
    *
-   * @requires $location
-   * @requires $rootScope
-   * @requires $injector
-   * @requires $browser
-   *
    * @description
    *
    */
   this.$get = $get;
-  $get.$inject = ['$location', '$rootScope', '$injector', '$browser', '$sniffer'];
-  function $get(   $location,   $rootScope,   $injector,   $browser,   $sniffer) {
+  $get.$inject = [ '$rootScope'];
+  function $get(    $rootScope) {
 
     var location = $location.url();
 
     function appendBasePath(url, isHtml5, absolute) {
-      var baseHref = $browser.baseHref();
+      var baseHref = $location.baseHref();
       if (baseHref === '/') return url;
       if (isHtml5) return baseHref.slice(0, -1) + url;
       if (absolute) return baseHref.slice(1) + url;
@@ -289,10 +288,13 @@ function $UrlRouterProvider(   $locationProvider,   $urlMatcherFactory) {
       if (evt && evt.defaultPrevented) return;
 
       function check(rule) {
-        var handled = rule($injector, $location);
+        var handled = rule(runtime.$injector, $location);
 
         if (!handled) return false;
-        if (isString(handled)) $location.replace().url(handled);
+        if (isString(handled)) {
+          $location.replace();
+          $location.url(handled);
+        }
         return true;
       }
       var n = rules.length, i;
@@ -390,18 +392,12 @@ function $UrlRouterProvider(   $locationProvider,   $urlMatcherFactory) {
       href(urlMatcher: UrlMatcher, params: any, options: any): string {
         if (!urlMatcher.validates(params)) return null;
 
-        var isHtml5 = $locationProvider.html5Mode();
-        if (isObject(isHtml5)) {
-          isHtml5 = isHtml5.enabled;
-        }
-
-        isHtml5 = isHtml5 && $sniffer.history;
-
         var url = urlMatcher.format(params);
         options = options || {};
 
+        var isHtml5 = services.location.html5Mode();
         if (!isHtml5 && url !== null) {
-          url = "#" + $locationProvider.hashPrefix() + url;
+          url = "#" + $location.hashPrefix() + url;
         }
         url = appendBasePath(url, isHtml5, options.absolute);
 
@@ -410,12 +406,11 @@ function $UrlRouterProvider(   $locationProvider,   $urlMatcherFactory) {
         }
 
         var slash = (!isHtml5 && url ? '/' : ''), port = $location.port();
-        port = (port === 80 || port === 443 ? '' : ':' + port);
+        port = <any> (port === 80 || port === 443 ? '' : ':' + port);
 
         return [$location.protocol(), '://', $location.host(), port, slash, url].join('');
       }
     };
   }
 }
 
-angular.module('ui.router.router').provider('$urlRouter', <IServiceProviderFactory> $UrlRouterProvider);

test/stateSpec.js

@@ -2,8 +2,9 @@ var module = angular.mock.module;
 var uiRouter = require("ui-router");
 var common = uiRouter.common;
 var RejectType = uiRouter.transition.RejectType;
-var extend = common.extend,
-  forEach = common.forEach;
+var extend = common.extend;
+var forEach = common.forEach;
+var services = common.services;
 var state = uiRouter.state;
 var StateMatcher = state.StateMatcher;
 var StateBuilder = uiRouter.state.StateBuilder;
@@ -1081,7 +1082,7 @@ describe('state', function () {
 
     describe('when $browser.baseHref() exists', function() {
       beforeEach(inject(function($browser) {
-        spyOn($browser, 'baseHref').and.callFake(function() {
+        spyOn(services.location, 'baseHref').and.callFake(function() {
           return '/base/';
         });
       }));
@@ -1417,22 +1418,22 @@ describe('state', function () {
 
     it('should replace browser history when "replace" enabled', inject(function ($state, $rootScope, $location, $q) {
 
-      spyOn($location, 'replace');
+      spyOn(services.location, 'replace');
 
       $state.transitionTo('about', {}, { location: 'replace' });
       $q.flush();
 
-      expect($location.replace).toHaveBeenCalled();
+      expect(services.location.replace).toHaveBeenCalled();
     }));
 
     it('should not replace history normally', inject(function ($state, $rootScope, $location, $q) {
 
-      spyOn($location, 'replace');
+      spyOn(services.location, 'replace');
 
       $state.transitionTo('about');
       $q.flush();
 
-      expect($location.replace).not.toHaveBeenCalled();
+      expect(services.location.replace).not.toHaveBeenCalled();
 
     }));
   });