Angular 2.0: Motivation, Design, and Key Features (with AngularJS 1.3 Overview)

AngularJS 1.3

AngularJS 1.3 is the most recent stable release of the original Angular framework, offering numerous bug fixes, feature enhancements, and performance improvements. It is recommended both for existing Angular projects that need an upgrade and for new projects that require a mature, production‑ready framework.

Commentary

The Angular team has not provided a clear migration path to Angular 2.0, but they have committed to supporting 1.3 for at least 1.5‑2 years. Developers are encouraged to voice their need for a migration strategy.

Motivation for Angular 2.0

Angular 2.0 is being rebuilt to address fundamental limitations of the 1.x architecture, including performance bottlenecks, mobile shortcomings, and usability issues.

Performance

The original design of AngularJS was geared toward rapid form creation rather than large‑scale application development, leading to inherent performance constraints that can only be solved with a new strategy.

The Changing Web

Modern browsers now provide consistent, fast DOM implementations and new standards such as ES6 modules, classes, generators, and Web Components (custom elements, HTML imports, template elements, and Shadow DOM). Angular 2.0 aims to integrate these capabilities.

Custom Elements – extend HTML with new tags

HTML Imports – package HTML, CSS, JS, etc.

Template Elements – hold inert HTML for later stamping

Shadow DOM – encapsulate DOM and CSS

Mobile

While Angular can be used for mobile apps, its original design does not address mobile‑specific performance, routing, view caching, or touch support, necessitating a ground‑up redesign.

Usability

AngularJS suffers from a steep learning curve due to legacy APIs (e.g., hard‑coded directives, controllers) that make the framework feel unintuitive. A cleaner, more consistent API is required for better developer experience.

Summary

Given the evolution of the web and the limitations of the 1.x codebase, a new version—Angular 2.0—is essential to stay relevant, especially regarding Web Components, mobile support, and modern JavaScript standards.

Angular 2.0 Features and Design

Below are the core areas of change in Angular 2.0.

AtScript

AtScript is an ES6 superset used to write Angular 2.0. It adds optional type annotations and metadata that enable runtime type inference and richer DI support.

import {Component} from 'angular';
import {Server} from './server';

@Component({selector: 'foo'})
export class MyComponent {
  constructor(server: Server) {
    this.server = server;
  }
}

The compiler translates the above into plain ES5 while preserving the type information for runtime use.

import * as rtts from 'rtts';
import {Component} from 'angular';
import {Server} from './server';
export class MyComponent {
  constructor(server) {
    rtts.types(server, Server);
    this.server = server;
  }
}
MyComponent.parameters = [{is: Server}];
MyComponent.annotate = [new Component({selector: 'foo'})];

AtScript’s runtime type system (RTTS) allows frameworks like Angular to discover dependencies without relying on function‑parameter names, which are lost during minification.

Dependency Injection (DI)

Angular 2.0 introduces a new DI system that is minification‑safe, supports instance scopes, and provides sub‑injectors for hierarchical service resolution. Example of a transient‑scoped service:

@TransientScope
export class MyClass { ... }

Sub‑injectors enable each route or component subtree to have its own service instances, improving modularity and testability.

Annotations

AtScript annotations supply metadata that the DI container consumes. For example, parameters and explicit @Inject annotations guide the injector in constructing objects.

Templates and Data Binding

Templates are compiled into a ProtoView, which is cached and later instantiated as a View. Views are inserted into a ViewPort for display. The compilation process is asynchronous, allowing dynamic loading of components via ES6 modules.

Dynamic Loading

Angular 2.0 supports asynchronous loading of directives and components, eliminating the static loading limitations of Angular 1.x.

Directives

There are three directive types in Angular 2.0:

Component Directive – combines a view and a controller into a custom element.

Decorator Directive – adds behavior to existing elements (e.g., ng‑show).

Template Directive – transforms HTML into reusable templates (e.g., ng‑if, ng‑repeat).

Components are defined with @ComponentDirective, and their controllers are plain classes whose constructors receive injected services.

@ComponentDirective({
  selector: 'tab-container',
  directives: [NgRepeat]
})
export class TabContainer {
  constructor(panes: Query<Pane>) {
    this.panes = panes;
  }
  select(selectedPane: Pane) { /* ... */ }
}

Decorator and Template directives follow a similar pattern, using @DecoratorDirective and @TemplateDirective annotations to bind attributes, observe changes, and manipulate the DOM.

Scope and $scope Removal

Angular 2.0 eliminates $scope; component classes expose properties directly to templates, simplifying the programming model.

Overall, Angular 2.0 re‑imagines the framework for modern web development by embracing ES6/TypeScript, Web Components, a robust DI system, and a component‑centric architecture.