@angular-wave/angular.ts 0.7.2 → 0.7.4

package/docs/README.md

@@ -1,9 +1,10 @@
 # Docsy Example
 
-[Docsy][] is a [Hugo theme module][] for technical documentation sites, providing easy
-site navigation, structure, and more. This **Docsy Example Project** uses the Docsy
-theme component as a hugo module and provides a skeleton documentation structure for you to use.
-You can clone/copy this project and edit it with your own content, or use it as an example.
+[Docsy][] is a [Hugo theme module][] for technical documentation sites,
+providing easy site navigation, structure, and more. This **Docsy Example
+Project** uses the Docsy theme component as a hugo module and provides a
+skeleton documentation structure for you to use. You can clone/copy this project
+and edit it with your own content, or use it as an example.
 
 In this project, the Docsy theme is pulled in as a Hugo module, together with
 its dependencies:
@@ -19,30 +20,40 @@ This Docsy Example Project is hosted on [Netlify][] at [example.docsy.dev][].
 You can view deploy logs from the [deploy section of the project's Netlify
 dashboard][deploys], or this [alternate dashboard][].
 
-This is not an officially supported Google product. This project is currently maintained.
+This is not an officially supported Google product. This project is currently
+maintained.
 
 ## Using the Docsy Example Project as a template
 
-A simple way to get started is to use this project as a template, which gives you a site project that is set up and ready to use. To do this:
+A simple way to get started is to use this project as a template, which gives
+you a site project that is set up and ready to use. To do this:
 
-1. Use the dropdown for switching branches/tags to change to the **latest** released tag.
+1. Use the dropdown for switching branches/tags to change to the **latest**
+   released tag.
 
 2. Click **Use this template**.
 
-3. Select a name for your new project and click **Create repository from template**.
+3. Select a name for your new project and click **Create repository from
+   template**.
 
-4. Make your own local working copy of your new repo using git clone, replacing https://github.com/me/example.git with your repo’s web URL:
+4. Make your own local working copy of your new repo using git clone, replacing
+   https://github.com/me/example.git with your repo’s web URL:
 
 ```bash
 git clone --depth 1 https://github.com/me/example.git
 ```
 
