@angular-wave/angular.ts 0.7.8 → 0.8.1

package/src/directive/validators/validators.spec.js

@@ -1,6 +1,6 @@
-import { Angular } from "../../loader.js";
+import { Angular } from "../../angular.js";
 import { wait } from "../../shared/test-utils.js";
-import { getController } from "../../shared/dom.js";
+import { dealoc, getController } from "../../shared/dom.js";
 
 describe("validators", () => {
   let $rootScope;
@@ -9,6 +9,7 @@ describe("validators", () => {
   let errors = [];
 
   beforeEach(() => {
+    dealoc(document.getElementById("app"));
     errors = [];
     window.angular = new Angular();
     window.angular
@@ -27,7 +28,7 @@ describe("validators", () => {
   });
 
   describe("pattern", () => {
-    it("should validate in-lined pattern", () => {
+    it("should validate in-lined pattern", async () => {
       inputElm = $compile(
         '<input type="text" ng-model="value" ng-pattern="/^\\d\\d\\d-\\d\\d-\\d\\d\\d\\d$/" />',
       )($rootScope);
@@ -246,7 +247,7 @@ describe("validators", () => {
       inputElm.dispatchEvent(new Event("change"));
       expect($rootScope.form.test.$error.pattern).toBe(true);
       expect(inputElm.classList.contains("ng-invalid")).toBeTrue();
-
+      //
       inputElm.setAttribute("value", "12345");
       inputElm.dispatchEvent(new Event("change"));
       expect($rootScope.form.test.$error.pattern).toBe(true);

package/src/directive/validators/validators.test.js

@@ -5,6 +5,7 @@ const TEST_URL = "src/directive/validators/validators.html";
 test("unit tests contain no errors", async ({ page }) => {
   await page.goto(TEST_URL);
   await page.content();
+  await page.waitForTimeout(3000);
   await expect(page.locator(".jasmine-overall-result")).toHaveText(
     /0 failures/,
   );

package/src/filters/filter.spec.js

@@ -1,4 +1,4 @@
-import { Angular } from "../loader.js";
+import { Angular } from "../angular.js";
 import { createInjector } from "../core/di/injector.js";
 import { isString, includes } from "../shared/utils.js";
 import { createElementFromHTML } from "../shared/dom.js";

package/src/filters/filters.spec.js

@@ -1,4 +1,4 @@
-import { Angular } from "../loader.js";
+import { Angular } from "../angular.js";
 import { createInjector } from "../core/di/injector.js";
 import { toJson } from "../shared/utils.js";
 

package/src/filters/limit-to.js

@@ -4,7 +4,6 @@ import {
   isNumber,
   isNumberNaN,
   isString,
-  toInt,
 } from "../shared/utils.js";
 
 /**
@@ -23,7 +22,7 @@ export function limitToFilter() {
     if (Math.abs(Number(limit)) === Infinity) {
       limit = Number(limit);
     } else {
-      limit = toInt(/** @type {string} */ (limit));
+      limit = parseInt(/** @type {string} */ (limit), 10);
     }
     if (isNumberNaN(limit)) return input;
 
@@ -33,7 +32,7 @@ export function limitToFilter() {
     begin =
       !begin || isNaN(/** @type {any} */ (begin))
         ? 0
-        : toInt(/** @type {string} */ (begin));
+        : parseInt(/** @type {string} */ (begin), 10);
     begin =
       begin < 0 ? Math.max(0, /** @type {[]} */ (input).length + begin) : begin;
 

package/src/filters/limit-to.spec.js

@@ -1,4 +1,4 @@
-import { Angular } from "../loader.js";
+import { Angular } from "../angular.js";
 import { createInjector } from "../core/di/injector.js";
 import { createElementFromHTML } from "../shared/dom.js";
 

package/src/filters/order-by.spec.js

@@ -1,4 +1,4 @@
-import { Angular } from "../loader.js";
+import { Angular } from "../angular.js";
 import { createInjector } from "../core/di/injector.js";
 
 describe("Filter: orderBy", () => {

package/src/index.js

@@ -1,4 +1,4 @@
-import { Angular } from "./loader.js";
+import { Angular } from "./angular.js";
 
 export const angular = new Angular();
 document.addEventListener("DOMContentLoaded", () => angular.init(document), {

package/src/injection-tokens.js

@@ -16,6 +16,9 @@
  * @type Readonly<Record<string, string>>
  */
 export const $injectTokens = Object.freeze({
+  $attrs: "$attrs",
+  $scope: "$scope",
+  $element: "$element",
   $$AnimateRunner: "$$AnimateRunner",
   $$animateAsyncRun: "$$animateAsyncRun",
   $$animateCache: "$$animateCache",
@@ -41,10 +44,11 @@ export const $injectTokens = Object.freeze({
   $interpolate: "$interpolate",
   $location: "$location",
   $log: "$log",
-  $ngViewScroll: "$ngViewScroll",
+  $viewScroll: "$viewScroll",
   $parse: "$parse",
   $rootScope: "$rootScope",
-  $routerGlobals: "$routerGlobals",
+  $rootElement: "$rootElement",
+  $router: "$router",
   $sce: "$sce",
   $sceDelegate: "$sceDelegate",
   $state: "$state",
@@ -54,7 +58,7 @@ export const $injectTokens = Object.freeze({
   $templateRequest: "$templateRequest",
   $transitions: "$transitions",
   $urlConfig: "$urlConfig",
-  $urlService: "$urlService",
+  $url: "$url",
   $view: "$view",
   // provide literals
   $provide: "$provide",

package/src/interface.ts

@@ -4,6 +4,8 @@ export * from "./core/di/ng-module.js";
 export * from "./services/http/interface.ts";
 export * from "./services/log/interface.ts";
 export * from "./services/log/log.js";
+export * from "./services/location/interface.ts";
+export * from "./services/location/location.js";
 export * from "./services/pubsub/pubsub.js";
 export * from "./services/template-cache/interface.ts";
 export * from "./services/template-cache/template-cache.js";
@@ -35,6 +37,7 @@ export type ExpandoStore = {
  * ```
  */
 export type AnnotatedFactory = [...string[], (...args: any[]) => any];
+export type InjectableFactory = (...args: any[]) => any;
 
 /**
  * A factory that can be either a standalone function or a dependency-annotated array.
@@ -42,8 +45,6 @@ export type AnnotatedFactory = [...string[], (...args: any[]) => any];
  * The array form is used to support minification-safe dependency injection.
  * See {@link AnnotatedFactory}.
  */
-export type InjectableFactory = (...args: any[]) => any;
-
 export type Injectable = AnnotatedFactory | InjectableFactory;
 
 /**
@@ -66,7 +67,7 @@ export interface Provider {
   /**
    * Register a directive
    * @param name - The name of the directive.
-   * @param provider - An object with a `$get` property that defines how the service is created.
+   * @param directive - An object with a `$get` property that defines how the service is created.
    */
   directive(name: string, directive: DirectiveFactory): Provider;
 

package/src/loader.md

@@ -1,155 +0,0 @@
-/\*\*
-
-- @ngdoc module
-- @name ng
-
-- @installation
-- @description
--
-- The ng module is loaded by default when an AngularTS application is started. The module itself
-- contains the essential components for an AngularTS application to function. The table below
-- lists a high level breakdown of each of the services/factories, filters, directives and testing
-- components available within this core module.
-- \*/
-
-/\*\*
-
-- @ngdoc directive
-- @name ngApp
--
-- @element ANY
-- @param {import('./interface.ts').Module} ngApp an optional application
-- {@link angular.module module} name to load.
-- @param {boolean=} ngStrictDi if this attribute is present on the app element, the injector will be
-- created in "strict-di" mode. This means that the application will fail to invoke functions which
-- do not use explicit function annotation (and are thus unsuitable for minification), as described
-- in {@link guide/di the Dependency Injection guide}, and useful debugging info will assist in
-- tracking down the root of these bugs.
--
-- @description
--
-- Use this directive to **auto-bootstrap** an AngularTS application. The `ngApp` directive
-- designates the **root element** of the application and is typically placed near the root element
-- of the page - e.g. on the `<body>` or `<html>` tags.
--
-- There are a few things to keep in mind when using `ngApp`:
-- - only one AngularTS application can be auto-bootstrapped per HTML document. The first `ngApp`
-- found in the document will be used to define the root element to auto-bootstrap as an
-- application. To run multiple applications in an HTML document you must manually bootstrap them using
-- {@link angular.bootstrap} instead.
-- - AngularTS applications cannot be nested within each other.
-- - Do not use a directive that uses {@link ng.$compile#transclusion transclusion} on the same element as `ngApp`.
-- This includes directives such as {@link ng.ngIf `ngIf`}, {@link ng.ngInclude `ngInclude`} and
-- {@link ngRoute.ngView `ngView`}.
-- Doing this misplaces the app {@link ng.$rootElement `$rootElement`} and the app's {@link auto.$injector injector},
-- causing animations to stop working and making the injector inaccessible from outside the app.
--
-- You can specify an **AngularTS module** to be used as the root module for the application. This
-- module will be loaded into the {@link auto.$injector} when the application is bootstrapped. It
-- should contain the application code needed or have dependencies on other modules that will
-- contain the code. See {@link angular.module} for more information.
--
-- In the example below if the `ngApp` directive were not placed on the `html` element then the
-- document would not be compiled, the `AppController` would not be instantiated and the `{{ a+b }}`
-- would not be resolved to `3`.
--
-- @example
--
-- ### Simple Usage
--
-- `ngApp` is the easiest, and most common way to bootstrap an application.
-- <example module="ngAppDemo" name="ng-app">
-    <file name="index.html">
-    <div ng-controller="ngAppDemoController">
-      I can add: {{a}} + {{b}} =  {{ a+b }}
-    </div>
-    </file>
-    <file name="script.js">
-    angular.module('ngAppDemo', []).controller('ngAppDemoController', function($scope) {
-      $scope.a = 1;
-      $scope.b = 2;
-    });
-    </file>
-  </example>
--
-- @example
--
-- ### With `ngStrictDi`
--
-- Using `ngStrictDi`, you would see something like this:
-- <example ng-app-included="true" name="strict-di">
-    <file name="index.html">
-    <div ng-app="ngAppStrictDemo" ng-strict-di>
-        <div ng-controller="GoodController1">
-            I can add: {{a}} + {{b}} =  {{ a+b }}
-
-            <p>This renders because the controller does not fail to
-               instantiate, by using explicit annotation style (see
-               script.js for details)
-            </p>
-        </div>
-
-        <div ng-controller="GoodController2">
-            Name: <input ng-model="name"><br />
-            Hello, {{name}}!
-
-            <p>This renders because the controller does not fail to
-               instantiate, by using explicit annotation style
-               (see script.js for details)
-            </p>
-        </div>
-
-        <div ng-controller="BadController">
-            I can add: {{a}} + {{b}} =  {{ a+b }}
-
-            <p>The controller could not be instantiated, due to relying
-               on automatic function annotations (which are disabled in
-               strict mode). As such, the content of this section is not
-               interpolated, and there should be an error in your web console.
-            </p>
-        </div>
-
-    </div>
-    </file>
-    <file name="script.js">
-    angular.module('ngAppStrictDemo', [])
-      // BadController will fail to instantiate, due to relying on automatic function annotation,
-      // rather than an explicit annotation
-      .controller('BadController', function($scope) {
-        $scope.a = 1;
-        $scope.b = 2;
-      })
-      // Unlike BadController, GoodController1 and GoodController2 will not fail to be instantiated,
-      // due to using explicit annotations using the array style and $inject property, respectively.
-      .controller('GoodController1', ['$scope', function($scope) {
-        $scope.a = 1;
-        $scope.b = 2;
-      }])
-      .controller('GoodController2', GoodController2);
-      function GoodController2($scope) {
-        $scope.name = 'World';
-      }
-      GoodController2.$inject = ['$scope'];
-    </file>
-    <file name="style.css">
-    div[ng-controller] {
-        margin-bottom: 1em;
-        -webkit-border-radius: 4px;
-        border-radius: 4px;
-        border: 1px solid;
-        padding: .5em;
-    }
-    div[ng-controller^=Good] {
-        border-color: #d6e9c6;
-        background-color: #dff0d8;
-        color: #3c763d;
-    }
-    div[ng-controller^=Bad] {
-        border-color: #ebccd1;
-        background-color: #f2dede;
-        color: #a94442;
-        margin-bottom: 0;
-    }
-    </file>
-  </example>
-  */

package/src/{public.js → ng.js}

@@ -105,7 +105,7 @@ import { AnimateJsDriverProvider } from "./animations/animate-js-driver.js";
 import { ngAnimateSwapDirective } from "./animations/animate-swap.js";
 import { $$AnimateChildrenDirective } from "./animations/animate-children-directive.js";
 import { UrlConfigProvider } from "./router/url/url-config.js";
-import { RouterGlobals } from "./router/globals.js";
+import { Router } from "./router/router.js";
 import { ViewService } from "./router/view/view.js";
 import { TransitionProvider } from "./router/transition/transition-service.js";
 import { StateProvider } from "./router/state/state-service.js";
@@ -132,10 +132,11 @@ import {
   ngPostDirective,
   ngPutDirective,
 } from "./directive/http/http.js";
+import { $injectTokens as $t } from "./injection-tokens.js";
 
 /**
  * Initializes core `ng` module.
- * @param {import('./loader.js').Angular} angular
+ * @param {import('./angular.js').Angular} angular
  * @returns {import('./core/di/ng-module.js').NgModule} `ng` module
  */
 export function registerNgModule(angular) {
@@ -144,7 +145,7 @@ export function registerNgModule(angular) {
       "ng",
       [],
       [
-        "$provide",
+        $t.$provide,
         /** @param {import("./interface.js").Provider} $provide */
         ($provide) => {
           // $$sanitizeUriProvider needs to be before $compileProvider as it is used by it.
@@ -152,7 +153,7 @@ export function registerNgModule(angular) {
             $$sanitizeUri: SanitizeUriProvider,
           });
           $provide
-            .provider("$compile", CompileProvider)
+            .provider($t.$compile, CompileProvider)
             .directive({
               input: inputDirective,
               textarea: inputDirective,
@@ -258,7 +259,7 @@ export function registerNgModule(angular) {
             $parse: ParseProvider,
             $$rAFScheduler: RafSchedulerProvider,
             $rootScope: RootScopeProvider,
-            $routerGlobals: RouterGlobals,
+            $router: Router,
             $sce: SceProvider,
             $sceDelegate: SceDelegateProvider,
             $templateCache: TemplateCacheProvider,
@@ -267,9 +268,9 @@ export function registerNgModule(angular) {
             $view: ViewService,
             $transitions: TransitionProvider,
             $state: StateProvider,
-            $ngViewScroll: ViewScrollProvider,
+            $viewScroll: ViewScrollProvider,
             $templateFactory: TemplateFactoryProvider,
-            $urlService: UrlService,
+            $url: UrlService,
             $stateRegistry: StateRegistryProvider,
             $eventBus: PubSubProvider,
           });
@@ -277,14 +278,12 @@ export function registerNgModule(angular) {
       ],
     )
     .factory("$stateParams", [
-      "$routerGlobals",
+      $t.$router,
       /**
-       * @param {import('./router/globals.js').RouterGlobals} globals
+       * @param {import('./router/router.js').Router} globals
        * @returns {import('./router/params/state-params.js').StateParams }
        */
-      function (globals) {
-        return globals.params;
-      },
+      (globals) => globals.params,
     ])
     .value("$trace", trace);
 }

package/src/{public.spec.js → ng.spec.js}

@@ -1,5 +1,5 @@
 import { createInjector } from "./core/di/injector.js";
-import { Angular } from "./loader.js";
+import { Angular } from "./angular.js";
 
 describe("public", () => {
   beforeEach(() => {
@@ -9,7 +9,7 @@ describe("public", () => {
   it("sets up the angular object and the module loader", () => {
     expect(window.angular).toBeDefined();
     expect(window.angular.module).toBeDefined();
-    expect(window.angular.$injectTokens).toBeDefined();
+    expect(window.angular.$t).toBeDefined();
   });
 
   it("sets up the ng module", () => {

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

@@ -245,7 +245,7 @@ export function $StateRefDynamicDirective(
 
 $StateRefActiveDirective.$inject = [
   "$state",
-  "$routerGlobals",
+  "$router",
   "$interpolate",
   "$stateRegistry",
   "$transitions",
@@ -253,7 +253,7 @@ $StateRefActiveDirective.$inject = [
 
 /**
  * @param {*} $state
- * @param {import('../globals.js').RouterGlobals} $routerGlobals
+ * @param {import('../router.js').Router} $router
  * @param {*} $interpolate
  * @param {*} $stateRegistry
  * @param {*} $transitions
@@ -261,7 +261,7 @@ $StateRefActiveDirective.$inject = [
  */
 export function $StateRefActiveDirective(
   $state,
-  $routerGlobals,
+  $router,
   $interpolate,
   $stateRegistry,
   $transitions,
@@ -300,8 +300,8 @@ export function $StateRefActiveDirective(
         trans.promise.then(update, () => {});
       }
       $scope.$on("$destroy", setupEventListeners());
-      if ($routerGlobals.transition) {
-        updateAfterTransition($routerGlobals.transition);
+      if ($router.transition) {
+        updateAfterTransition($router.transition);
       }
       function setupEventListeners() {
         const deregisterStatesChangedListener =

package/src/router/directives/state-directives.spec.js

@@ -1,4 +1,4 @@
-import { Angular } from "../../loader.js";
+import { Angular } from "../../angular.js";
 import { createElementFromHTML, dealoc } from "../../shared/dom.js";
 import { browserTrigger, wait } from "../../shared/test-utils.js";
 
@@ -15,7 +15,7 @@ describe("ngStateRef", () => {
     $injector,
     $state,
     $stateParams,
-    $urlService;
+    $url;
 
   beforeEach(() => {
     dealoc(document.getElementById("app"));
@@ -30,7 +30,8 @@ describe("ngStateRef", () => {
        */
       ($stateProvider, $locationProvider) => {
         _locationProvider = $locationProvider;
-        $locationProvider.setHashPrefix("");
+        $locationProvider.html5ModeConf.enabled = false;
+        $locationProvider.hashPrefixConf = "";
         $stateProvider
           .state({ name: "top", url: "" })
           .state({ name: "other", url: "/other/:id", template: "other" })
@@ -60,9 +61,9 @@ describe("ngStateRef", () => {
     $rootScope = $injector.get("$rootScope");
     $compile = $injector.get("$compile");
     $state = $injector.get("$state");
-    $stateParams = $injector.get("$stateParams");
-    $urlService = $injector.get("$urlService");
-    $urlService.listen();
+    $stateParams = $injector.get("$router").params;
+    $url = $injector.get("$url");
+    $url.listen();
   });
 
   afterEach(() => (window.location.hash = ""));
@@ -704,7 +705,7 @@ describe("ngSrefActive", () => {
     $rootScope = $injector.get("$rootScope");
     $compile = $injector.get("$compile");
     $state = $injector.get("$state");
-    $stateParams = $injector.get("$stateParams");
+    $stateParams = $injector.get("$router").params;
   });
 
   it("should update class for sibling ngSref", async () => {

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

@@ -1,10 +1,5 @@
 import { filter, tail, unnestR } from "../../shared/common.js";
-import {
-  hasAnimate,
-  isDefined,
-  isFunction,
-  // isString,
-} from "../../shared/utils.js";
+import { hasAnimate, isDefined, isFunction } from "../../shared/utils.js";
 // import { kebobString } from "../../shared/strings.js";
 import { parse } from "../../shared/hof.js";
 import { ResolveContext } from "../resolve/resolve-context.js";
@@ -29,7 +24,7 @@ import { getLocals } from "../state/state-registry.js";
  *   The ng-view can be targeted in a View using the name ([[StateDeclaration.views]]).
  *
  * - `autoscroll`: an expression. When it evaluates to true, the `ng-view` will be scrolled into view when it is activated.
- *   Uses [[$ngViewScroll]] to do the scrolling.
+ *   Uses [[$viewScroll]] to do the scrolling.
  *
  * - `onload`: Expression to evaluate whenever the view updates.
  *
@@ -148,16 +143,16 @@ import { getLocals } from "../state/state-registry.js";
 export let ngView = [
   "$view",
   "$animate",
-  "$ngViewScroll",
+  "$viewScroll",
   "$interpolate",
   /**
    * @param {*} $view
    * @param {*} $animate
-   * @param {*} $ngViewScroll
+   * @param {*} $viewScroll
    * @param {*} $interpolate
    * @returns {import("../../interface.js").Directive}
    */
-  function $ViewDirective($view, $animate, $ngViewScroll, $interpolate) {
+  function $ViewDirective($view, $animate, $viewScroll, $interpolate) {
     function getRenderer() {
       return {
         enter: function (element, target, cb) {
@@ -283,7 +278,7 @@ export let ngView = [
              * @param {string} viewName Name of the view.
              */
             newScope.$emit("$viewContentLoading", name);
-            const cloned = $transclude(newScope, function (clone) {
+            currentEl = $transclude(newScope, function (clone) {
               setCacheData(clone, "$ngViewAnim", $ngViewAnim);
               setCacheData(clone, "$ngView", $ngViewData);
               renderer.enter(clone, $element, function () {
@@ -294,12 +289,11 @@ export let ngView = [
                   (isDefined(autoScrollExp) && !autoScrollExp) ||
                   scope.$eval(autoScrollExp)
                 ) {
-                  $ngViewScroll(clone);
+                  $viewScroll(clone);
                 }
               });
               cleanupLastView();
             });
-            currentEl = cloned;
             currentScope = newScope;
             /**
              * Fired once the view is **loaded**, *after* the DOM is rendered.