[Translation] Differences Between Angular 1 and 2

Original article: link

Preface

Angular is already at v6.0.3, so why revisit the jump from 1.x to 2? Because versions 2/4/5/6 iterate on the same architectural foundations. Modules, components, pipes, DI, directives, and routing still look like Angular 2. Understanding the 1.x → 2 transition explains everything that followed.

Highlights of the shift

Angular 2 isn’t a minor upgrade—it’s a rewrite. Here’s where it diverges from Angular 1.x.

1. Angular 2 is a complete redesign rather than a patch on top of 1.x.
2. Controllers (a 1.x concept) disappear; Angular 2 embraces web-standard components.

   

3. $scope is gone. Angular 2 relies on Zone.js to help with change detection.
4. Mobile support becomes a first-class goal in Angular 2; 1.x had limited mobile stories.
5. TypeScript is the recommended language for Angular 2—bringing static typing, decorators, and ES6+ features. Angular 1.x was plain JavaScript.
6. Dependency injection becomes hierarchical, and change detection adopts a unidirectional tree approach for better performance.
7. DI is expressed through constructor parameters instead of inline $inject arrays.
8. Template local variables use the #variable syntax.
9. Structural directives switch from ng-repeat to *ngFor.
10. Directive names move from dash-case (ng-class) to camelCase (ngClass, ngModel).
11. Bootstrapping is unified—no more ng-app attribute. You bootstrap via code.
12. Routing is built around decorators instead of $routeProvider:

    @Routes([
      { path: '/', component: HomeComponent },
      { path: '/contact', component: ContactComponent }
    ])
    

    And templates use routerLink rather than ng-href:

    <ul>
      <li><a [routerLink]="['/']">Home</a></li>
      <li><a [routerLink]="['/contact']">Contact</a></li>
    </ul>
    

13. Helpers like ng-href, ng-src, and ng-hide are unnecessary—use native href, src, and hidden.
14. One-way binding (ng-bind) becomes [property] binding.
15. Two-way binding (ng-model) becomes [(ngModel)].
16. Angular 1.x was easy to start—drop in a script tag. Angular 2 depends on Zone.js, SystemJS, shim.js, Reflect Metadata, plus Node.js and TypeScript tooling. Miss any of those and the app won’t bootstrap.

Hopefully this clarifies the biggest deltas between Angular 1.x and Angular 2.