refactor($view): pre-load all controller locals during transition hook

Author: christopherthielen

src/common/angular1.ts

@@ -27,9 +27,11 @@ export let runtime: IRuntime = {
  *   - Calls $injector.instantiate with controller constructor
  * - Annotate constructor
  * - Undecorate $injector
+ *
+ * returns an array of strings, which are the arguments of the controller expression
  */
 
-export function annotateController(controllerExpression) {
+export function annotateController(controllerExpression): string[] {
   let $injector = runtime.$injector;
   let $controller = $injector.get("$controller");
   let oldInstantiate = $injector.instantiate;

src/path/pathFactory.ts

@@ -110,13 +110,10 @@ export default class PathFactory {
     let transPath = <ITransPath> resolvePath;
 
     // TODO: this doesn't belong here.
-    // TODO: pass options to PathContext
-    // TODO: rename PathContext
     function makeViews(node: ITransNode) {
       let context = node.state, params = node.paramValues;
-      let locals = new PathContext(node.resolveContext, node.state, runtime.$injector, {});
       const makeViewConfig = ([rawViewName, viewDeclarationObj]) =>
-          new ViewConfig({rawViewName, viewDeclarationObj, context, locals, params});
+          new ViewConfig({rawViewName, viewDeclarationObj, context, params});
       return pairs(node.state.views || {}).map(makeViewConfig);
     }
 

src/resolve/pathContext.ts

@@ -115,7 +115,7 @@ export default class ResolveContext {
    * @param locals: are the angular $injector-style locals to inject
    * @param options: options (TODO: document)
    */
-  invokeLater(state: IState, fn: IInjectable, locals: any, options: IOptions1 = {}): IPromise<any> {
+  invokeLater(state: IState, fn: IInjectable, locals: any = {}, options: IOptions1 = {}): IPromise<any> {
     let isolateCtx = this.isolateRootTo(state);
     let resolvables = this.getResolvablesForFn(fn, isolateCtx);
     trace.tracePathElementInvoke(state, fn, Object.keys(resolvables), extend({when: "Later"}, options));

src/resolve/resolveContext.ts

@@ -1,13 +1,24 @@
+import {map} from "../common/common";
 import ResolveContext from "../resolve/resolveContext";
 import {IState} from "../state/interface";
+import Resolvable from "./resolvable";
 
 export default class ResolveInjector {
   constructor(private _resolveContext: ResolveContext, private _state: IState) { }
-  /** Invokes an annotated function in the context of the toPath */
+
+  /** Returns a promise to invoke an annotated function in the resolve context */
   invokeLater(injectedFn, locals) {
     return this._resolveContext.invokeLater(this._state, injectedFn, locals);
   }
+
+  /** Invokes an annotated function in the resolve context */
   invokeNow(injectedFn, locals) {
     return this._resolveContext.invokeNow(this._state, injectedFn, locals);
   }
+
+  /** Returns the a promise for locals (realized Resolvables) that a function wants */
+  getLocals(injectedFn) {
+    const resolve = (r: Resolvable) => r.get(this._resolveContext);
+    return map(this._resolveContext.getResolvablesForFn(injectedFn), resolve);
+  }
 }

src/resolve/resolveInjector.ts

@@ -6,7 +6,6 @@ import {IRawParams, IParamsOrArray} from "../params/interface";
 import ParamSet from "../params/paramSet";
 
 import {IContextRef} from "../view/interface";
-import PathContext from "../resolve/pathContext";
 
 import TargetState from "./targetState";
 
@@ -18,10 +17,9 @@ export type IStateOrName = (string|IStateDeclaration|IState);
 /** Context obj, State-view definition, transition params */
 export interface IStateViewConfig {
   viewDeclarationObj:   IViewDeclaration; // A view block from a state config
-  rawViewName:          string; // The name of the view block
-  params:               any; // State params?
-  context:              IContextRef; // The context object reference this ViewConfig belongs to
-  locals:               PathContext; // The Resolve context (rename class!)
+  rawViewName:          string;           // The name of the view block
+  params:               any;              // State params?
+  context:              IContextRef;      // The context object reference this ViewConfig belongs to
 }
 
 /** View declaration inside state declaration */

src/state/interface.ts

@@ -1,6 +1,7 @@
 import {extend, defaults, copy, equalForKeys, forEach, ancestors, noop, isDefined, isObject, isString} from "../common/common";
 import Queue from "../common/queue";
 import {IServiceProviderFactory, IPromise} from "angular";
+import {annotateController} from "../common/angular1";
 
 import {IStateService, IState, IStateDeclaration, IStateOrName, IHrefOptions} from "./interface";
 import Glob from "./glob";
@@ -693,30 +694,45 @@ function $StateProvider(   $urlRouterProvider,   $urlMatcherFactoryProvider) {
       if (!transition.valid())
         return $q.reject(transition.error());
 
+      let stateHandler = new StateHandler($urlRouter, $view, $state, $stateParams, $q, transQueue, treeChangesQueue);
+      let hookBuilder = transition.hookBuilder();
 
       // TODO: Move the Transition instance hook registration to its own function
+      // Add hooks
       let enteringViews = transition.views("entering");
       let exitingViews = transition.views("exiting");
+      let treeChanges = transition.treeChanges();
 
       function $updateViews() {
         exitingViews.forEach((viewConfig: ViewConfig) => $view.reset(viewConfig));
         enteringViews.forEach((viewConfig: ViewConfig) => $view.registerStateViewConfig(viewConfig));
+        $view.sync();
       }
 
       function $loadAllEnteringViews() {
-        const loadView = (viewConfig: ViewConfig) => $view.load(viewConfig);
+        const loadView = (vc: ViewConfig) => {
+          let resolveInjector = treeChanges.to.nodeForState(vc.context.name).resolveInjector;
+          return $view.load(vc, resolveInjector);
+        };
         return $q.all(enteringViews.map(loadView)).then(noop);
       }
 
-      let stateHandler = new StateHandler($urlRouter, $view, $state, $stateParams, $q, transQueue, treeChangesQueue);
-      // Add hooks
-      // TODO: Move this to its own fn
-      let hookBuilder = transition.hookBuilder();
+      function $loadAllControllerLocals() {
+        const loadLocals = (vc: ViewConfig) => {
+          let deps = annotateController(vc.controller);
+          let resolveInjector = treeChanges.to.nodeForState(vc.context.name).resolveInjector;
+          function $loadControllerLocals() { }
+          $loadControllerLocals.$inject = deps;
+          return $q.all(resolveInjector.getLocals($loadControllerLocals)).then((locals) => vc.locals = locals);
+        };
+
+        let loadAllLocals = enteringViews.filter(vc => !!vc.controller).map(loadLocals);
+        return $q.all(loadAllLocals).then(noop);
+      }
 
       transition.onStart({}, hookBuilder.getEagerResolvePathFn(), { priority: 1000 });
       transition.onEnter({}, hookBuilder.getLazyResolveStateFn(), { priority: 1000 });
 
-      transition.onError({}, $transitions.defaultErrorHandler());
 
       let onEnterRegistration = (state) => transition.onEnter({to: state.name}, state.onEnter);
       transition.entering().filter(state => !!state.onEnter).forEach(onEnterRegistration);
@@ -727,10 +743,13 @@ function $StateProvider(   $urlRouterProvider,   $urlMatcherFactoryProvider) {
       let onExitRegistration = (state) => transition.onExit({from: state.name}, state.onExit);
       transition.exiting().filter(state => !!state.onExit).forEach(onExitRegistration);
 
-      if (enteringViews.length)
+      if (enteringViews.length) {
         transition.onStart({}, $loadAllEnteringViews);
+        transition.onFinish({}, $loadAllControllerLocals);
+      }
       if (exitingViews.length || enteringViews.length)
-        transition.onFinish({}, $updateViews);
+        transition.onSuccess({}, $updateViews);
+      transition.onError({}, $transitions.defaultErrorHandler());
 
       // Commit global state data as the last hook in the transition (using a very low priority onFinish hook)
       function $commitGlobalData() { stateHandler.transitionSuccess(transition.treeChanges(), transition); }

src/state/state.ts

@@ -13,10 +13,10 @@ import Path from "./path/path"
 import PathFactory from "./path/pathFactory"
 var path = { Path, PathFactory }
 
-import PathContext from "./resolve/pathContext"
+import ResolveInjector from "./resolve/resolveInjector"
 import Resolvable from "./resolve/resolvable"
 import ResolveContext from "./resolve/resolveContext"
-var resolve = { Path, PathContext, Resolvable, ResolveContext };
+var resolve = { Path, ResolveInjector, Resolvable, ResolveContext };
 
 import Glob from "./state/glob";
 import * as stateInterface from "./state/interface";

src/ui-router.ts

@@ -1,5 +1,5 @@
 /// <reference path='../../typings/angularjs/angular.d.ts' />
-import {isDefined, isFunction} from "../common/common";
+import {isDefined, isFunction, prop} from "../common/common";
 
 /**
  * @ngdoc object
@@ -34,17 +34,17 @@ function $TemplateFactory(  $http,   $templateCache) {
    * @param {Function} config.templateProvider function to invoke via 
    * {@link ui.router.util.$templateFactory#fromProvider fromProvider}.
    * @param {object} params  Parameters to pass to the template function.
-   * @param {Function} locals Function to which an injectable function may be passed.
-   * via a `templateProvider`. Defaults to `{ params: params }`.
+   * @param {Function} injectFn Function to which an injectable function may be passed.
+   *        If templateProvider is defined, this injectFn will be used to invoke it.
    *
    * @return {string|object}  The template html as a string, or a promise for 
    * that string,or `null` if no template is configured.
    */
-  this.fromConfig = function (config, params, locals) {
+  this.fromConfig = function (config, params, injectFn) {
     return (
       isDefined(config.template) ? this.fromString(config.template, params) :
       isDefined(config.templateUrl) ? this.fromUrl(config.templateUrl, params) :
-      isDefined(config.templateProvider) ? this.fromProvider(config.templateProvider, params, locals) :
+      isDefined(config.templateProvider) ? this.fromProvider(config.templateProvider, params, injectFn) :
       null
     );
   };
@@ -85,9 +85,7 @@ function $TemplateFactory(  $http,   $templateCache) {
   this.fromUrl = function (url, params) {
     if (isFunction(url)) url = url(params);
     if (url == null) return null;
-    else return $http
-        .get(url, { cache: $templateCache, headers: { Accept: 'text/html' }})
-        .then(function(response) { return response.data; });
+    return $http.get(url, { cache: $templateCache, headers: { Accept: 'text/html' }}).then(prop("data"));
   };
 
   /**
@@ -100,13 +98,12 @@ function $TemplateFactory(  $http,   $templateCache) {
    *
    * @param {Function} provider Function to invoke via `locals`
    * @param {Object} params Parameters for the template.
-   * @param {Object} locals Locals to pass to `invoke`. Defaults to 
-   * `{ params: params }`.
+   * @param {Function} injectFn a function used to invoke the template provider
    * @return {string|Promise.<string>} The template html as a string, or a promise 
    * for that string.
    */
-  this.fromProvider = function (provider, params, locals) {
-    return locals(provider, { $stateParams: params });
+  this.fromProvider = function (provider, params, injectFn) {
+    return injectFn(provider, { $stateParams: params });
   };
 }
 

src/view/templateFactory.ts

@@ -1,10 +1,10 @@
 "use strict";
 /// <reference path='../../typings/angularjs/angular.d.ts' />
-import {IPromise} from "angular";
-import {isInjectable, isString, defaults, extend, curry, addPairToObj, prop, pick, removeFrom, isEq, val, TypedMap} from "../common/common";
+import {isInjectable, isString, extend, curry, addPairToObj, prop, pick, removeFrom, isEq, val, TypedMap} from "../common/common";
 import trace from "../common/trace";
 import {IStateViewConfig, IViewDeclaration} from "../state/interface";
 import {IUiViewData, IContextRef} from "./interface";
+import ResolveInjector from "../resolve/resolveInjector";
 
 /**
  * Given a raw view name from a views: config, returns a normalized target viewName and contextAnchor
@@ -43,10 +43,6 @@ function normalizeUiViewTarget(rawViewName = "") {
  */
 export class ViewConfig {
   viewDeclarationObj: IViewDeclaration;
-  promises: {
-    template: IPromise<string>,
-    controller: IPromise<Function>
-  };
 
   template: string;
   controller: Function;
@@ -86,9 +82,8 @@ export class ViewConfig {
     return !!(viewDef.template || viewDef.templateUrl || viewDef.templateProvider);
   }
 
-  getTemplate($factory) {
-    let locals = this.locals, viewDef = this.viewDeclarationObj;
-    return $factory.fromConfig(viewDef, this.params, locals.invoke.bind(locals));
+  getTemplate($factory, injector: ResolveInjector) {
+    return $factory.fromConfig(this.viewDeclarationObj, this.params, injector.invokeLater.bind(injector));
   }
 
   /**
@@ -97,10 +92,10 @@ export class ViewConfig {
    *
    * @returns {Function|Promise.<Function>} Returns a controller, or a promise that resolves to a controller.
    */
-  getController() {
+  getController(injector: ResolveInjector) {
     //* @param {Object} locals A context object from transition.context() to invoke a function in the correct context
     let provider = this.viewDeclarationObj.controllerProvider;
-    return isInjectable(provider) ? this.locals.invoke(provider) : this.viewDeclarationObj.controller;
+    return isInjectable(provider) ? injector.invokeLater(provider, {}) : this.viewDeclarationObj.controller;
   }
 }
 
@@ -143,50 +138,16 @@ function $View(   $rootScope,   $templateFactory,   $q,   $timeout) {
    *    `$templateFactory.fromConfig()`, including `params` and `locals`.
    * @return {Promise.<string>} Returns a promise that resolves to the value of the template loaded.
    */
-  this.load = function load (viewConfig: ViewConfig, options) {
-    options = defaults(options, {
-      context:            null,
-      parent:             null,
-      notify:             true,
-      async:              true,
-      params:             {}
-    });
-
+  this.load = function load (viewConfig: ViewConfig, injector: ResolveInjector) {
     if (!viewConfig.hasTemplate())
       throw new Error(`No template configuration specified for '${viewConfig.uiViewName}@${viewConfig.uiViewContextAnchor}'`);
 
-    if (options.notify) {
-      /**
-       * @ngdoc event
-       * @name ui.router.state.$state#$viewContentLoading
-       * @eventOf ui.router.state.$view
-       * @eventType broadcast on root scope
-       * @description
-       *
-       * Fired once the view **begins loading**, *before* the DOM is rendered.
-       *
-       * @param {Object} event Event object.
-       * @param {Object} viewConfig The view config properties (template, controller, etc).
-       *
-       * @example
-       *
-       * <pre>
-       * $scope.$on('$viewContentLoading', function(event, viewConfig) {
-       *   // Access to all the view config properties.
-       *   // and one special property 'targetView'
-       *   // viewConfig.targetView
-       * });
-       * </pre>
-       */
-      $rootScope.$broadcast('$viewContentLoading', extend({ targetView: name }, options));
-    }
-
-    viewConfig.promises = {
-      template: $q.when(viewConfig.getTemplate($templateFactory)),
-      controller: $q.when(viewConfig.getController())
+    let promises = {
+      template: $q.when(viewConfig.getTemplate($templateFactory, injector)),
+      controller: $q.when(viewConfig.getController(injector))
     };
 
-    return $q.all(viewConfig.promises).then((results) => {
+    return $q.all(promises).then((results) => {
       trace.traceViewServiceEvent("Loaded", viewConfig);
       return extend(viewConfig, results);
     });