Get started

• 1: AngularTS: modern evolution of AngularJS
• 2: Install AngularTS in your project
• 3: Build your first application
• 4: How AngularTS works
• 5: Choose your learning path
• 6: Build your first AngularTS app

1 - AngularTS: modern evolution of AngularJS

AngularTS is a modernized continuation of AngularJS — carrying forward its three core pillars (string interpolation, dependency injection, and two-way data binding) while rebuilding the internals around a reactive change-detection model, full TypeScript support, and direct access to native browser APIs. It requires no build step and no bundler to get started.

What AngularTS preserves from AngularJS

AngularJS was the result of a decade of engineering by the Angular team at Google and accumulated one of the largest test suites in open-source JavaScript. AngularTS inherits that foundation directly:

• Declarative HTML templates using familiar ng-* directives
• Dependency injection container for organizing and composing application services
• Two-way data binding between the DOM and application state
• Controllers, filters, and the module system — all structurally compatible with AngularJS patterns

If you have existing AngularJS knowledge, the mental model transfers directly.

What AngularTS adds

AngularTS extends the AngularJS foundation with modern primitives and new capabilities:

Reactive change detection

Proxy-based reactivity replaces the digest cycle. The DOM updates only when data actually changes — no polling, no virtual DOM diffing.

Native DOM and Promises

Directives and controllers work directly with native DOM APIs. The $q and $timeout abstractions are replaced by native Promise and setTimeout.

Built-in enterprise router

ng-router is a port of ui-router, supporting nested views, state transitions, resolves, and URL matching out of the box.

Declarative HTTP directives

ng-get, ng-post, ng-put, and ng-delete let you make HTTP requests declaratively from HTML attributes. The server-first approach may feel familiar to HTMX users, but AngularTS has its own API and behavior.

Real-time injectables

$websocket, $sse (Server-Sent Events), $rest, Web Workers, and WebAssembly modules are first-class injectable services.

Built-in animations

CSS and JavaScript animation support ships in the core package with no additional dependencies.

When to use AngularTS

AngularTS is a strong fit for these scenarios:

Server-rendered applications with interactive islands. Any HTML element can host an independent ng-app. You can drop AngularTS into a server-rendered page and add interactivity to specific regions without restructuring the whole application.

Applications where a build step is a liability. AngularTS loads from a CDN script tag and runs directly in the browser. There are no compilation steps, no bundler configuration files, and no Node.js required to develop or deploy.

Large-scale SPAs that need structure. The module system, dependency injection, state-based router, and MVC architecture scale to enterprise applications. AngularTS is not just a micro-library — it is a complete framework for applications of any size.

Migrating from AngularJS. If you maintain an AngularJS codebase and want to modernize incrementally, AngularTS preserves the API surface you already know.

How it compares to other frameworks

Note: Angular 2+ (also called just “Angular”) is a complete rewrite of AngularJS and shares no API surface with it. AngularTS is a continuation of AngularJS — not a migration target from Angular 2+.

Philosophy

AngularTS stays as close to web standards as possible. It avoids inventing abstractions where the platform already provides them: native Promise instead of $q, native fetch under the hood for $http, direct DOM element references in directives instead of jQuery wrappers. This keeps the mental model small and the debugging experience familiar.

The result is described by the project as “a high-performance, buildless, multi-paradigm and battle-tested JS framework.”

Next steps

Installation

Add AngularTS to your project via CDN or npm.

Quickstart

Build a working counter and todo list in minutes.

2 - Install AngularTS in your project

AngularTS can be added to any project in two ways: a single <script> tag for zero-configuration browser use, or an npm package for projects that use a bundler or want TypeScript declarations. Both approaches support the full framework — there is no difference in available features between the two.

CDN

The fastest way to get started is to load AngularTS directly from jsDelivr. No installation, no configuration — just add the script to your HTML file:

<html>
  <head>
    <script src="https://cdn.jsdelivr.net/npm/@angular-wave/angular.ts/dist/angular-ts.umd.min.js"></script>
  </head>
  <body>
    <div ng-app ng-init="x = 'world'">Hello {{ x }}</div>
  </body>
</html>

The UMD build exposes the angular global on window and auto-bootstraps any element with an ng-app attribute once the DOM is ready.

