ng-mtg#8 #ng_jp

1. はじめての Angular2
ng-mtg#8 2016/9/9

2. about me
Kenichi Kanai
金井 健一
Angular Japan User Group 管理人
Web先端技術味見部 部長

3. ver 2.0.0-rc.6

4. Features
Angular1 ( = AngularJS ) より...
Modern
Simple
High Performance

5. Cross Platform
PWA - Progressive Web Apps
Native
Desktop

6. Hello Angular2

7. import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: '<h1>Hello Angular2</h1>'
})
export class AppComponent { }

8. @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

9. @Component({
selector: 'my-app',
template: `
<p>{{name}}</p>
<input type="text" [(ngModel)]="name">
<input type="text" [(ngModel)]="name">
`
})...
Template Syntax - Two-way Data-Binding

10. @Component({
selector: 'my-app',
template: `
<input type="text" [(ngModel)]="name">
<input type="button" (click)="clickBtn($event)" value="おす">
`
})
Template Syntax - Event Handling

11. export class AppComponent4 {
name = "can.i.do.web";
clickBtn(e: MouseEvent){
alert('Hello ' + this.name)
}
}
Template Syntax - Event Handling

12. Demo

13. NgIf
NgFor
NgStyle / NgClass
NgSwitch / NgSwitchCase / NgSwitchDefault
NgPlural / NgPluralCase
Built-in Directive

14. CurrencyPipe
UpperCasePipe / LowerCasePipe
PercentPipe
DatePipe
DecimalPipe
SlicePipe
Built-in Pipe

15. Component Tree

16. one-way Chacking
100000 checks / 10ms
High Performance

17. ES2015 / ES2016 …
TypeScript / (Babel)
browserify / webpack / (system.js)
gulp / npm script
Rx.js
node / npm
etc...
Angular2 でいるもの

18. http://slides.com/laco/first-step-to-angular-land#/
https://www.youtube.com/watch?v=P2qWfnx4RJ8

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

21. 日本語化してみよう！

22. Try Angular2!

23. Thank you!
can_i_do_web