Hello World in Angular 2

Hello World in Angular 2

Introduce Hello World app in Angular 2.

A presentation given at Tokyo AngularJS Meetup III on April 9, 2015.

Ca0ab6e450f894e06652ee257df9d647?s=128

Shuhei Kagawa

April 09, 2015
Tweet

Transcript

  1. Hello World in Angular 2 Shuhei Kagawa April 9, 2015

    @Tokyo AngularJS Meetup v3.0.0
  2. 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
  3. Rumors about Angular 2 • RIP controllers, DDO, $scope and

    angular.module() • AtScript -> TypeScript • Reactive? • Hard to migrate from 1.x? • etc.
  4. Is it nice or not? Let’s try by ourselves!

  5. 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
  6. 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 first component
  7. 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
  8. 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>
  9. 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
  10. 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
  11. 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.