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.