Tip: The CDN URL always points to the latest published version on npm. To pin a specific version, include it in the URL: https://cdn.jsdelivr.net/npm/@angular-wave/angular.ts@0.26.0/dist/angular-ts.umd.min.js

npm

Install the package from the npm registry:

npm install @angular-wave/angular.ts

yarn add @angular-wave/angular.ts

pnpm add @angular-wave/angular.ts

The package ships two distribution formats:

• ESM (dist/angular-ts.esm.js) — the default entry point for bundlers
• UMD (dist/angular-ts.umd.js) — for direct browser use

Import the library in your entry file:

import { angular } from '@angular-wave/angular.ts';

The default ESM import and UMD script both scan for ng-app once the DOM is ready. The angular singleton is also assigned to window.angular automatically.

TypeScript setup

The published package includes generated TypeScript declarations under @types/. No separate @types/ package is required.

After installing, TypeScript will resolve types automatically. You can reference the type namespace in your project:

const myModule: ng.NgModule = angular.createModule('myApp', []);

myModule.controller('MyController', [
  '$scope',
  function ($scope: ng.Scope) {
    $scope.message = 'Hello, AngularTS';
  },
]);

Info: The ng namespace provides types for scopes, injectors, services, directives, and all other AngularTS primitives. It is declared globally by the package and available anywhere TypeScript resolves the package types.

Auto-bootstrap with ng-app

The simplest way to start an AngularTS application is the ng-app attribute. Place it on any HTML element and AngularTS will bootstrap that element as the application root when the DOM is ready. Importing the default package entry is enough; no startup call is needed for a static ng-app root.

<div ng-app>{{ 1 + 1 }}</div>

To connect a named module, set ng-app to the module name:

<div ng-app="myApp">
  <p ng-controller="GreetController">{{ greeting }}</p>
</div>

<script src="https://cdn.jsdelivr.net/npm/@angular-wave/angular.ts/dist/angular-ts.umd.min.js"></script>
<script>
  angular.createModule('myApp', []).controller('GreetController', [
    '$scope',
    function ($scope) {
      $scope.greeting = 'Hello from AngularTS';
    },
  ]);
</script>

Multiple independent ng-app elements can exist on the same page. Each becomes its own isolated application instance.

Explicit dependency injection

AngularTS requires explicit annotations for every dependency-bearing function. Use array annotation or a static $inject property; parameter names are never interpreted as injection tokens.

Manual bootstrap with angular.bootstrap()

For full control over when and how your application starts, call angular.bootstrap() directly instead of using ng-app:

<html>
  <head>
    <script src="https://cdn.jsdelivr.net/npm/@angular-wave/angular.ts/dist/angular-ts.umd.min.js"></script>
  </head>
  <body>
    <div id="app">
      <p ng-controller="WelcomeController">{{ greeting }}</p>
    </div>

    <script>
      angular.createModule('demo', []).controller('WelcomeController', [
        '$scope',
        function ($scope) {
          $scope.greeting = 'Welcome!';
        },
      ]);

      angular.bootstrap(document.getElementById('app'), ['demo']);
    </script>
  </body>
</html>

angular.bootstrap() accepts two arguments:

It returns the $injector instance for the bootstrapped application.

Warning: Do not call angular.bootstrap() on an element that already has an ng-app attribute, or on an element that contains ng-view, ng-if, or other transclusion directives. This causes the root element and injector to be misplaced.

Next steps

Quickstart

Build a working app with a counter and todo list.

Modules

Learn how the AngularTS module system organizes your application.

3 - Build your first application

What you will build

You will build a task list that accepts text, adds tasks, marks them complete, and shows the remaining count. The whole application fits in one HTML file.

Before you start

Complete installation or use the CDN script shown below. Create index.html.

Create the application

<html>
  <head>
    <script src="https://cdn.jsdelivr.net/npm/@angular-wave/angular.ts/dist/angular-ts.umd.min.js"></script>
  </head>
  <body ng-app="todoApp" ng-controller="TodoController">
    <form ng-submit="addTodo()">
      <input ng-model="draft" placeholder="What needs doing?" required />
      <button>Add</button>
    </form>
    <p>{{ remaining() }} remaining</p>
    <ul>
      <li ng-repeat="todo in todos">
        <input type="checkbox" ng-model="todo.done" /> {{ todo.title }}
      </li>
    </ul>
    <!-- Add the script below here. -->
  </body>
