はじめての Angular2

ng-mtg#8 2016/9/9

about me

Kenichi Kanai金井 健一

Angular Japan User Group 管理人

Web先端技術味見部 部長

ver 2.0.0-rc.6

FeaturesAngular1 ( = AngularJS ) より...

Modern

Simple

High Performance

Cross Platform

PWA - Progressive Web Apps

Native

Desktop

Hello Angular2

import { Component } from '@angular/core';

@Component({ selector: 'my-app', template: '<h1>Hello Angular2</h1>'})export class AppComponent { }

@Component({

selector: 'my-app',

template: `

<div [class.red]="isRed" [style.fontSize]="fontSize">

<p>{{name}}</p>

<input [value]="name">

</div>`,

styles: ['.red {color: red}']

})...

Template Syntax - Data-Binding

@Component({

selector: 'my-app',

template: `

<p>{{name}}</p>

<input type="text" [(ngModel)]="name">

<input type="text" [(ngModel)]="name">

`

})...

Template Syntax - Two-way Data-Binding

@Component({

selector: 'my-app',

template: `

<input type="text" [(ngModel)]="name">

<input type="button" (click)="clickBtn($event)" value="おす">

`

})

Template Syntax - Event Handling

export class AppComponent4 {

name = "can.i.do.web";

clickBtn(e: MouseEvent){

alert('Hello ' + this.name)

}

}

Template Syntax - Event Handling

Demo

NgIf

NgFor

NgStyle / NgClass

NgSwitch / NgSwitchCase / NgSwitchDefault

NgPlural / NgPluralCase

Built-in Directive

CurrencyPipe

UpperCasePipe / LowerCasePipe

PercentPipe

DatePipe

DecimalPipe

SlicePipe

Built-in Pipe

Component Tree

one-way Chacking

100000 checks / 10ms

High Performance

ES2015 / ES2016 …

TypeScript / (Babel)

browserify / webpack / (system.js)

gulp / npm script

Rx.js

node / npm

etc...

Angular2 でいるもの

http://slides.com/laco/first-step-to-angular-land#/

https://www.youtube.com/watch?v=P2qWfnx4RJ8

https://ng-japan-invite.herokuapp.com/

日本語化してみよう！

Try Angular2!

Thank you!

can_i_do_web