BC-BREAK: Transition Hooks are no longer injected (onBefore/onStart/onExit/onRetain/onEnter/onFinish/onSuccess/onError)

Previously, a hook like `['$state', ($state) => $state.target('foo')]` would get `$state` injected.
Now, all hooks receive three parameters:
- transition: the current Transition
- injector: the $injector (ng1) or Injector (ng2) or fake injector (non-angular)
- state: for onEnter/onRetain/onExit hooks only, the State which the hook is being run for. This value will be null for onBefore/onStart/onFinish/onSuccess/onError hooks.

Refactor your hooks
from: `['$state', ($state) => $state.target('foo')]`
to: `(trans, injector) => injector.get('$state').target('foo')`

feat(onEnter): Hooks receive 3 args: (Transition, Injector, State) and are not injectable
feat(onEnter): state declaration onEnter hooks are still injected

Author: christopherthielen

package.json

@@ -11,6 +11,7 @@
 
     "test:ng1": "karma start config/karma.ng15.js",
     "test:ng1:debug": "karma start config/karma.ng15.js --singleRun=false --browsers=Chrome --autoWatch=true --autoWatchInterval=1",
+    "test:ng1:watch": "node_modules/watch/cli.js 'npm run test:ng1' src test",
 
     "test:ng12": "karma start config/karma.ng12.js",
     "test:ng13": "karma start config/karma.ng13.js",

src/common/strings.ts

