@angular-wave/angular.ts 0.0.28 → 0.0.30

package/src/router/directives/view-directive.js

@@ -19,7 +19,7 @@ import { jqLite } from "../../jqLite";
  *   The ui-view can be targeted in a View using the name ([[Ng1StateDeclaration.views]]).
  *
  * - `autoscroll`: an expression. When it evaluates to true, the `ui-view` will be scrolled into view when it is activated.
- *   Uses [[$uiViewScroll]] to do the scrolling.
+ *   Uses [[$ngViewScroll]] to do the scrolling.
  *
  * - `onload`: Expression to evaluate whenever the view updates.
  *
@@ -133,13 +133,13 @@ import { jqLite } from "../../jqLite";
  * });
  * ```
  */
-export let uiView = [
+export let ngView = [
   "$view",
   "$animate",
-  "$uiViewScroll",
+  "$ngViewScroll",
   "$interpolate",
   "$q",
-  function $ViewDirective($view, $animate, $uiViewScroll, $interpolate, $q) {
+  function $ViewDirective($view, $animate, $ngViewScroll, $interpolate, $q) {
     function getRenderer() {
       return {
         enter: function (element, target, cb) {
@@ -155,7 +155,7 @@ export let uiView = [
     }
     const rootData = {
       $cfg: { viewDecl: { $context: $view._pluginapi._rootViewContext() } },
-      $uiView: {},
+      $ngView: {},
     };
     const directive = {
       count: 0,
@@ -168,17 +168,17 @@ export let uiView = [
           const onloadExp = attrs["onload"] || "",
             autoScrollExp = attrs["autoscroll"],
             renderer = getRenderer(),
-            inherited = $element.inheritedData("$uiView") || rootData,
+            inherited = $element.inheritedData("$ngView") || rootData,
             name =
-              $interpolate(attrs["uiView"] || attrs["name"] || "")(scope) ||
+              $interpolate(attrs["ngView"] || attrs["name"] || "")(scope) ||
               "$default";
           let previousEl, currentEl, currentScope, viewConfig;
           const activeUIView = {
             $type: "ng1",
             id: directive.count++, // Global sequential ID for ui-view tags added to DOM
             name: name, // ui-view name (<div ui-view="name"></div>
-            fqn: inherited.$uiView.fqn
-              ? inherited.$uiView.fqn + "." + name
+            fqn: inherited.$ngView.fqn
+              ? inherited.$ngView.fqn + "." + name
               : name, // fully qualified name, describes location in DOM
             config: null, // The ViewConfig loaded (from a state.views definition)
             configUpdated: configUpdatedCallback, // Called when the matching ViewConfig changes
@@ -189,7 +189,7 @@ export let uiView = [
               );
               // Allow <ui-view name="foo"><ui-view name="bar"></ui-view></ui-view>
               // See https://github.com/angular-ui/ui-router/issues/3355
-              const fromParentTag = parse("$uiView.creationContext")(inherited);
+              const fromParentTag = parse("$ngView.creationContext")(inherited);
               return fromParentTagConfig || fromParentTag;
             },
           };
@@ -204,7 +204,7 @@ export let uiView = [
             viewConfig = config;
             updateView(config);
           }
-          $element.data("$uiView", { $uiView: activeUIView });
+          $element.data("$ngView", { $ngView: activeUIView });
           updateView();
           const unregister = $view.registerUIView(activeUIView);
           scope.$on("$destroy", function () {
@@ -215,7 +215,7 @@ export let uiView = [
             if (previousEl) {
               trace.traceUIViewEvent(
                 "Removing (previous) el",
-                previousEl.data("$uiView"),
+                previousEl.data("$ngView"),
               );
               previousEl.remove();
               previousEl = null;
@@ -226,7 +226,7 @@ export let uiView = [
               currentScope = null;
             }
             if (currentEl) {
-              const _viewData = currentEl.data("$uiViewAnim");
+              const _viewData = currentEl.data("$ngViewAnim");
               trace.traceUIViewEvent("Animate out", _viewData);
               renderer.leave(currentEl, function () {
                 _viewData.$$animLeave.resolve();
@@ -240,11 +240,11 @@ export let uiView = [
             const newScope = scope.$new();
             const animEnter = $q.defer(),
               animLeave = $q.defer();
-            const $uiViewData = {
+            const $ngViewData = {
               $cfg: config,
-              $uiView: activeUIView,
+              $ngView: activeUIView,
             };
-            const $uiViewAnim = {
+            const $ngViewAnim = {
               $animEnter: animEnter.promise,
               $animLeave: animLeave.promise,
               $$animLeave: animLeave,
@@ -263,8 +263,8 @@ export let uiView = [
              */
             newScope.$emit("$viewContentLoading", name);
             const cloned = $transclude(newScope, function (clone) {
-              clone.data("$uiViewAnim", $uiViewAnim);
-              clone.data("$uiView", $uiViewData);
+              clone.data("$ngViewAnim", $ngViewAnim);
+              clone.data("$ngView", $ngViewData);
               renderer.enter(clone, $element, function () {
                 animEnter.resolve();
                 if (currentScope)
@@ -273,7 +273,7 @@ export let uiView = [
                   (isDefined(autoScrollExp) && !autoScrollExp) ||
                   scope.$eval(autoScrollExp)
                 ) {
-                  $uiViewScroll(clone);
+                  $ngViewScroll(clone);
                 }
               });
               cleanupLastView();
@@ -322,7 +322,7 @@ export function $ViewDirectiveFill(
       const initial = tElement.html();
       tElement.empty();
       return function (scope, $element) {
-        const data = $element.data("$uiView");
+        const data = $element.data("$ngView");
         if (!data) {
           $element.html(initial);
           $compile($element[0].contentDocument || $element[0].childNodes)(
@@ -333,7 +333,7 @@ export function $ViewDirectiveFill(
         const cfg = data.$cfg || { viewDecl: {}, getTemplate: () => {} };
         const resolveCtx = cfg.path && new ResolveContext(cfg.path);
         $element.html(cfg.getTemplate($element, resolveCtx) || initial);
-        trace.traceUIViewFill(data.$uiView, $element.html());
+        trace.traceUIViewFill(data.$ngView, $element.html());
         const link = $compile(
           $element[0].contentDocument || $element[0].childNodes,
         );

package/src/router/hooks/update-globals.js

@@ -1,6 +1,6 @@
 import { copy } from "../../shared/common";
 /**
- * A [[TransitionHookFn]] which updates global UI-Router state
+ * A [[TransitionHookFn]] which updates global ng-router state
  *
  * Registered using `transitionService.onBefore({}, updateGlobalState);`
  *

package/src/router/index.js

@@ -11,15 +11,15 @@ import { trace } from "./common/trace";
 import { $ViewScrollProvider } from "./view-scroll";
 import { $IsStateFilter, $IncludedByStateFilter } from "./state-filters";
 import {
-  uiSrefActiveDirective,
-  uiStateDirective,
-  uiSrefDirective,
+  ngSrefActiveDirective,
+  ngStateDirective,
+  ngSrefDirective,
 } from "./directives/state-directives";
-import { uiView, $ViewDirectiveFill } from "./directives/view-directive";
+import { ngView, $ViewDirectiveFill } from "./directives/view-directive";
 
 export function initRouter() {
   window.angular
-    .module("ui.router", ["ng"])
+    .module("ng.router", ["ng"])
     .provider("$router", $routerProvider)
     .provider("$urlService", getProviderFor("urlService"))
     .provider("$urlMatcherFactory", [
@@ -33,7 +33,7 @@ export function initRouter() {
     .provider("$routerGlobals", getProviderFor("globals"))
     .provider("$transitions", getProviderFor("transitionService"))
     .provider("$state", ["$routerProvider", getStateProvider])
-    .provider("$uiViewScroll", $ViewScrollProvider)
+    .provider("$ngViewScroll", $ViewScrollProvider)
     .factory("$stateParams", [
       "$router",
       function ($router) {
@@ -46,12 +46,12 @@ export function initRouter() {
     .value("$trace", trace)
     .filter("isState", $IsStateFilter)
     .filter("includedByState", $IncludedByStateFilter)
-    .directive("uiSref", uiSrefDirective)
-    .directive("uiSrefActive", uiSrefActiveDirective)
-    .directive("uiSrefActiveEq", uiSrefActiveDirective)
-    .directive("uiState", uiStateDirective)
-    .directive("uiView", uiView)
-    .directive("uiView", $ViewDirectiveFill)
+    .directive("ngSref", ngSrefDirective)
+    .directive("ngSrefActive", ngSrefActiveDirective)
+    .directive("ngSrefActiveEq", ngSrefActiveDirective)
+    .directive("ngState", ngStateDirective)
+    .directive("ngView", ngView)
+    .directive("ngView", $ViewDirectiveFill)
 
     .run(watchDigests)
     .run(runBlock);

package/src/router/injectables.js

@@ -61,7 +61,7 @@
  */
 let $stateParams;
 /**
- * Global UI-Router variables
+ * Global ng-router variables
  *
  * The router global state as a **Service Object** (injectable during runtime).
  *
@@ -69,23 +69,23 @@ let $stateParams;
  */
 let $routerGlobals;
 /**
- * The UI-Router instance
+ * The ng-router instance
  *
  * The [[UIRouter]] singleton (the router instance) as a **Service Object** (injectable during runtime).
  *
- * This object is the UI-Router singleton instance, created by angular dependency injection during application bootstrap.
- * It has references to the other UI-Router services
+ * This object is the ng-router singleton instance, created by angular dependency injection during application bootstrap.
+ * It has references to the other ng-router services
  *
  * #### Note: This object is also exposed as [[$routerProvider]] for injection during angular config time.
  */
 let $router;
 /**
- * The UI-Router instance
+ * The ng-router instance
  *
  * The [[UIRouter]] singleton (the router instance) as a **Provider Object** (injectable during config phase).
  *
- * This object is the UI-Router singleton instance, created by angular dependency injection during application bootstrap.
- * It has references to the other UI-Router services
+ * This object is the ng-router singleton instance, created by angular dependency injection during application bootstrap.
+ * It has references to the other ng-router services
  *
  * #### Note: This object is also exposed as [[$router]] for injection during runtime.
  */
@@ -193,9 +193,9 @@ let $stateRegistryProvider;
  * The [[UIViewScrollProvider]] as a **Provider Object** (injectable during config time).
  *
  * This angular service exposes the [[UIViewScrollProvider]] singleton and is
- * used to disable UI-Router's scroll behavior.
+ * used to disable ng-router's scroll behavior.
  */
-let $uiViewScrollProvider;
+let $ngViewScrollProvider;
 /**
  * The View Scroll function
  *
@@ -207,9 +207,9 @@ let $uiViewScrollProvider;
  * If you prefer to rely on `$anchorScroll` to scroll the view to the anchor,
  * this can be enabled by calling [[UIViewScrollProvider.useAnchorScroll]].
  *
- * Note: this function is used by the [[directives.uiView]] when the `autoscroll` expression evaluates to true.
+ * Note: this function is used by the [[directives.ngView]] when the `autoscroll` expression evaluates to true.
  */
-let $uiViewScroll;
+let $ngViewScroll;
 /**
  * The StateProvider
  *

package/src/router/resolve/resolve-context.js

@@ -26,7 +26,7 @@ export const NATIVE_INJECTOR_TOKEN = "Native Injector";
 /**
  * Encapsulates Dependency Injection for a path of nodes
  *
- * UI-Router states are organized as a tree.
+ * ng-router states are organized as a tree.
  * A nested state has a path of ancestors to the root of the tree.
  * When a state is being activated, each element in the path is wrapped as a [[PathNode]].
  * A `PathNode` is a stateful object that holds things like parameters and resolvables for the state being activated.

package/src/router/router.js

@@ -20,7 +20,7 @@ import { registerRedirectToHook } from "./hooks/redirect-to";
 let routerId = 0;
 
 /**
- * An instance of UI-Router.
+ * An instance of ng-router.
  * @class
  *
  * This object contains references to service APIs which define your application's routing behavior.
@@ -47,17 +47,13 @@ export class UIRouter {
 
     /** @type {TransitionService}  A service that exposes global Transition Hooks */
     this.transitionService = new TransitionService(
-      this,
       this.globals,
       this.viewService,
     );
 
     /** @type {StateService} Provides services related to states */
-    this.stateService = new StateService(
-      this, // access to StateRegistry and UrlRouter
-      this.globals,
-      this.transitionService,
-    );
+    this.stateService = new StateService(this.globals, this.transitionService);
+
     /** Provides services related to the URL */
     let urlRuleFactory = new UrlRuleFactory(
       this.urlMatcherFactory,
@@ -96,6 +92,11 @@ export class UIRouter {
       this.urlService.rules,
     );
 
+    // Manual wiring ideally we would want to do this at runtime
+    this.stateService.stateRegistry = this.stateRegistry;
+    this.stateService.urlRouter = this.urlRouter;
+    this.stateService.urlService = this.urlService; // <-- NOTE: circular dependency
+
     // Lazy load state trees
     this.transitionService._deregisterHookFns.lazyLoad = registerLazyLoadHook(
       this.transitionService,
@@ -117,78 +118,8 @@ export class UIRouter {
 
     this.transitionService._deregisterHookFns.activateViews =
       registerActivateViews(this.transitionService, this.viewService);
-
-    /** @internal plugin instances are registered here */
-    this._plugins = {};
     this.viewService._pluginapi._rootViewContext(this.stateRegistry.root());
     this.globals.$current = this.stateRegistry.root();
     this.globals.current = this.globals.$current.self;
   }
-
-  /**
-   * Adds a plugin to UI-Router
-   *
-   * This method adds a UI-Router Plugin.
-   * A plugin can enhance or change UI-Router behavior using any public API.
-   *
-   * #### Example:
-   * ```js
-   * import { MyCoolPlugin } from "ui-router-cool-plugin";
-   *
-   * var plugin = router.addPlugin(MyCoolPlugin);
-   * ```
-   *
-   * ### Plugin authoring
-   *
-   * A plugin is simply a class (or constructor function) which accepts a [[UIRouter]] instance and (optionally) an options object.
-   *
-   * The plugin can implement its functionality using any of the public APIs of [[UIRouter]].
-   * For example, it may configure router options or add a Transition Hook.
-   *
-   * The plugin can then be published as a separate module.
-   *
-   * #### Example:
-   * ```js
-   * export class MyAuthPlugin implements UIRouterPlugin {
-   *   constructor(router: UIRouter, options: any) {
-   *     this.name = "MyAuthPlugin";
-   *     let $transitions = router.transitionService;
-   *     let $state = router.stateService;
-   *
-   *     let authCriteria = {
-   *       to: (state) => state.data && state.data.requiresAuth
-   *     };
-   *
-   *     function authHook(transition: Transition) {
-   *       let authService = transition.injector().get('AuthService');
-   *       if (!authService.isAuthenticated()) {
-   *         return $state.target('login');
-   *       }
-   *     }
-   *
-   *     $transitions.onStart(authCriteria, authHook);
-   *   }
-   * }
-   * ```
-   *
-   * @param plugin one of:
-   *        - a plugin class which implements [[UIRouterPlugin]]
-   *        - a constructor function for a [[UIRouterPlugin]] which accepts a [[UIRouter]] instance
-   *        - a factory function which accepts a [[UIRouter]] instance and returns a [[UIRouterPlugin]] instance
-   * @param options options to pass to the plugin class/factory
-   * @returns the registered plugin instance
-   */
-  plugin(plugin, options = {}) {
-    const pluginInstance = new plugin(this, options);
-    if (!pluginInstance.name)
-      throw new Error(
-        "Required property `name` missing on plugin: " + pluginInstance,
-      );
-    return (this._plugins[pluginInstance.name] = pluginInstance);
-  }
-  getPlugin(pluginName) {
-    return pluginName
-      ? this._plugins[pluginName]
-      : Object.values(this._plugins);
-  }
 }

package/src/router/services.js

@@ -1,8 +1,8 @@
 /**
  * # Angular 1 types
  *
- * UI-Router core provides various Typescript types which you can use for code completion and validating parameter values, etc.
- * The customizations to the core types for Angular UI-Router are documented here.
+ * ng-router core provides various Typescript types which you can use for code completion and validating parameter values, etc.
+ * The customizations to the core types for ng-router are documented here.
  *
  * The optional [[$resolve]] service is also documented here.
  *
@@ -13,10 +13,7 @@ import { applyPairs, unnestR } from "../shared/common";
 import { isString } from "../shared/utils";
 import { trace } from "./common/trace";
 import { UIRouter } from "./router";
-import { ng1ViewsBuilder, getNg1ViewConfigFactory } from "./state/views";
-
 import { StateProvider } from "./state-provider";
-import { ResolveContext } from "./resolve/resolve-context";
 
 /** @type {angular.UIRouter}} */
 export let router = null;
@@ -29,17 +26,6 @@ export function $routerProvider($locationProvider) {
     router.stateRegistry,
     router.stateService,
   );
-  // Apply ng1 specific StateBuilder code for `views`, `resolve`, and `onExit/Retain/Enter` properties
-  router.stateRegistry.decorator("views", ng1ViewsBuilder);
-  router.stateRegistry.decorator("onExit", getStateHookBuilder("onExit"));
-  router.stateRegistry.decorator("onRetain", getStateHookBuilder("onRetain"));
-  router.stateRegistry.decorator("onEnter", getStateHookBuilder("onEnter"));
-  router.viewService._pluginapi._viewConfigFactory(
-    "ng1",
-    getNg1ViewConfigFactory(),
-  );
-  // Disable decoding of params by UrlMatcherFactory because $location already handles this
-  router.urlService.config._decodeParams = false;
 
   /**
    * Applys ng1-specific path parameter encoding
@@ -65,8 +51,9 @@ export function $routerProvider($locationProvider) {
   // backwards compat: also expose router instance as $routerProvider.router
   router["router"] = router;
   router["$get"] = $get;
-  $get.$inject = ["$location", "$browser", "$rootScope"];
-  function $get($location, $browser, $rootScope) {
+  $get.$inject = ["$location", "$browser", "$rootScope", "$injector"];
+  function $get($location, $browser, $rootScope, $injector) {
+    router.stateRegistry.init($injector);
     router.urlService._runtimeServices($rootScope, $location, $browser);
     return router;
   }
@@ -139,28 +126,3 @@ export const getLocals = (ctx) => {
   });
   return tuples.reduce(applyPairs, {});
 };
-
-/**
- * This is a [[StateBuilder.builder]] function for angular1 `onEnter`, `onExit`,
- * `onRetain` callback hooks on a [[Ng1StateDeclaration]].
- *
- * When the [[StateBuilder]] builds a [[StateObject]] object from a raw [[StateDeclaration]], this builder
- * ensures that those hooks are injectable for @uirouter/angularjs (ng1).
- *
- * @internalapi
- */
-const getStateHookBuilder = (hookName) =>
-  function stateHookBuilder(stateObject) {
-    const hook = stateObject[hookName];
-    const pathname = hookName === "onExit" ? "from" : "to";
-    function decoratedNg1Hook(trans, state) {
-      const resolveContext = new ResolveContext(trans.treeChanges(pathname));
-      const subContext = resolveContext.subContext(state.$$state());
-      const locals = Object.assign(getLocals(subContext), {
-        $state$: state,
-        $transition$: trans,
-      });
-      return services.$injector.invoke(hook, this, locals);
-    }
-    return hook ? decoratedNg1Hook : undefined;
-  };

package/src/router/state/state-builder.js

@@ -240,6 +240,7 @@ export function resolvablesBuilder(state) {
 export class StateBuilder {
   constructor(matcher, urlMatcherFactory) {
     this.matcher = matcher;
+    this.$injector = undefined;
     const self = this;
     const root = () => matcher.find("");
     const isRoot = (state) => state.name === "";

package/src/router/state/state-object.js

@@ -3,7 +3,7 @@ import { propEq } from "../../shared/hof";
 import { Glob } from "../common/glob";
 import { isFunction, isObject } from "../../shared/utils";
 /**
- * Internal representation of a UI-Router state.
+ * Internal representation of a ng-router state.
  *
  * Instances of this class are created when a [[StateDeclaration]] is registered with the [[StateRegistry]].
  *

package/src/router/state/state-registry.js

@@ -3,19 +3,29 @@ import { StateBuilder } from "./state-builder";
 import { StateQueueManager } from "./state-queue-manager";
 import { removeFrom } from "../../shared/common";
 import { propEq } from "../../shared/hof";
+import { ResolveContext } from "../resolve/resolve-context";
+import { getLocals } from "../services";
+import { ng1ViewsBuilder } from "./views";
 /**
  * A registry for all of the application's [[StateDeclaration]]s
  *
- * This API is found at `router.stateRegistry` ([[UIRouter.stateRegistry]])
+ * This API is found at `$stateRegistry` ([[UIRouter.stateRegistry]])
  */
 export class StateRegistry {
   constructor(urlMatcherFactory, urlServiceRules) {
     this.states = {};
     this.urlServiceRules = urlServiceRules;
-
+    this.$injector = undefined;
     this.listeners = [];
     this.matcher = new StateMatcher(this.states);
     this.builder = new StateBuilder(this.matcher, urlMatcherFactory);
+    // Apply ng1 specific StateBuilder code for `views`, `resolve`, and `onExit/Retain/Enter` properties
+    // TODO we can probably move this inside buildr
+    this.builder.builder("views", ng1ViewsBuilder);
+    this.builder.builder("onExit", this.getStateHookBuilder("onExit"));
+    this.builder.builder("onRetain", this.getStateHookBuilder("onRetain"));
+    this.builder.builder("onEnter", this.getStateHookBuilder("onEnter"));
+
     this.stateQueue = new StateQueueManager(
       this,
       urlServiceRules,
@@ -26,6 +36,41 @@ export class StateRegistry {
     this._registerRoot();
   }
 
+  /**
+   * @param {angular.$InjectorLike} $injector
+   */
+  init($injector) {
+    this.$injector = $injector;
+    this.builder.$injector = $injector;
+  }
+
+  /**
+   * This is a [[StateBuilder.builder]] function for angular1 `onEnter`, `onExit`,
+   * `onRetain` callback hooks on a [[Ng1StateDeclaration]].
+   *
+   * When the [[StateBuilder]] builds a [[StateObject]] object from a raw [[StateDeclaration]], this builder
+   * ensures that those hooks are injectable for @uirouter/angularjs (ng1).
+   *
+   * @internalapi
+   */
+  getStateHookBuilder(hookName) {
+    let that = this;
+    return function stateHookBuilder(stateObject) {
+      const hook = stateObject[hookName];
+      const pathname = hookName === "onExit" ? "from" : "to";
+      function decoratedNg1Hook(trans, state) {
+        const resolveContext = new ResolveContext(trans.treeChanges(pathname));
+        const subContext = resolveContext.subContext(state.$$state());
+        const locals = Object.assign(getLocals(subContext), {
+          $state$: state,
+          $transition$: trans,
+        });
+        return that.$injector.invoke(hook, this, locals);
+      }
+      return hook ? decoratedNg1Hook : undefined;
+    };
+  }
+
   _registerRoot() {
     const rootStateDef = {
       name: "",
@@ -80,7 +125,7 @@ export class StateRegistry {
    * Gets the implicit root state
    *
    * Gets the root of the state tree.
-   * The root state is implicitly created by UI-Router.
+   * The root state is implicitly created by ng-router.
    * Note: this returns the internal [[StateObject]] representation, not a [[StateDeclaration]]
    *
    * @return the root [[StateObject]]
@@ -169,4 +214,12 @@ export class StateRegistry {
   decorator(property, builderFunction) {
     return this.builder.builder(property, builderFunction);
   }
+
+  $get = [
+    "$injector",
+    function ($injector) {
+      this.init($injector);
+      return this;
+    },
+  ];
 }