</html>

Place this script before the closing body tag, where the comment appears:

<script>
  angular.createModule('todoApp', []).controller('TodoController', [
    '$scope',
    ($scope) => {
      $scope.draft = '';
      $scope.todos = [{ title: 'Learn AngularTS', done: false }];
      $scope.addTodo = () => {
        if (!$scope.draft.trim()) return;
        $scope.todos.push({ title: $scope.draft.trim(), done: false });
        $scope.draft = '';
      };
      $scope.remaining = () => $scope.todos.filter((todo) => !todo.done).length;
    },
  ]);
</script>

Open the file in a browser. Enter a task and press Add. The list and count change without a page reload.

Understand each part

ng-app="todoApp" starts the named module. A module is the application container. ng-controller connects behavior and state to this part of the DOM. The injected $scope is the reactive state visible to the HTML template.

ng-model keeps an input and state property synchronized. ng-submit runs a function when the form is submitted. ng-repeat creates one list item per task. {{ remaining() }} displays an expression and refreshes when its reactive inputs change.

Make a change

Change the initial task title, reload the page, and add two tasks. Then open the browser console and resolve any reported error before continuing.

Next step

Read how AngularTS works to connect the code to the framework lifecycle.

4 - How AngularTS works

What you will learn

You will trace the first application from page load to a reactive DOM update.

Before you start

Complete the first application.

Startup in six steps

1. The browser parses the HTML and creates the DOM.
2. The AngularTS script finds the element marked with ng-app.
3. AngularTS loads that element’s named module and creates an injector.
4. The compiler walks the element’s DOM and finds directives.
5. The controller creates state on its scope.
6. Directives connect that state to text, properties, events, and child DOM.

An injector creates and shares dependencies. A directive adds behavior to HTML. A scope owns reactive state and lifecycle cleanup. The compiler is the runtime process that connects directives to DOM nodes; it is not a build step.

A reactive update

When addTodo() pushes an item into todos, the reactive scope records that change. AngularTS schedules the affected bindings, updates the repeated list and remaining count, and leaves unrelated DOM alone.

You do not manually redraw the page, compare a virtual DOM, or start a digest loop. Browser events and native asynchronous callbacks can update reactive state directly.

Application structure

Small applications may stay in one file. Larger applications normally use a module, components for UI regions, services for shared behavior or data, and a router for multiple screens. Dependency injection connects those parts without global variables.

Next step

Choose a learning path.

5 - Choose your learning path

What you will learn

This page selects the shortest route from the beginner tutorial to your goal.

Before you start

Complete how AngularTS works or be comfortable with modules, scopes, directives, and reactive updates.

Build with HTML templates

Read template views, then the form and server-data guides.

Build with type-safe views

Read typed views, then collections and cleanup.

Build a multi-screen application

Read application structure and then routing.

Move an existing application

Use the migration guide. It separates AngularJS-compatible concepts from AngularTS replacements.

Use another language

Use the integration guide after learning the runtime concepts in this tutorial.

Optimize and standardize an application

Use the cookbook after the first feature is working. Start by measuring, then apply the narrowest relevant recipe. Adopt the application style guide before multiple contributors add components.

Next step

Open the first page in the path that matches your project.

6 - Build your first AngularTS app

AngularTS apps are built from HTML and JavaScript — no compilation required. This guide walks through creating a module, wiring up a controller, and using directives to bind data to the DOM. By the end you will have a working counter and a functional todo list.

Add AngularTS to your page

Create an HTML file and include the AngularTS script from the CDN. This single tag is all you need to get the full framework:

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>My AngularTS App</title>
    <script src="https://cdn.jsdelivr.net/npm/@angular-wave/angular.ts/dist/angular-ts.umd.min.js"></script>
  </head>
  <body>
    <!-- application markup goes here -->
  </body>
</html>

If you are using npm, install the package and import the singleton instead:

npm install @angular-wave/angular.ts

import { angular } from '@angular-wave/angular.ts';

Create a module

A module is the top-level container for your application. It holds controllers, services, directives, and filters. Create one by calling angular.createModule() with a name and an empty dependency array:

const app = angular.createModule('myApp', []);

