@angular-wave/angular.ts 0.4.6 → 0.6.0

package/package.json

@@ -2,7 +2,7 @@
   "name": "@angular-wave/angular.ts",
   "description": "A modern, optimized and typesafe version of AngularJS",
   "license": "MIT",
-  "version": "0.4.6",
+  "version": "0.6.0",
   "type": "module",
   "main": "dist/angular-ts.esm.js",
   "browser": "dist/angular-ts.umd.js",

package/src/animations/animate-js.js

@@ -61,7 +61,7 @@ export function AnimateJsProvider($animateProvider) {
             beforeFn = "leave";
             afterFn = "afterLeave"; // TODO(matsko): get rid of this
           } else {
-            beforeFn = `before${event.charAt(0).toUpperCase()}${event.substr(1)}`;
+            beforeFn = `before${event.charAt(0).toUpperCase()}${event.substring(1)}`;
             afterFn = event;
           }
 

package/src/animations/animate.js

@@ -118,7 +118,7 @@ export function AnimateProvider($provide) {
     }
 
     const key = `${name}-animation`;
-    provider.$$registeredAnimations[name.substr(1)] = key;
+    provider.$$registeredAnimations[name.substring(1)] = key;
     $provide.factory(key, factory);
   };
 

package/src/core/compile/compile.js

@@ -37,6 +37,7 @@ import { PREFIX_REGEXP } from "../../shared/constants";
 import { createEventDirective } from "../../directive/events/events";
 import { CACHE, EXPANDO } from "../cache/cache";
 import { Attributes } from "./attributes";
+import { ngObserveDirective } from "../../directive/observe/observe";
 
 let ttl = TTL;
 
