Hello World in Angular 2 Shuhei Kagawa April 9, 2015 @Tokyo AngularJS Meetup v3.0.0

About me • Developing Angular 1.x & Rails app at work. • Interests: JS MVC, front-end build stack, creating something visually interesting and beer • github: @shuhei, twitter: @7to3 Shuhei Kagawa

Rumors about Angular 2 • RIP controllers, DDO, $scope and angular.module() • AtScript -> TypeScript • Reactive? • Hard to migrate from 1.x? • etc.

Is it nice or not? Let’s try by ourselves!

5 min quickstart • https://angular.io/docs/js/latest/quickstart.html • Make sure to disable cache!!! mkdir quickstart && cd quick start git clone https://github.com/angular/quickstart.git touch index.html touch app.es6 # Write some code! npm install -g http-server http-server

index.html System.paths = { ‘angular2/*’: ‘quickstart/angular2/*.js’, ‘rtts_assert/*’: ‘quickstart/rtts_assert/*.js’, ‘app’: ‘app.es6’ }; System.import(‘app’); Loads app.es6 and transpiles it to ES5! Our first component

app.es6 import {Component, Template, bootstrap} from ‘angular2/angular2’; @Component({ selector: ‘hello-app’ }) @Template({ inline: ‘

Hello, {{name}}!

’ }) class HelloApp { constructor() { this.name = ‘Ryozanpark’; } } bootstrap(HelloApp); ES6 Modules instead of angular.module() Decorators add metadata to component class. Somewhat like DDO. Component: Pair of controller and template

app.es6 import {Component, Template, bootstrap} from ‘angular2/angular2’; @Component({ selector: ‘hello-app’ }) @Template({ inline: ‘

Hello, {{name}}!

’ }) class HelloApp { constructor() { this.name = ‘Ryozanpark’; } } bootstrap(HelloApp); We could use `url` instead Similar to `controllerAs` but bindings are resolved against the component instance. Matches

Next Step • viewport directives such as If, Foreach • event handler • class binding • component with binding • service injection • form handling like React’s controlled component https://github.com/shuhei/angular2-todo

Don’t like Traceur? Use Babel! • Build Angular 2 app with webpack and babel • Way faster than transpiling on the fly • Supports @ annotation and type annotation https://github.com/shuhei/babel-angular2-app

Conclusion • You can try Angular 2 now. • It’s packed with new ideas. Decide if you like it by playing with it. • No supporting libraries yet, including the New Router. • Source code is your reference.