The first argument is the module name. The second argument lists other modules your module depends on — an empty array means no dependencies. You reference this name in the ng-app attribute to tell AngularTS which module to bootstrap.

Connect the module to your HTML by adding ng-app to a container element:

<body ng-app="myApp">
  <!-- AngularTS controls everything inside this element -->
</body>

Add a controller

Controllers attach behavior to a region of the DOM. They receive a $scope object — a plain JavaScript object that acts as the data model for their template. Anything you put on $scope becomes available in the HTML template.

const app = angular.createModule('myApp', []);

app.controller('CounterController', [
  '$scope',
  function ($scope) {
    $scope.count = 0;

    $scope.increment = function () {
      $scope.count++;
    };

    $scope.decrement = function () {
      if ($scope.count > 0) {
        $scope.count--;
      }
    };
  },
]);

Attach the controller to a DOM element with ng-controller:

<body ng-app="myApp">
  <div ng-controller="CounterController">
    <p>Count: {{ count }}</p>
    <button ng-click="increment()">+</button>
    <button ng-click="decrement()">-</button>
  </div>
</body>

The {{ count }} expression is AngularTS’s interpolation syntax — it renders the current value of $scope.count and updates automatically whenever the value changes. ng-click binds a click event to the controller method.

Use directives in your template

Directives are the building blocks of AngularTS templates. They extend HTML with behavior declared as attributes or element names. The core library ships over 50 directives covering data binding, conditional rendering, list rendering, forms, and HTTP requests.

Here is a complete counter example using only HTML attributes and no separate JavaScript file:

<!doctype html>
<html>
  <head>
    <script src="https://cdn.jsdelivr.net/npm/@angular-wave/angular.ts/dist/angular-ts.umd.min.js"></script>
  </head>
  <body>
    <section ng-app ng-cloak>
      <button ng-init="count = 0" ng-click="count++">
        Count is: {{ count }}
      </button>
    </section>
  </body>
</html>

Key directives used here:

• ng-app — designates the root element of the application and triggers auto-bootstrap
• ng-cloak — hides the element until AngularTS has compiled the template, preventing a flash of unrendered {{ }} expressions
• ng-init — initializes a scope variable inline; useful for simple cases without a controller
• ng-click — evaluates an expression when the element is clicked

Complete example: todo list

This excerpt combines a named module, two-way binding, and list rendering. Put the normal AngularTS script tag in the document head as shown above.

<section ng-app="todoApp" ng-controller="TodoController">
  <form ng-submit="addTodo()">
    <input ng-model="newTodo" required />
    <button>Add</button>
  </form>
  <li ng-repeat="todo in todos">
    <input type="checkbox" ng-model="todo.done" />
    {{ todo.text }}
  </li>
</section>

<script>
  angular.createModule('todoApp', []).controller('TodoController', [
    '$scope',
    ($scope) => {
      $scope.todos = [];
      $scope.addTodo = () =>
        $scope.todos.push({ text: $scope.newTodo, done: false });
    },
  ]);
</script>

This example uses:

Using TypeScript

If you are working with npm and TypeScript, annotate the controller function using the ng.Scope type:

interface TodoItem {
  text: string;
  done: boolean;
}

interface TodoScope extends ng.Scope {
  todos: TodoItem[];
  newTodo: string;
  addTodo(): void;
  remaining(): number;
}

angular.createModule('todoApp', []).controller('TodoController', [
  '$scope',
  function ($scope: TodoScope) {
    $scope.todos = [{ text: 'Learn AngularTS', done: false }];
    $scope.newTodo = '';

    $scope.addTodo = function () {
      if ($scope.newTodo.trim()) {
        $scope.todos.push({ text: $scope.newTodo.trim(), done: false });
        $scope.newTodo = '';
      }
    };

    $scope.remaining = function () {
      return $scope.todos.filter((t) => !t.done).length;
    };
  },
]);

Note: TypeScript declarations ship with the package under @types/. No separate @types/angular-wave__angular.ts package is needed.

Next steps

Core concepts

Understand how modules, dependency injection, and scopes work together.

Directives reference

Browse all 50+ built-in directives with examples.

Routing

Add state-based routing with nested views and URL matching.

Services

Use built-in services for HTTP, WebSockets, REST, and more.