Angular 2 Overview

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



https://daveceddia.com/angular-2-in-plain-js/

Controllers/Components


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!