@@ -68,7 +68,7 @@ export function fnToString(fn: IInjectable) {
 const isTransitionRejectionPromise = Rejection.isTransitionRejectionPromise;
 
 let stringifyPatternFn = null;
-let stringifyPattern = function(val) {
+let stringifyPattern = function(value) {
   stringifyPatternFn = stringifyPatternFn || pattern([
     [not(isDefined),                  val("undefined")],
     [isNull,                          val("null")],
@@ -81,7 +81,7 @@ let stringifyPattern = function(val) {
     [val(true),                       identity]
   ]);
 
-  return stringifyPatternFn(val);
+  return stringifyPatternFn(value);
 };
 
 export function stringify(o: Object) {

src/globals.ts

@@ -50,7 +50,7 @@ export class UIRouterGlobals {
   successfulTransitions = new Queue<Transition>([], 1);
 
   constructor(transitionService: TransitionService) {
-    const beforeNewTransition = ($transition$) => {
+    const beforeNewTransition = ($transition$: Transition) => {
 
       this.transition = $transition$;
       this.transitionHistory.enqueue($transition$);
@@ -70,6 +70,6 @@ export class UIRouterGlobals {
 
     };
 
-    transitionService.onBefore({}, ['$transition$', beforeNewTransition]);
+    transitionService.onBefore({}, beforeNewTransition);
   }
 }

src/ng1.ts

@@ -7,8 +7,8 @@
 export * from "./core";
 
 export * from "./ng1/services";
-export * from "./ng1/viewsBuilder";
-export * from "./ng1/resolvesBuilder";
+export * from "./ng1/statebuilders/views";
+export * from "./ng1/statebuilders/resolve";
 
 import "./ng1/stateDirectives";
 import "./ng1/stateFilters";

src/ng1/services.ts

@@ -20,15 +20,17 @@ import {Resolvable} from "../resolve/resolvable";
 import {ResolveContext} from "../resolve/resolveContext";
 import {State} from "../state/stateObject";
 import {trace} from "../common/trace";
-import {ng1ViewsBuilder, ng1ViewConfigFactory, Ng1ViewConfig} from "./viewsBuilder";
+import {ng1ViewsBuilder, ng1ViewConfigFactory, Ng1ViewConfig} from "./statebuilders/views";
 import {TemplateFactory} from "./templateFactory";
-import {ng1ResolveBuilder} from "./resolvesBuilder";
+import {ng1ResolveBuilder} from "./statebuilders/resolve";
 import {StateParams} from "../params/stateParams";
 import {TransitionService} from "../transition/transitionService";
 import {StateService} from "../state/stateService";
 import {StateProvider} from "../state/state";
 import {UrlRouterProvider, UrlRouter} from "../url/urlRouter";
 import {UrlMatcherFactory} from "../url/urlMatcherFactory";
+import {Transition} from "../transition/transition";
+import {getStateHookBuilder} from "./statebuilders/onEnterExitRetain";
 
 /** @hidden */
 let app = angular.module("ui.router.angular1", []);
@@ -166,9 +168,12 @@ function ng1UIRouter($locationProvider) {
   // Create a new instance of the Router when the ng1UIRouterProvider is initialized
   router = new UIRouter();
 
-  // Apply ng1 `views` builder to the StateBuilder
+  // Apply ng1 specific StateBuilder code for `views`, `resolve`, and `onExit/Retain/Enter` properties
   router.stateRegistry.decorator("views", ng1ViewsBuilder);
   router.stateRegistry.decorator("resolve", ng1ResolveBuilder);
+  router.stateRegistry.decorator("onExit", getStateHookBuilder("onExit"));
+  router.stateRegistry.decorator("onRetain", getStateHookBuilder("onRetain"));
+  router.stateRegistry.decorator("onEnter", getStateHookBuilder("onEnter"));
 
   router.viewService.viewConfigFactory('ng1', ng1ViewConfigFactory);
 
@@ -279,8 +284,8 @@ angular.module('ui.router.state').factory('$stateParams', ['ng1UIRouter', (ng1UI
 
 // $transitions service and $transitionsProvider
 function getTransitionsProvider() {
-  loadAllControllerLocals.$inject = ['$transition$'];
-  function loadAllControllerLocals($transition$) {
+  // TODO: check if we can remove loadAllControllerLocals.  Shouldn't be necessary without JIT resolve policy
+  function loadAllControllerLocals($transition$: Transition) {
     const loadLocals = (vc: Ng1ViewConfig) => {
       let node = (<Node> find($transition$.treeChanges().to, propEq('state', vc.viewDecl.$context)));
       // Temporary fix; This whole callback should be nuked when fixing #2662
@@ -297,7 +302,7 @@ function getTransitionsProvider() {
           .then(() => vc.locals = map(resolvables, res => res.data));
     };
 
-    let loadAllLocals = $transition$.views("entering").filter(vc => !!vc.controller).map(loadLocals);
+    let loadAllLocals = $transition$.views("entering").filter(vc => !!(<Ng1ViewConfig>vc).controller).map(loadLocals);
     return services.$q.all(loadAllLocals).then(noop);
   }
   router.transitionService.onFinish({}, loadAllControllerLocals);

src/ng1/stateDirectives.ts

@@ -334,9 +334,7 @@ function $StateRefActiveDirective($state, $stateParams, $interpolate, $transitio
       };
 
       $scope.$on('$stateChangeSuccess', update);
-      let updateAfterTransition = ['$transition$', function($transition$) { $transition$.promise.then(update); }];
-      let deregisterFn = $transitions.onStart({}, updateAfterTransition);
-      $scope.$on('$destroy', deregisterFn);
+      $scope.$on('$destroy', $transitions.onStart({}, (trans) => trans.promise.then(update) && null));
 
       function addState(stateName, stateParams, activeClass) {
         var state = $state.get(stateName, stateContext($element));

src/ng1/stateEvents.ts

@@ -153,11 +153,15 @@ var $stateNotFound;
     return memo;
   }
 
-  stateChangeStartHandler.$inject = ['$transition$', '$stateEvents', '$rootScope', '$state', '$urlRouter'];
-  function stateChangeStartHandler($transition$: Transition, $stateEvents, $rootScope, $state, $urlRouter) {
+  function stateChangeStartHandler($transition$: Transition, $injector) {
     if (!$transition$.options().notify || !$transition$.valid() || $transition$.ignored())
       return;
 
+    let $stateEvents = $injector.get('$stateEvents');
+    let $rootScope = $injector.get('$rootScope');
+    let $state = $injector.get('$state');
+    let $urlRouter = $injector.get('$urlRouter');
+
     let enabledEvents = $stateEvents.provider.enabled();
 
 

src/ng1/statebuilders/onEnterExitRetain.ts

@@ -0,0 +1,23 @@
+/** @module ng1 */ /** */
+import {State} from "../../state/stateObject";
+import {TransitionStateHookFn, HookResult} from "../../transition/interface";
+import {Transition} from "../../transition/transition";
+import IInjectorService = angular.auto.IInjectorService;
+import {services} from "../../common/coreservices";
+
+/**
+ * This is a [[StateBuilder.builder]] function for angular1 `onEnter`, `onExit`,
+ * `onRetain` callback hooks on a [[Ng1StateDeclaration]].
+ *
+ * When the [[StateBuilder]] builds a [[State]] object from a raw [[StateDeclaration]], this builder
+ * ensures that those hooks are injectable for angular-ui-router (ng1).
+ */
+export const getStateHookBuilder = (hookName) =>
+function stateHookBuilder(state: State, parentFn): TransitionStateHookFn {
+  let hook = state[hookName];
+  if (!hook) return;
+  
+  return function decoratedNg1Hook(trans: Transition, inj: IInjectorService): HookResult {
+    services.$injector.invoke(hook, this, trans.resolves());
+  }
+};

src/ng1/resolvesBuilder.ts renamed to src/ng1/statebuilders/resolve.ts

@@ -1,7 +1,7 @@
 /** @module ng1 */ /** */
-import {State} from "../state/stateObject";
-import {forEach} from "../common/common";
-import {isString} from "../common/predicates";
+import {State} from "../../state/stateObject";
+import {forEach} from "../../common/common";
+import {isString} from "../../common/predicates";
 
 /**
  * This is a [[StateBuilder.builder]] function for angular1 `resolve:` block on a [[Ng1StateDeclaration]].

src/ng1/viewsBuilder.ts renamed to src/ng1/statebuilders/views.ts

@@ -1,16 +1,16 @@
 /** @module ng1 */ /** */
-import {State} from "../state/stateObject";
-import {pick, forEach, anyTrueR, unnestR} from "../common/common";
-import {kebobString} from "../common/strings";
-import {ViewConfig} from "../view/interface";
-import {Ng1ViewDeclaration} from "./interface";
-import {ViewService} from "../view/view";
-import {isInjectable, isDefined, isString, isObject} from "../common/predicates";
-import {services} from "../common/coreservices";
-import {trace} from "../common/trace";
-import {Node} from "../path/node";
-import {TemplateFactory} from "./templateFactory";
-import {ResolveContext} from "../resolve/resolveContext";
+import {State} from "../../state/stateObject";
+import {pick, forEach, anyTrueR, unnestR} from "../../common/common";
+import {kebobString} from "../../common/strings";
+import {ViewConfig} from "../../view/interface";
+import {Ng1ViewDeclaration} from "../interface";
+import {ViewService} from "../../view/view";
+import {isInjectable, isDefined, isString, isObject} from "../../common/predicates";
+import {services} from "../../common/coreservices";
+import {trace} from "../../common/trace";
+import {Node} from "../../path/node";
+import {TemplateFactory} from "../templateFactory";
+import {ResolveContext} from "../../resolve/resolveContext";
 
 export const ng1ViewConfigFactory = (node, view) => new Ng1ViewConfig(node, view);
 

src/ng1/viewDirective.ts

@@ -4,8 +4,7 @@ import {extend, map, unnestR, filter} from "../common/common";
 import {isDefined, isFunction, isString} from "../common/predicates";
 import {trace} from "../common/trace";
 import {ActiveUIView} from "../view/interface";
-import {Ng1ViewConfig} from "./viewsBuilder";
-import {RejectType} from "../transition/rejectFactory";
+import {Ng1ViewConfig} from "./statebuilders/views";
 import {TransitionService} from "../transition/transitionService";
 import {parse} from "../common/hof";
 import {ResolveContext} from "../resolve/resolveContext";
@@ -418,13 +417,7 @@ function registerControllerCallbacks($transitions: TransitionService, controller
         controllerInstance.uiOnParamsChanged(filter(toParams, (val, key) => changedKeys.indexOf(key) !== -1), $transition$);
       }
     };
-    $scope.$on('$destroy', $transitions.onSuccess({}, ['$transition$', paramsUpdated]), hookOptions);
-
-    // Fire callback on any IGNORED transition
-    let onDynamic = ($error$, $transition$) => {
-      if ($error$.type === RejectType.IGNORED) paramsUpdated($transition$);
-    };
-    $scope.$on('$destroy', $transitions.onError({}, ['$error$', '$transition$', onDynamic]), hookOptions);
+    $scope.$on('$destroy', $transitions.onSuccess({}, paramsUpdated, hookOptions));
   }
 
   // Add component-level hook for uiCanExit

src/ng2/uiRouterConfig.ts

@@ -47,9 +47,9 @@ import {UIRouter} from "../router";
  *
  * // hooks.ts
  * export function registerAuthHook(transitionService: TransitionService) {
- *   let requireAuthentication = ($state, AuthService) {
- *     if (!AuthService.isAuthenticated()) {
- *       return $state.target('login');
+ *   let requireAuthentication = (transition: Transition, injector: Injector) {
+ *     if (!Injector.get(AuthService).isAuthenticated()) {
+ *       return Injector.get(StateService).target('login');
  *     }
  *   }
  *   transitionService.onBefore({ to: (state) => state.requiresAuth }, requireAuthentication);

src/resolve/resolveContext.ts

@@ -173,6 +173,19 @@ export class ResolveContext {
     let resolvedLocals = map(resolvables, prop("data"));
     return services.$injector.invoke(<Function> fn, options.bind || null, extend({}, locals, resolvedLocals));
   }
+
+  injector(): { get(any): any } {
+    
+    let get = (token: any) => {
+      var resolvables = this.getResolvables();
+      if (resolvables.hasOwnProperty(token)) {
+        return resolvables[token].data;
+      }
+      return services.$injector.get(token);
+    };
+    
+    return {get};
+  }
 }
 
 /**

src/state/hooks/enterExitHooks.ts

@@ -15,17 +15,20 @@ export class EnterExitHooks {
   }
 
   registerOnEnterHooks() {
-    this.transition.entering().filter(state => !!state.onEnter)
-        .forEach(state => this.transition.onEnter({entering: state.name}, state.onEnter));
+    this.transition.entering().map(x => x.$$state()).filter(state => !!state.onEnter)
+        .forEach(state =>
+            this.transition.onEnter({entering: state.name}, state.onEnter));
   }
 
   registerOnRetainHooks() {
-    this.transition.retained().filter(state => !!state.onRetain)
-        .forEach(state => this.transition.onRetain({retained: state.name}, state.onRetain));
+    this.transition.retained().map(x => x.$$state()).filter(state => !!state.onRetain)
+        .forEach(state =>
+            this.transition.onRetain({retained: state.name}, state.onRetain));
   }
 
   registerOnExitHooks() {
-    this.transition.exiting().filter(state => !!state.onExit)
-        .forEach(state => this.transition.onExit({exiting: state.name}, state.onExit));
+    this.transition.exiting().map(x => x.$$state()).filter(state => !!state.onExit)
+        .forEach(state =>
+            this.transition.onExit({exiting: state.name}, state.onExit));
   }
 }

src/state/hooks/resolveHooks.ts

@@ -7,6 +7,7 @@ import {ResolvePolicy} from "../../resolve/interface";
 import {Transition} from "../../transition/transition";
 import {val} from "../../common/hof";
 import {Resolvable} from "../../resolve/resolvable";
+import {State} from "../stateObject";
 
 
 let LAZY = ResolvePolicy[ResolvePolicy.LAZY];
@@ -25,23 +26,22 @@ export class ResolveHooks {
     let treeChanges = this.transition.treeChanges();
 
     /** a function which resolves any EAGER Resolvables for a Path */
-    (<any> $eagerResolvePath).$inject = ['$transition$'];
-    function $eagerResolvePath($transition$) {
+    function $eagerResolvePath($transition$: Transition) {
       return tail(<any[]> treeChanges.to).resolveContext.resolvePath(extend({ transition: $transition$ }, { resolvePolicy: EAGER }));
     }
 
     /** Returns a function which pre-resolves any LAZY Resolvables for a Node in a Path */
-    (<any> $lazyResolveEnteringState).$inject = ['$state$', '$transition$'];
-    function $lazyResolveEnteringState($state$, $transition$) {
-      let node = find(<any[]> treeChanges.entering, propEq('state', $state$));
+    function $lazyResolveEnteringState(transition: Transition, injector, state: State) {
+      let node = find(<any[]> treeChanges.entering, propEq('state', state));
 
       // A new Resolvable contains all the resolved data in this context as a single object, for injection as `$resolve$`
       let context = node.resolveContext;
       let $resolve$ = new Resolvable("$resolve$", () => map(context.getResolvables(), (r: Resolvable) => r.data));
-      var options = extend({transition: $transition$}, { resolvePolicy: LAZY });
+      var options = extend({ transition: transition }, { resolvePolicy: LAZY });
 
       // Resolve all the LAZY resolves, then resolve the `$resolve$` object, then add `$resolve$` to the context
-      return context.resolvePathElement(node.state, options)
+      // return context.resolvePathElement(node.state, options)
+      return context.resolvePath(options)
           .then(() => $resolve$.resolveResolvable(context))
           .then(() => context.addResolvables([$resolve$], node.state));
     }