-Depending on your environment you may need to adjust the top-level `module` settings in your project's Hugo config file, for example, by adding a proxy to use when downloading remote modules.
-You can find details of what these configuration settings do in the [Hugo modules documentation](https://gohugo.io/hugo-modules/configuration/#module-config-top-level). 
+Depending on your environment you may need to adjust the top-level `module`
+settings in your project's Hugo config file, for example, by adding a proxy to
+use when downloading remote modules. You can find details of what these
+configuration settings do in the
+[Hugo modules documentation](https://gohugo.io/hugo-modules/configuration/#module-config-top-level).
 
-Once your settings are adjusted, you can edit your own versions of the site’s source files.
+Once your settings are adjusted, you can edit your own versions of the site’s
+source files.
 
-If you want to do SCSS edits and want to publish these, you need to install `PostCSS`
+If you want to do SCSS edits and want to publish these, you need to install
+`PostCSS`
 
 ```bash
 npm install
@@ -50,11 +61,14 @@ npm install
 
 ## Running the website locally
 
-Building and running the site locally requires a recent `extended` version of [Hugo](https://gohugo.io).
-You can find out more about how to install Hugo for your environment in our
-[Getting started](https://www.docsy.dev/docs/getting-started/#prerequisites-and-installation) guide.
+Building and running the site locally requires a recent `extended` version of
+[Hugo](https://gohugo.io). You can find out more about how to install Hugo for
+your environment in our
+[Getting started](https://www.docsy.dev/docs/getting-started/#prerequisites-and-installation)
+guide.
 
-Once you've made your working copy of the site repo, from the repo root folder, run:
+Once you've made your working copy of the site repo, from the repo root folder,
+run:
 
 ```bash
 hugo server
@@ -62,12 +76,11 @@ hugo server
 
 ## Running a container locally
 
-You can run docsy-example inside a [Docker](https://docs.docker.com/)
-container, the container runs with a volume bound to the `docsy-example`
-folder. This approach doesn't require you to install any dependencies other
-than [Docker Desktop](https://www.docker.com/products/docker-desktop) on
-Windows and Mac, and [Docker Compose](https://docs.docker.com/compose/install/)
-on Linux.
+You can run docsy-example inside a [Docker](https://docs.docker.com/) container,
+the container runs with a volume bound to the `docsy-example` folder. This
+approach doesn't require you to install any dependencies other than
+[Docker Desktop](https://www.docker.com/products/docker-desktop) on Windows and
+Mac, and [Docker Compose](https://docs.docker.com/compose/install/) on Linux.
 
 1. Build the docker image
 
@@ -85,10 +98,10 @@ on Linux.
 
 1. Verify that the service is working.
 
-   Open your web browser and type `http://localhost:1313` in your navigation bar,
-   This opens a local instance of the docsy-example homepage. You can now make
-   changes to the docsy example and those changes will immediately show up in your
-   browser after you save.
+   Open your web browser and type `http://localhost:1313` in your navigation
+   bar, This opens a local instance of the docsy-example homepage. You can now
+   make changes to the docsy example and those changes will immediately show up
+   in your browser after you save.
 
 ### Cleanup
 
@@ -99,13 +112,16 @@ To remove the produced images run:
 ```bash
 docker-compose rm
 ```
+
 For more information see the [Docker Compose documentation][].
 
 ## Using a local Docsy clone
 
 Make sure your installed go version is `1.18` or higher.
 
-Clone the latest version of the docsy theme into the parent folder of your project. The newly created repo should now reside in a sibling folder of your site's root folder.
+Clone the latest version of the docsy theme into the parent folder of your
+project. The newly created repo should now reside in a sibling folder of your
+site's root folder.
 
 ```shell
 cd root-of-your-site
@@ -124,16 +140,24 @@ or, when using npm, prepend `local` to the script you want to invoke, e.g.:
 npm run local serve
 ```
 
-By using the `HUGO_MODULE_WORKSPACE` directive (either directly or via prefix `local` when using npm), the server now watches all files and directories inside the sibling directory `../docsy` , too. Any changes inside the local `docsy` theme clone are  now immediately picked up (hot reload), you can instantly see the effect of your local edits.
+By using the `HUGO_MODULE_WORKSPACE` directive (either directly or via prefix
+`local` when using npm), the server now watches all files and directories inside
+the sibling directory `../docsy` , too. Any changes inside the local `docsy`
+theme clone are now immediately picked up (hot reload), you can instantly see
+the effect of your local edits.
 
-In the command above, we used the environment variable `HUGO_MODULE_WORKSPACE` to tell hugo about the local workspace file `docsy.work`. Alternatively, you can declare the workspace file inside your settings file `hugo.toml`:
+In the command above, we used the environment variable `HUGO_MODULE_WORKSPACE`
+to tell hugo about the local workspace file `docsy.work`. Alternatively, you can
+declare the workspace file inside your settings file `hugo.toml`:
 
 ```toml
 [module]
   workspace = "docsy.work"
 ```
 
-Your project's `hugo.toml` file already contains these lines, the directive for workspace assignment is commented out, however. Remove the two trailing comment characters '//' so that this line takes effect.
+Your project's `hugo.toml` file already contains these lines, the directive for
+workspace assignment is commented out, however. Remove the two trailing comment
+characters '//' so that this line takes effect.
 
 ## Troubleshooting
 
@@ -148,8 +172,10 @@ Error: Error building site: "C:\Users\foo\path\to\docsy-example\content\en\_inde
 Built in 27 ms
 ```
 
-This error occurs if you are running an outdated version of Hugo. As of docsy theme version `v0.12.0`, hugo version `0.146.0` or higher is required.
-See this [section](https://www.docsy.dev/docs/get-started/docsy-as-module/installation-prerequisites/#install-hugo) of the user guide for instructions on how to install Hugo.
+This error occurs if you are running an outdated version of Hugo. As of docsy
+theme version `v0.12.0`, hugo version `0.146.0` or higher is required. See this
+[section](https://www.docsy.dev/docs/get-started/docsy-as-module/installation-prerequisites/#install-hugo)
+of the user guide for instructions on how to install Hugo.
 
 Or you may be confronted with the following error:
 
@@ -162,8 +188,10 @@ Built in 288 ms
 Error: Error building site: TOCSS: failed to transform "scss/main.scss" (text/x-scss): resource "scss/scss/main.scss_9fadf33d895a46083cdd64396b57ef68" not found in file cache
 ```
 
-This error occurs if you have not installed the extended version of Hugo.
-See this [section](https://www.docsy.dev/docs/get-started/docsy-as-module/installation-prerequisites/#install-hugo) of the user guide for instructions on how to install Hugo.
+This error occurs if you have not installed the extended version of Hugo. See
+this
+[section](https://www.docsy.dev/docs/get-started/docsy-as-module/installation-prerequisites/#install-hugo)
+of the user guide for instructions on how to install Hugo.
 
 Or you may encounter the following error:
 
@@ -173,15 +201,17 @@ $ hugo server
 Error: failed to download modules: binary with name "go" not found
 ```
 
-This error occurs if the `go` programming language is not available on your system.
-See this [section](https://www.docsy.dev/docs/get-started/docsy-as-module/installation-prerequisites/#install-go-language) of the user guide for instructions on how to install `go`.
-
+This error occurs if the `go` programming language is not available on your
+system. See this
+[section](https://www.docsy.dev/docs/get-started/docsy-as-module/installation-prerequisites/#install-go-language)
+of the user guide for instructions on how to install `go`.
 
 [alternate dashboard]: https://app.netlify.com/sites/AngularTS/deploys
 [deploys]: https://app.netlify.com/sites/docsy-example/deploys
 [Docsy user guide]: https://docsy.dev/docs
 [Docsy]: https://github.com/google/docsy
 [example.docsy.dev]: https://example.docsy.dev
-[Hugo theme module]: https://gohugo.io/hugo-modules/use-modules/#use-a-module-for-a-theme
+[Hugo theme module]:
+  https://gohugo.io/hugo-modules/use-modules/#use-a-module-for-a-theme
 [Netlify]: https://netlify.com
 [Docker Compose documentation]: https://docs.docker.com/compose/gettingstarted/

package/docs/assets/scss/_variables_project.scss

@@ -4,3 +4,9 @@ Add styles or override variables from the theme here.
 
 */
 
+$primary: #117cee;
+$secondary: #005fc4;
+
+$td-enable-google-fonts: true;
+$td-google-font-name: 'Inter';
+$td-google-font-family: 'Inter:300,400,700,800,900';

package/docs/assets/scss/_variables_project_after_bs.scss

@@ -0,0 +1,8 @@
+body {
+  font-family: 'Inter', sans-serif !important;
+  & .navbar-brand__name {
+    margin-left: -5px;
+  }
+}
+
+@import 'index.scss';

package/docs/assets/scss/index.scss

@@ -0,0 +1,13 @@
+#td-cover-block-0 {
+  h1 {
+    font-weight: 900;
+
+    & span {
+      color: var(--bs-secondary);
+    }
+  }
+
+  &::after {
+    background-color: white !important; // override dark overlay
+  }
+}

package/docs/content/{en/_index.md → _index.md}

@@ -2,7 +2,12 @@
 title: AngularTS
 ---
 
-{{< blocks/cover title="AngularTS" image_anchor="top" height="full" >}}
+{{< blocks/cover color="white" height="full" >}}
+
+<div class="text-center">
+  <h1 class="display-1 mt-0 mt-md-5 pb-4">Angular<span>TS</span></h1>
+</div>
+
 <p class="lead mb-5">A modern, reactive and typesafe evolution of the classic JS framework from Google&copy;</p>
 <a class="btn btn-lg btn-secondary me-3 mb-4" href="https://github.com/Angular-Wave/angular.ts">
   Download <i class="fab fa-github ms-2 "></i>

package/docs/content/docs/_index.md

@@ -0,0 +1,60 @@
+---
+title: Documentation
+linkTitle: Docs
+menu: { main: { weight: 20 } }
+---
+
+Welcome to AngularTS documentation.
+
+This section is a work in progress. Its content will be updated regularly but
+feel free to rely on [AngularJS](https://docs.angularjs.org/guide) documentation
+in the meantime.
+
+---
+
+### What is AngularTS?
+
+AngularTS is buildless, type-safe and reactive JS framework for building
+stuctured web applications at any scale. It continues the legacy of
+[AngularJS](https://angularjs.org/) of providing the best developer experience
+via immediate productivity without the burden of JS ecosystem tooling. Getting
+started with AngularTS does not even require JavaScript. All you need is a
+little bit of HTML. Below is a canonical example of a counter:
+
+#### Example
+
+{{< showhtml src="examples/counter/counter.html" >}}
+
+#### Result
+
+{{< showraw src="examples/counter/counter.html" >}}
+
+---
+
+This code demonstrates the following key AngularTS features:
+
+- **HTML-first:** AngularTS is designed for HTML-first approach, meaning your
+  application logic can be expressed declaratively in your markup using custom
+  attributes--called _directives_. Here, we are using `ng-init` directive to
+  initialize our application state and `ng-click` directive to add an event
+  handler that changes our state.
+- **Template-driven:** AngularTS’s built-in template engine automatically keeps
+  the UI in sync with your application state, eliminating the need for manual
+  DOM tracking and updates. The `{{count}}` expression above is an example of
+  Angular's interpolation syntax. As the value of `count` variable increases,
+  our UI is updated with the new state.
+
+- **Island-first and zero-cost:** AngularTS creates an application on any HTML
+  tag with `ng-app` attribute, allowing multiple independent applications to
+  live on a single page. The enables AngularTS to work alongside your existing
+  tech stack where the majority of your page is rendered on the server, while
+  AngularTS is isolated to small “islands” (regions of your page) where custom
+  interactivity or personalization is required.
+
+- **Micro-framework appearance:** With its minimal setup, AngularTS is
+  well-suited for quick experiments, LLM-generated code, and learning web
+  development in general. But beneath its lightweight surface, it supports
+  structured enterprise design patterns, MVC architecture, and component-driven
+  design. With its rich directive library, state-based routing and support for
+  animations, AngularTS is a complete package for building large SPAs, server,
+  mobile, and desktop applications.

package/docs/content/docs/directive/_index.md

@@ -0,0 +1,4 @@
+---
+title: Directives
+weight: 10
+---

package/docs/content/docs/directive/app.md

@@ -0,0 +1,11 @@
+---
+title: ng-app
+description: >
+  Bootstrap AngularTS application
+---
+
+### Description
+
+Use this directive to auto-bootstrap an AngularTS application. The `ng-app`
+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.

package/docs/content/docs/directive/channel.md

@@ -0,0 +1,39 @@
+---
+title: ng-channel
+description: >
+  Subscribe a template to a messaging service topic
+---
+
+### Description
+
+Updates element’s content by subscribing to events published on a named channel
+using `$eventBus`.
+
+- If the element **does not** contain any child elements or templates, the
+  directive will **replace the element's inner HTML** with the published value.
+- If the element **does** contain a template and the published value is an
+  **object**, the directive will **merge the object’s key-value pairs into the
+  current scope**, allowing Angular expressions like `{{ user.firstName }}` to
+  be evaluated and rendered.
+
+The directive automatically unsubscribes from the event channel when the scope
+is destroyed.
+
+### Parameters
+
+---
+
+#### `ng-channel`
+
+- **Type:** `string`
+- **Description:** The name of the channel to subscribe to using `$eventBus`.
+
+### Example
+
+{{< showhtml src="examples/ng-channel/ng-channel.html" >}}
+
+### Demo
+
+{{< showraw src="examples/ng-channel/ng-channel.html" >}}
+
+---

package/docs/content/docs/directive/class-even.md

@@ -0,0 +1,47 @@
+---
+title: ng-class-even
+description: >
+  Apply CSS classes to even-indexed elements inside `ng-repeat`.
+---
+
+### Description
+
+The `ng-class-even` directive works just like [`ng-class`](./class), but it
+applies only to **even-indexed** elements in an [`ng-repeat`](../repeat) block.
+
+> Must be used inside `ng-repeat`.
+
+### Animations
+
+If `data-animate` attribute is present, the following animations will be applied
+to the element:
+
+| Animation                               | Occurs                                       |
+| --------------------------------------- | -------------------------------------------- |
+| [`add-class`](../../service/animate)    | Before the class is applied to the element   |
+| [`remove-class`](../../service/animate) | Before the class is removed from the element |
+
+### Directive parameters
+
+---
+
+#### `ng-class-even`
+
+- **Type:** `string | array`
+- **Description:** An expression evaluating to a space-delimited string or array
+  of class names.
+- **Example:**
+
+  ```html
+  <div ng-repeat="item in items" ng-class-even="'even-row'"></div>
+  ```
+
+---
+
+### Example
+
+{{< showhtml src="examples/ng-class-even/ng-class-even.html" >}}
+
+### Demo
+
+{{< showraw src="examples/ng-class-even/ng-class-even.html" >}}

package/docs/content/docs/directive/class-odd.md

@@ -0,0 +1,48 @@
+---
+title: ng-class-odd
+description: >
+  Apply CSS classes to odd-indexed elements inside `ngRepeat`.
+---
+
+### Description
+
+The `ng-class-odd` directive works just like [`ng-class`](../class), but it
+applies only to **odd-indexed** elements inside an [`ng-repeat`](../repeat)
+block.
+
+> Must be used inside `ng-repeat`.
+
+### Animations
+
+If `data-animate` attribute is present, the following animations will be applied
+to the element:
+
+| Animation                               | Occurs                                       |
+| --------------------------------------- | -------------------------------------------- |
+| [`add-class`](../../service/animate)    | Before the class is applied to the element   |
+| [`remove-class`](../../service/animate) | Before the class is removed from the element |
+
+### Directive parameters
+
+---
+
+#### `ng-class-odd`
+
+- **Type:** `string | array`
+- **Description:** An expression evaluating to a space-delimited string or array
+  of class names.
+- **Example:**
+
+  ```html
+  <div ng-repeat="item in items" ng-class-odd="'odd-row'"></div>
+  ```
+
+---
+
+### Example
+
+{{< showhtml src="examples/ng-class-odd/ng-class-odd.html" >}}
+
+### Demo
+
+{{< showraw src="examples/ng-class-odd/ng-class-odd.html" >}}

package/docs/content/docs/directive/class.md

@@ -0,0 +1,64 @@
+---
+title: ng-class
+description: >
+  Dynamically bind one or more CSS classes using expressions.
+---
+
+### Description
+
+The `ng-class` directive allows dynamically setting CSS classes on an HTML
+element by binding to an expression. The directive supports the following
+expression types:
+
+1. **String** — space-delimited class names.
+2. **Object** — keys as class names and values as booleans. Truthy values add
+   the class.
+3. **Array** — containing strings and/or objects as described above.
+
+When the expression changes:
+
+- Previously added classes are removed.
+- New classes are added.
+- Duplicate classes are avoided.
+
+**Important**: Avoid using interpolation (`{{ ... }}`) in the value of the
+`class` attribute together with `ng-class`. See
+[interpolation known issues](../../../docs/guide/interpolation#known-issues) for
+details.
+
+### Animations
+
+If `data-animate` attribute is present, the following animations will be applied
+to the element:
+
+| Animation                               | Occurs                                              |
+| --------------------------------------- | --------------------------------------------------- |
+| [`add-class`](../../service/animate)    | Before the class is applied to the element          |
+| [`remove-class`](../../service/animate) | Before the class is removed from the element        |
+| [`set-class`](../../service/animate)    | Before classes are simultaneously added and removed |
+
+> `ng-class` supports standard CSS3 transitions/animations even if they don’t
+> follow `$animate` service naming conventions.
+
+### Directive parameters
+
+---
+
+#### `ng-class`
+
+- **Type:** `string | object | array`
+- **Description:** An expression whose result determines the CSS classes to
+  apply.
+- **Example:**
+
+  ```html
+  <div ng-class="{ active: isActive, disabled: isDisabled }"></div>
+  ```
+
+### Example
+
+{{< showhtml src="examples/ng-class/ng-class.html" >}}
+
+### Demo
+
+{{< showraw src="examples/ng-class/ng-class.html" >}}

package/docs/content/docs/directive/cloak.md

@@ -0,0 +1,78 @@
+---
+title: ng-cloak
+description: >
+  Hide interpolated templates
+---
+
+### Description
+
+The `ng-cloak` directive is used to prevent the HTML template from being briefly
+displayed by the browser in its raw (uncompiled) form while your application is
+loading. Use this directive to avoid the undesirable flicker effect caused by
+the HTML template display.
+
+The directive can be applied to the `<body>` element, but the preferred usage is
+to apply multiple `ng-cloak` directives to small portions of the page to permit
+progressive rendering of the browser view.
+
+`ng-cloak` works in cooperation with the following CSS rule:
+
+```css
+@charset "UTF-8";
+
+[ng-cloak],
+[data-ng-cloak],
+.ng-cloak,
+.ng-hide:not(.ng-hide-animate) {
+  display: none !important;
+}
+
+.ng-animate-shim {
+  visibility: hidden;
+}
+
+.ng-anchor {
+  position: absolute;
+}
+```
+
+CSS styles are available in npm distribution:
+
+```html
+<link
+  rel="stylesheet"
+  href="https://cdn.jsdelivr.net/npm/@angular-wave/angular.ts/css/angular.min.css"
+/>
+```
+
+or using `style` tag:
+
+```html
+<style>
+  @charset "UTF-8";
+  .ng-cloak,
+  .ng-hide:not(.ng-hide-animate),
+  [data-ng-cloak],
+  [ng-cloak] {
+    display: none !important;
+  }
+  .ng-animate-shim {
+    visibility: hidden;
+  }
+  .ng-anchor {
+    position: absolute;
+  }
+</style>
+```
+
+### Example
+
+```html
+<section ng-app ng-clock>These tags are invisible {{ hello }}</section>
+```
+
+### Demo
+
+<section ng-app ng-clock> These tags are invisible {{ hello }} </section>
+
+---

package/docs/content/docs/directive/include.md

@@ -0,0 +1,7 @@
+---
+title: ng-include
+description: >
+  Include a template
+---
+
+### Description

package/docs/content/docs/filter/_index.md

@@ -0,0 +1,4 @@
+---
+title: Filters
+weight: 60
+---

package/docs/content/docs/provider/_index.md

@@ -0,0 +1,4 @@
+---
+title: Providers
+weight: 30
+---

package/docs/content/docs/provider/eventBusProvider.md

@@ -0,0 +1,35 @@
+---
+title: $eventBusProvider
+description: >
+  Configuration provider for `$eventBus` service.
+---
+
+### Description
+
+Instance of [PubSubProvider](../../../typedoc/classes/PubSubProvider.html) for
+configuring the `$eventBus` service. The default implementation returns the
+global `angular.EventBus` instance, which is an async instance of
+[PubSub](../../../typedoc/classes/PubSub.html) class.
+
+### Properties
+
+---
+
+#### $eventBusProvider.eventBus
+
+Customize event bus instance.
+
+- **Type:** [PubSub](../../../typedoc/classes/PubSub.html)
+- **Default:** `angular.EventBus`
+
+- **Example:**
+
+  ```js
+  angular.module('demo', []).config(($eventBusProvider) => {
+    eventBusProvider.eventBus = new MyCustomPubsub();
+  });
+  ```
+
+---
+
+For service description, see [$eventBus](../../../docs/service/eventbus).