@@ -586,7 +587,7 @@ export function CompileProvider($provide, $$sanitizeUriProvider) {
           ? (x) => x
           : (x) => x.replace(/\{\{/g, startSymbol).replace(/}}/g, endSymbol);
 
-      const NG_PREFIX_BINDING = /^ng(Attr|Prop|On)([A-Z].*)$/;
+      const NG_PREFIX_BINDING = /^ng(Attr|Prop|On|Observe)([A-Z].*)$/;
       const MULTI_ELEMENT_DIR_RE = /^(.+)Start$/;
       return compile;
 
@@ -992,6 +993,7 @@ export function CompileProvider($provide, $$sanitizeUriProvider) {
               let isNgAttr = false;
               let isNgProp = false;
               let isNgEvent = false;
+              let isNgObserve = false;
               let multiElementMatch;
 
               attr = nAttrs[j];
@@ -1005,12 +1007,13 @@ export function CompileProvider($provide, $$sanitizeUriProvider) {
                 isNgAttr = ngPrefixMatch[1] === "Attr";
                 isNgProp = ngPrefixMatch[1] === "Prop";
                 isNgEvent = ngPrefixMatch[1] === "On";
+                isNgObserve = ngPrefixMatch[1] === "Observe";
 
                 // Normalize the non-prefixed name
                 name = name
                   .replace(PREFIX_REGEXP, "")
                   .toLowerCase()
-                  .substr(4 + ngPrefixMatch[1].length)
+                  .substring(4 + ngPrefixMatch[1].length)
                   .replace(/_(.)/g, (match, letter) => letter.toUpperCase());
 
                 // Support *-start / *-end multi element directives
@@ -1019,8 +1022,8 @@ export function CompileProvider($provide, $$sanitizeUriProvider) {
                 directiveIsMultiElement(multiElementMatch[1])
               ) {
                 attrStartName = name;
-                attrEndName = `${name.substr(0, name.length - 5)}end`;
-                name = name.substr(0, name.length - 6);
+                attrEndName = `${name.substring(0, name.length - 5)}end`;
+                name = name.substring(0, name.length - 6);
               }
 
               if (isNgProp || isNgEvent) {
@@ -1032,6 +1035,8 @@ export function CompileProvider($provide, $$sanitizeUriProvider) {
                 } else {
                   addEventDirective(directives, nName, name);
                 }
+              } else if (isNgObserve) {
+                addObserveDirective(directives, name, value);
               } else {
                 // Update nName for cases where a prefix was removed
                 // NOTE: the .toLowerCase() is unnecessary and causes https://github.com/angular/angular.js/issues/16624 for ng-attr-*
@@ -2100,7 +2105,7 @@ export function CompileProvider($provide, $$sanitizeUriProvider) {
        *
        * @param {string} name name of the directive to look up.
        * @param {string} location The directive must be found in specific format.
-       *   String containing any of theses characters:
+       *   String containing any of these characters:
        *
        *   * `E`: element name
        *   * `A': attribute
@@ -2115,8 +2120,8 @@ export function CompileProvider($provide, $$sanitizeUriProvider) {
         startAttrName,
         endAttrName,
       ) {
-        if (name === ignoreDirective) return null;
-        let match = null;
+        if (name === ignoreDirective) return false;
+        let match = false;
         if (Object.prototype.hasOwnProperty.call(hasDirectives, name)) {
           for (
             let directive,
@@ -2651,6 +2656,10 @@ export function CompileProvider($provide, $$sanitizeUriProvider) {
         );
       }
 
+      function addObserveDirective(directives, source, prop) {
+        directives.push(ngObserveDirective(source, prop));
+      }
+
       function addAttrInterpolateDirective(
         node,
         directives,

package/src/core/core.html

@@ -10,7 +10,6 @@
     <script src="/jasmine/jasmine-5.1.2/jasmine-html.js"></script>
     <script src="/jasmine/jasmine-5.1.2/boot0.js"></script>
     <script src="/jasmine/jasmine-5.1.2/boot1.js"></script>
-    <script type="module" src="/src/core/cookie-reader.spec.js"></script>
     <script type="module" src="/src/core/on.spec.js"></script>
     <script type="module" src="/src/core/prop.spec.js"></script>
     <script type="module" src="/src/core/root-element.spec.js"></script>

package/src/core/location/location.js

@@ -2,6 +2,7 @@ import { JQLite } from "../../shared/jqlite/jqlite";
 import { urlResolve } from "../url-utils/url-utils";
 import {
   encodeUriSegment,
+  isBoolean,
   isDefined,
   isNumber,
   isObject,
@@ -22,10 +23,21 @@ import { ScopePhase } from "../scope/scope";
  */
 
 /**
+ * Represents the configuration options for HTML5 mode.
+ *
  * @typedef {Object} Html5Mode
- * @property {boolean} enabled
- * @property {boolean} requireBase
- * @property {boolean|string} rewriteLinks
+ * @property {boolean} enabled - (default: false) If true, will rely on `history.pushState` to
+ *     change URLs where supported. Falls back to hash-prefixed paths in browsers that do not
+ *     support `pushState`.
+ * @property {boolean} requireBase - (default: `true`) When html5Mode is enabled, specifies
+ *     whether or not a `<base>` tag is required to be present. If both `enabled` and `requireBase`
+ *     are true, and a `<base>` tag is not present, an error will be thrown when `$location` is injected.
+ *     See the {@link guide/$location $location guide} for more information.
+ * @property {boolean|string} rewriteLinks - (default: `true`) When html5Mode is enabled, enables or
+ *     disables URL rewriting for relative links. If set to a string, URL rewriting will only apply to links
+ *     with an attribute that matches the given string. For example, if set to `'internal-link'`, URL rewriting
+ *     will only occur for `<a internal-link>` links. Note that [attribute name normalization](guide/directive#normalization)
+ *     does not apply here, so `'internalLink'` will **not** match `'internal-link'`.
  */
 
 /** @type {DefaultPorts} */
@@ -389,7 +401,7 @@ export class LocationHtml5Url extends Location {
   }
 
   $$normalizeUrl(url) {
-    return this.appBaseNoFile + url.substr(1); // first char is always '/'
+    return this.appBaseNoFile + url.substring(1); // first char is always '/'
   }
 
   /**
@@ -543,8 +555,11 @@ export class LocationHashbangUrl extends Location {
 
 export class LocationProvider {
   constructor() {
-    this.hashPrefixValue = "!";
-    this.html5ModeConfig = {
+    /** @type {string} */
+    this.hashPrefixConf = "!";
+
+    /** @type {Html5Mode} */
+    this.html5ModeConf = {
       enabled: false,
       requireBase: true,
       rewriteLinks: true,
@@ -553,57 +568,59 @@ export class LocationProvider {
 
   /**
    * The default value for the prefix is `'!'`.
-   * @param {string=} prefix - Prefix for hash part (containing path and search)
-   * @returns {string|LocationProvider} current value if used as getter or itself (chaining) if used as setter
+   * @param {string=} prefix Prefix for hash part (containing path and search)
+   * @returns {void}
    */
-  hashPrefix(prefix) {
-    if (typeof prefix !== "undefined") {
-      this.hashPrefixValue = prefix;
-      return this;
-    }
-    return this.hashPrefixValue;
+  setHashPrefix(prefix) {
+    this.hashPrefixConf = prefix;
+  }
+
+  /**
+   * Current hash prefix
+   * @returns {string}
+   */
+  getHashPrefix() {
+    return this.hashPrefixConf;
   }
 
   /**
-   * @param {(boolean|Object)=} mode If boolean, sets `html5Mode.enabled` to value.
-   *   If object, sets `enabled`, `requireBase` and `rewriteLinks` to respective values. Supported
-   *   properties:
-   *   - **enabled** – `{boolean}` – (default: false) If true, will rely on `history.pushState` to
-   *     change urls where supported. Will fall back to hash-prefixed paths in browsers that do not
-   *     support `pushState`.
-   *   - **requireBase** - `{boolean}` - (default: `true`) When html5Mode is enabled, specifies
-   *     whether or not a <base> tag is required to be present. If `enabled` and `requireBase` are
-   *     true, and a base tag is not present, an error will be thrown when `$location` is injected.
-   *     See the {@link guide/$location $location guide for more information}
-   *   - **rewriteLinks** - `{boolean|string}` - (default: `true`) When html5Mode is enabled,
-   *     enables/disables URL rewriting for relative links. If set to a string, URL rewriting will
-   *     only happen on links with an attribute that matches the given string. For example, if set
-   *     to `'internal-link'`, then the URL will only be rewritten for `<a internal-link>` links.
-   *     Note that [attribute name normalization](guide/directive#normalization) does not apply
-   *     here, so `'internalLink'` will **not** match `'internal-link'`.
+   * Configures html5 mode
+   * @param {(boolean|Html5Mode)=} mode If boolean, sets `html5Mode.enabled` to value. Otherwise, accepts html5Mode object
    *
-   * @returns {Object} html5Mode object if used as getter or itself (chaining) if used as setter
+   * @returns {void}
    */
-  html5Mode(mode) {
-    if (typeof mode === "boolean") {
-      this.html5ModeConfig.enabled = mode;
-      return this;
+  setHtml5Mode(mode) {
+    if (isBoolean(mode)) {
+      this.html5ModeConf.enabled = /** @type {boolean} */ (mode);
     }
+    if (isObject(mode)) {
+      const html5Mode = /** @type {Html5Mode} */ (mode);
+      if (isDefined(html5Mode.enabled) && isBoolean(html5Mode.enabled)) {
+        this.html5ModeConf.enabled = html5Mode.enabled;
+      }
 
-    if (typeof mode === "object") {
-      if (typeof mode.enabled === "boolean")
-        this.html5ModeConfig.enabled = mode.enabled;
-      if (typeof mode.requireBase === "boolean")
-        this.html5ModeConfig.requireBase = mode.requireBase;
       if (
-        typeof mode.rewriteLinks === "boolean" ||
-        typeof mode.rewriteLinks === "string"
+        isDefined(html5Mode.requireBase) &&
+        isBoolean(html5Mode.requireBase)
       ) {
-        this.html5ModeConfig.rewriteLinks = mode.rewriteLinks;
+        this.html5ModeConf.requireBase = html5Mode.requireBase;
+      }
+
+      if (
+        isDefined(html5Mode.rewriteLinks) &&
+        (isBoolean(html5Mode.rewriteLinks) || isString(html5Mode.rewriteLinks))
+      ) {
+        this.html5ModeConf.rewriteLinks = html5Mode.rewriteLinks;
       }
-      return this;
     }
-    return this.html5ModeConfig;
+  }
+
+  /**
+   * Returns html5 mode cofiguration
+   * @returns {Html5Mode}
+   */
+  getHtml5Mode() {
+    return this.html5ModeConf;
   }
 
   $get = [
@@ -617,7 +634,7 @@ export class LocationProvider {
      * @param {JQLite} $rootElement
      * @returns
      */
-    function ($rootScope, $browser, $rootElement) {
+    ($rootScope, $browser, $rootElement) => {
       /** @type {Location} */
       let $location;
       let LocationMode;
@@ -625,8 +642,8 @@ export class LocationProvider {
       const initialUrl = /** @type {string} */ ($browser.url());
       let appBase;
 
-      if (this.html5Mode.enabled) {
-        if (!baseHref && this.html5Mode.requireBase) {
+      if (this.getHtml5Mode().enabled) {
+        if (!baseHref && this.getHtml5Mode().requireBase) {
           throw $locationMinErr(
             "nobase",
             "$location in HTML5 mode requires a <base> tag to be present!",
@@ -643,7 +660,7 @@ export class LocationProvider {
       $location = new LocationMode(
         appBase,
         appBaseNoFile,
-        `#${this.hashPrefix}`,
+        `#${this.getHashPrefix()}`,
       );
       $location.$$parseLinkUrl(initialUrl, initialUrl);
 
@@ -671,7 +688,7 @@ export class LocationProvider {
       }
 
       $rootElement.on("click", (event) => {
-        const { rewriteLinks } = this.html5Mode;
+        const rewriteLinks = this.getHtml5Mode().rewriteLinks;
         // TODO(vojta): rewrite link when opening in new tab/window (in legacy browser)
         // currently we open nice url link and redirect then
 
@@ -774,7 +791,7 @@ export class LocationProvider {
       });
 
       // update browser
-      function browserUpdate() {
+      $rootScope.$watch(() => {
         if (initializing || $location.$$urlUpdatedByLocation) {
           $location.$$urlUpdatedByLocation = false;
 
@@ -822,9 +839,7 @@ export class LocationProvider {
 
         // we don't need to return anything because $evalAsync will make the digest loop dirty when
         // there is a change
-      }
-
-      setTimeout(() => browserUpdate());
+      });
 
       return $location;
 
@@ -836,7 +851,6 @@ export class LocationProvider {
           $location.$$state,
           oldState,
         );
-        browserUpdate();
       }
     },
   ];
@@ -926,17 +940,17 @@ function startsWith(str, search) {
  */
 export function stripBaseUrl(base, url) {
   if (startsWith(url, base)) {
-    return url.substr(base.length);
+    return url.substring(base.length);
   }
 }
 
 export function stripHash(url) {
   const index = url.indexOf("#");
-  return index === -1 ? url : url.substr(0, index);
+  return index === -1 ? url : url.substring(0, index);
 }
 
 export function stripFile(url) {
-  return url.substr(0, stripHash(url).lastIndexOf("/") + 1);
+  return url.substring(0, stripHash(url).lastIndexOf("/") + 1);
 }
 
 /* return the server only (scheme://host:port) */

package/src/core/location/location.spec.js

@@ -15,7 +15,7 @@ describe("$location", () => {
 
   // function initService(options) {
   //   module.config(($provide, $locationProvider) => {
-  //     $locationProvider.html5Mode(options.html5Mode);
+  //     $locationProvider.setHtml5Mode(options.html5Mode);
   //     $locationProvider.hashPrefix(options.hashPrefix);
   //     $provide.value("$sniffer", { history: options.supportHistory });
   //   });
@@ -24,12 +24,12 @@ describe("$location", () => {
   describe("defaults", () => {
     it('should have hashPrefix of "!"', () => {
       let provider = new LocationProvider();
-      expect(provider.hashPrefix()).toBe("!");
+      expect(provider.getHashPrefix()).toBe("!");
     });
 
     it("should not be html5 mode", () => {
       let provider = new LocationProvider();
-      expect(provider.html5Mode().enabled).toBeFalse();
+      expect(provider.getHtml5Mode().enabled).toBeFalse();
     });
   });
 
@@ -2947,7 +2947,7 @@ describe("$location", () => {
 
   //   it("should listen on click events on href and prevent browser default in html5 mode", () => {
   //     module(($locationProvider, $provide) => {
-  //       $locationProvider.html5Mode(true);
+  //       $locationProvider.setHtml5Mode(true);
   //       return function ($rootElement, $compile, $rootScope) {
   //         $rootElement.html('<a href="http://server/somePath">link</a>');
   //         $compile($rootElement)($rootScope);
@@ -3011,12 +3011,12 @@ describe("$location", () => {
     describe("html5Mode", () => {
       it("should set enabled, requireBase and rewriteLinks when called with object", () => {
         module.config(($locationProvider) => {
-          $locationProvider.html5Mode({
+          $locationProvider.setHtml5Mode({
             enabled: true,
             requireBase: false,
             rewriteLinks: false,
           });
-          expect($locationProvider.html5Mode()).toEqual({
+          expect($locationProvider.getHtml5Mode()).toEqual({
             enabled: true,
             requireBase: false,
             rewriteLinks: false,
@@ -3027,13 +3027,13 @@ describe("$location", () => {
 
       it("should only overwrite existing properties if values are of the correct type", () => {
         module.config(($locationProvider) => {
-          $locationProvider.html5Mode({
+          $locationProvider.setHtml5Mode({
             enabled: "duh",
             requireBase: "probably",
             rewriteLinks: 0,
           });
 
-          expect($locationProvider.html5Mode()).toEqual({
+          expect($locationProvider.getHtml5Mode()).toEqual({
             enabled: false,
             requireBase: true,
             rewriteLinks: true,
@@ -3045,11 +3045,11 @@ describe("$location", () => {
 
       it("should support setting rewriteLinks to a string", () => {
         module.config(($locationProvider) => {
-          $locationProvider.html5Mode({
+          $locationProvider.setHtml5Mode({
             rewriteLinks: "yes-rewrite",
           });
 
-          expect($locationProvider.html5Mode().rewriteLinks).toEqual(
+          expect($locationProvider.getHtml5Mode().rewriteLinks).toEqual(
             "yes-rewrite",
           );
         });
@@ -3059,11 +3059,11 @@ describe("$location", () => {
 
       it("should not set unknown input properties to html5Mode object", () => {
         module.config(($locationProvider) => {
-          $locationProvider.html5Mode({
+          $locationProvider.setHtml5Mode({
             someProp: "foo",
           });
 
-          expect($locationProvider.html5Mode()).toEqual({
+          expect($locationProvider.getHtml5Mode()).toEqual({
             enabled: false,
             requireBase: true,
             rewriteLinks: true,
@@ -3075,7 +3075,7 @@ describe("$location", () => {
 
       it("should default to enabled:false, requireBase:true and rewriteLinks:true", () => {
         module.config(($locationProvider) => {
-          expect($locationProvider.html5Mode()).toEqual({
+          expect($locationProvider.getHtml5Mode()).toEqual({
             enabled: false,
             requireBase: true,
             rewriteLinks: true,
@@ -3178,7 +3178,7 @@ describe("$location", () => {
     // it("should complain if no base tag present", () => {
     //   let module = window.angular.module("test1", ["ng"]);
     //   module.config((_$locationProvider_) => {
-    //     $locationProvider.html5Mode(true);
+    //     $locationProvider.setHtml5Mode(true);
     //   });
 
     //   createInjector(["test1"]).invoke(($browser, $injector) => {
@@ -3191,7 +3191,7 @@ describe("$location", () => {
 
     // it("should not complain if baseOptOut set to true in html5Mode", () => {
     //   module.config(($locationProvider) => {
-    //     $locationProvider.html5Mode({
+    //     $locationProvider.setHtml5Mode({
     //       enabled: true,
     //       requireBase: false,
     //     });

package/src/core/parse/parse.spec.js

@@ -688,7 +688,7 @@ describe("parser", () => {
         scope.zero = 0;
         scope.bool = false;
 
-        expect(scope.$eval("empty.substr(0)")).toBe("");
+        expect(scope.$eval("empty.substring(0)")).toBe("");
         expect(scope.$eval("zero.toString()")).toBe("0");
         expect(scope.$eval("bool.toString()")).toBe("false");
       });

package/src/core/prop.spec.js

@@ -3,7 +3,7 @@ import { createInjector } from "./di/injector";
 import { valueFn } from "../shared/utils";
 import { dealoc } from "../shared/jqlite/jqlite";
 
-fdescribe("ngProp*", () => {
+describe("ngProp*", () => {
   let $compile, $rootScope, compileProvider, $sce;
   let logs = [];
 

package/src/directive/model/model.spec.js

@@ -1265,7 +1265,7 @@ describe("ngModel", () => {
 
       it("should always use the most recent $viewValue for validation", () => {
         ctrl.$parsers.push((value) => {
-          if (value && value.substr(-1) === "b") {
+          if (value && value.slice(-1) === "b") {
             value = "a";
             ctrl.$setViewValue(value);
             ctrl.$render();
@@ -1288,14 +1288,14 @@ describe("ngModel", () => {
 
       it("should validate even if the modelValue did not change", () => {
         ctrl.$parsers.push((value) => {
-          if (value && value.substr(-1) === "b") {
+          if (value && value.slice(-1) === "b") {
             value = "a";
           }
 
           return value;
         });
 
-        ctrl.$validators.mock = function (modelValue) {
+        ctrl.$validators.mock = function () {
           return true;
         };
 

package/src/directive/observe/observe.js

@@ -1,17 +1,18 @@
+import { isUndefined } from "../../shared/utils.js";
+
 /**
- * @returns {import("../../types").Directive}
+ * @param {string} source - the name of the attribute to be observed
+ * @param {string} prop - the scope property to be updated with attribute value
+ * @returns {import("../../types.js").Directive}
  */
-export function ngObserveDirective() {
+export function ngObserveDirective(source, prop) {
   return {
     restrict: "A",
-    link: (scope, element, attrs) => {
+    compile: () => (scope, element) => {
       const targetElement = element[0];
-      const source = attrs["ngObserve"];
-      let prop = targetElement.dataset["update"];
-      if (!prop) {
+      if (isUndefined(prop) || prop == "") {
         prop = source;
       }
-
       if (!scope[prop]) {
         scope[prop] = targetElement.getAttribute(source);
       }

package/src/directive/observe/observe.spec.js

@@ -23,16 +23,14 @@ describe("observe", () => {
   });
 
   function createDirective(attributeValue, updateProp) {
-    const template = `<div ng-observe="${attributeValue}" data-update="${updateProp}"></div>`;
+    const template = `<div ng-observe-${attributeValue}="${updateProp}"></div>`;
     element = $compile(template)($scope);
     $scope.$digest();
   }
 
   it("should set the scope property to the attribute value before any changes", () => {
     const scope = $rootScope.$new();
-    const element = JQLite(
-      '<div data-update="testProp" ng-observe="sourceAttr"></div>',
-    );
+    const element = JQLite('<div ng-observe-sourceAttr="testProp"></div>');
     element.attr("sourceAttr", "initialValue");
     $compile(element)(scope);
 
@@ -92,7 +90,7 @@ describe("observe", () => {
 
   it("should observe attribute changes and update the same scope name if data-update attribute is absent", () => {
     $scope.myProp = "";
-    const template = `<div ng-observe="test-attribute"></div>`;
+    const template = `<div ng-observe-test-attribute></div>`;
     element = $compile(template)($scope);
     $scope.$digest();
     spyOn($scope, "$digest").and.callThrough();

package/src/directive/observe/test.html

@@ -74,11 +74,7 @@
     <test-component greeting="{{ greeting }}"></test-component>
     <div>{{ greeting }}</div>
 
-    <fluent-select
-      ng-observe="current-value"
-      data-update="greeting"
-      title="Select a section"
-    >
+    <fluent-select ng-observe-current-value="greeting" title="Select a section">
       <fluent-option value="Beginning">Beginning</fluent-option>
       <fluent-option value="Middle">Middle</fluent-option>
       <fluent-option value="End">End</fluent-option>
@@ -86,7 +82,7 @@
     <br />
 
     {{ activeid }}
-    <fluent-tabs ng-observe="activeid" activeid="entrees">
+    <fluent-tabs ng-observe-activeid activeid="entrees">
       <fluent-tab id="apps">Appetizers</fluent-tab>
       <fluent-tab id="entrees">Entrees</fluent-tab>
       <fluent-tab id="desserts">Desserts</fluent-tab>
@@ -171,7 +167,7 @@
 
     {{ value }}
 
-    <fluent-radio-group ng-observe="value" orientation="vertical">
+    <fluent-radio-group ng-observe-value orientation="vertical">
       <fluent-radio value="1">18-24</fluent-radio>
       <fluent-radio value="2">25-33</fluent-radio>
       <fluent-radio value="3">34-44</fluent-radio>
@@ -180,7 +176,7 @@
 
     {{ checked }}
 
-    <fluent-switch ng-observe="aria-checked" data-update="checked">
+    <fluent-switch ng-observe-aria-checked="checked">
       <span slot="checked-message">On</span>
       <span slot="unchecked-message">Off</span>
       <label for="cap-switch">Captions:</label>

package/src/loader.js

@@ -146,13 +146,14 @@ export class Angular {
        * @param {import("./core/di/internal-injector").InjectorService} $injector
        */
       function (scope, el, compile, $injector) {
+        // ng-route deps
+        services.$injector = $injector;
+        services.$q = $injector.get("$q");
         scope.$apply(() => {
           el.data("$injector", $injector);
           compile(el)(scope);
         });
-        // ng-route deps
-        services.$injector = $injector;
-        services.$q = $injector.get("$q");
+
         // https://github.com/angular-ui/ui-router/issues/3678
         if (!Object.prototype.hasOwnProperty.call($injector, "strictDi")) {
           try {

package/src/public.js

@@ -130,7 +130,6 @@ import {
   $ViewDirectiveFill,
   ngView,
 } from "./router/directives/view-directive.js";
-import { ngObserveDirective } from "./directive/observe/observe.js";
 import { ngChannelDirective } from "./directive/channel/channel.js";
 
 /**
@@ -191,7 +190,6 @@ export function publishExternalAPI(angular) {
               ngSwitch: ngSwitchDirective,
               ngSwitchWhen: ngSwitchWhenDirective,
               ngSwitchDefault: ngSwitchDefaultDirective,
-              ngObserve: ngObserveDirective,
               ngOptions: ngOptionsDirective,
               ngTransclude: ngTranscludeDirective,
               ngModel: ngModelDirective,