Hello World in Angular 2

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 <html> <head> <script src=“/quickstart/dist/es6-shim.js”></script> </head> <body> <hello-app></hello-app> <script> System.paths
= { ‘angular2/*’: ‘quickstart/angular2/*.js’, ‘rtts_assert/*’: ‘quickstart/rtts_assert/*.js’, ‘app’: ‘app.es6’ }; System.import(‘app’); </script> <body> </html> Loads app.es6 and transpiles it to ES5! Our ﬁrst component

app.es6 import {Component, Template, bootstrap} from ‘angular2/angular2’; @Component({ selector: ‘hello-app’
}) @Template({ inline: ‘<h1>Hello, {{name}}!</h1>’ }) 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: ‘<h1>Hello, {{name}}!</h1>’ }) 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 <hello-app></hello-app>

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 ﬂy • 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.

Hello World in Angular 2

Hello World in Angular 2

Shuhei Kagawa

More Decks by Shuhei Kagawa

Other Decks in Programming

Featured

Transcript

Hello World in Angular 2 Shuhei Kagawa April 9, 2015

About me • Developing Angular 1.x & Rails app at

Rumors about Angular 2 • RIP controllers, DDO, $scope and

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

index.html <html> <head> <script src=“/quickstart/dist/es6-shim.js”></script> </head> <body> <hello-app></hello-app> <script> System.paths

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

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

Next Step • viewport directives such as If, Foreach •

Don’t like Traceur? Use Babel! • Build Angular 2 app

Conclusion • You can try Angular 2 now. • It’s