Angular 1.x vs Angular 2

• Configuration
• Controllers/Components
• Templates

Configuration

• Typescript
  • A language from Microsoft that compiles down to JS, allows you to use ES6-style classes, imports and exports
  • Not required in A2, but is the suggested workflow
• Angular 2 Quickstart

Controllers/Components

Controllers/Components

• .Component({})methods in plain JS
• Decorator syntax in TS @Component({})
• No global $scope or $rootscope!
• Angular 1.x, Angular2 Typescript, Angular2 ES5 Example Gist

Templates

• ng- comments are not output!
• Custom directives are output
• Templates still include logic, but syntax is different

Templates - Syntax

• ngFor, ngIf, and ngSwitch use the * prefix
• *ngIf="!answerHidden"
• * is 'a bit of “syntactic sugar” that makes it easier to read and write directives that modify HTML layout with the help of templates.'
• No more ngShow/ngHide; only ngIf

Templates - Syntax

• iterators/template variables use the # prefix
• *ngFor="#card of flashcards"
• (that's the equivalent of ng-repeat="card in flashcards")
• Much more!

Example!

• ahoef.co/flashcards
• github.com/ahoef/angular2-flashcard-app