Introduction to Angular 2

Introduction to Angular 2

My talk about Angular 2 at #tkjs Dec 14, 2015
http://www.meetup.com/tokyojs/events/226903404/

Ca0ab6e450f894e06652ee257df9d647?s=128

Shuhei Kagawa

December 14, 2015
Tweet

Transcript

  1. 2.

    Who are you? • Shuhei Kagawa • Front/Back-end developer @

    M3, Inc. • Rails/Angular.js/Node.js • Building SPA >10000 lines of JavaScript
  2. 3.
  3. 4.
  4. 6.

    What I wanted 1.5 years • Data-binding (less boilerplate) •

    Amount of learning resources (for team development) • (Seemingly) Long-time support • Rich standard libraries (security, validation and etc.)
  5. 10.

    Angular: The Good Parts • Directive > Controller • Don't

    rely on scope inheritance • Directive API (controllerAs, bindToController)
  6. 11.
  7. 13.

    What is Angular 2 like? • It's coming up soon(?)

    • Better syntax • Best-in-class performance • Cutting-edge architecture
  8. 16.
  9. 18.

    Better syntax • TypeScript is the first language (no more

    JS quirks) • Consistent template syntax • Scoped CSS • ES6 Modules (no more own module system)
  10. 20.

    ES6 Modules Class Decorator Class property import { Component, Injectable

    } from 'angular2/core'; @Injectable() class Hero { id: number; name: string; } @Component({ selector: 'my-app', templateUrl: './my-app.html', styleUrls: ['./my-app.css'] }) export class AppComponent { public title = 'Tour of Heroes'; public heroes = HEROES; public selectedHero: Hero; onSelect(hero: Hero) { this.selectedHero = hero; } getSelectedClass(hero: Hero) { return { selected: hero === this.selectedHero }; } } var HEROES: Hero[] = [ { "id": 11, "name": "Mr. Nice" }, // ... ];
  11. 21.

    <h1>{{title}}</h1> <h2>My Heroes</h2> <ul class="heroes"> <li *ngFor="#hero of heroes" (click)="onSelect(hero)"

    [ng-class]="getSelectedClass(hero)"> <span class="badge">{{hero.id}}</span> {{hero.name}} </li> </ul> <div *ngIf="selectedHero"> <h2>{{selectedHero.name}} details!</h2> <div> <label>id: </label>{{selectedHero.id}} </div> <div> <label>name: </label> <div><input [(ngModel)]="selectedHero.name" placeholder="name"></div> </div> </div> Text binding Loop Event handler (Seemingly)
 Two-way
 data binding
  12. 22.

    Template syntax • foo="bar" • [foo]="bar" • (foo)="bar()" Plain (passed

    as a string) Data binding (evaluated as expression) Event handler • ng-include="'hello.tpl'" • ng-href="https://google.com?q={{keyword}}"
  13. 23.

    Best-in-class performance • Ultra-fast change detection • View caching •

    One-time and offline compilation • (Change detection in Web Worker) • (Server-side rendering (Angular Universal))
  14. 27.

    import { Component } from 'angular2/core'; import { Control }

    from 'angular2/common'; import { Jsonp, JSONP_PROVIDERS } from 'angular2/http'; import { bootstrap } from 'angular2/platform/browser'; import { GitHubService } from './github-service'; @Component({ selector: 'my-app', templateUrl: 'app/my-app.html', styleUrls: ['app/my-app.css'] }) export class MyApp { searchText = new Control(); repos: any; constructor(private github: GitHubService) { this.repos = this.searchText.valueChanges .debounceTime(300) .flatMap(text => this.github.search(text)); ; } } bootstrap(MyApp, [JSONP_PROVIDERS, GitHubService]);
  15. 28.

    <h3>GitHub repositoy search</h3> <p> <input [ngFormControl]="searchText" placeholder="keyword" class="form-control"> </p> <ul

    class="repositories"> <li *ngFor="#repo of repos | async"> <a [href]="repo.html_url">{{repo.full_name}}</a> {{repo.stargazers_count}} stars </li> </ul>
  16. 29.

    import { Injectable } from 'angular2/core'; @Injectable() export class GitHubService

    { constructor(private jsonp: Jsonp) {} search(keyword) { return this.jsonp.get(`https://api.github.com/ search/repositories?callback=JSONP_CALLBACK&q=$ {keyword}&sort=stars`) .map(res => res.json()['data']['items']); } }
  17. 30.

    Upgrade from 1.x • Componentize everything • ngUpgrade • Mix

    ng1 components and ng2 components • ngForward • Write ng1 app with ng2 syntax
  18. 31.

    Libraries • ng1 libraries doesn't work on ng2 • But

    people started re-building popular ones with ng2 • ionic2, angular2_material, ng2-bootstrap, ng2- select and etc.
  19. 33.