Get Started

• 1: AngularTS: modern evolution of AngularJS
• 2: Install AngularTS in your project
• 3: 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.

HTMX-inspired HTTP directives

ng-get, ng-post, ng-put, and ng-delete let you make HTTP requests declaratively from HTML attributes.

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:

When loaded in a browser environment, 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.module("myApp", []);

myModule.controller("MyController", 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:

<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.module("myApp", []).controller("GreetController", 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.

Strict dependency injection

Add the strict-di attribute alongside ng-app to enable strict mode, which requires explicit dependency annotations and rejects minified code that relies on function parameter names:

  ...
</div>

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
        .module("demo", [])
        .controller("WelcomeController", function ($scope) {
          $scope.greeting = "Welcome!";
        });

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

angular.bootstrap() accepts three 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 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.module() with a name and an empty dependency array:

const app = angular.module("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.module("myApp", []);

app.controller("CounterController", 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

The following example demonstrates a more complete application using a named module, a controller, two-way binding with ng-model, list rendering with ng-repeat, and conditional display with ng-show. Everything runs from a single HTML file.

<html>
  <head>
    <meta charset="UTF-8" />
    <title>Todo List</title>
    <script src="https://cdn.jsdelivr.net/npm/@angular-wave/angular.ts/dist/angular-ts.umd.min.js"></script>
    <style>
      .done { text-decoration: line-through; color: #999; }
    </style>
  </head>
  <body ng-app="todoApp">
    <div ng-controller="TodoController">
      <h1>Todo List</h1>

      <!-- Add new item -->
      <form ng-submit="addTodo()">
        <input
          ng-model="newTodo"
          placeholder="What needs doing?"
          required
        />
        <button type="submit">Add</button>
      </form>

      <!-- Remaining count -->
      <p ng-show="todos.length > 0">
        {{ remaining() }} of {{ todos.length }} remaining
      </p>

      <!-- List of todos -->
      <ul>
        <li ng-repeat="todo in todos">
          <input type="checkbox" ng-model="todo.done" />
          <span ng-class="{ done: todo.done }">{{ todo.text }}</span>
          <button ng-click="removeTodo($index)">Remove</button>
        </li>
      </ul>

      <!-- Clear completed -->
      <button ng-click="clearDone()" ng-show="todos.length > remaining()">
        Clear completed
      </button>
    </div>

    <script>
      angular.module("todoApp", []).controller("TodoController", function ($scope) {
        $scope.todos = [
          { text: "Learn AngularTS", done: true },
          { text: "Build something", done: false },
        ];

        $scope.newTodo = "";

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

        $scope.removeTodo = function (index) {
          $scope.todos.splice(index, 1);
        };

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

        $scope.clearDone = function () {
          $scope.todos = $scope.todos.filter(function (t) {
            return !t.done;
          });
        };
      });
    </script>
  </body>
</html>

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.module("todoApp", []).controller(
  "TodoController",
  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.