Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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.

Avatar for Shuhei Kagawa

Shuhei Kagawa

April 09, 2015
Tweet

More Decks by Shuhei Kagawa

Other Decks in Programming

Transcript

  1. 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
  2. Rumors about Angular 2 • RIP controllers, DDO, $scope and

    angular.module() • AtScript -> TypeScript • Reactive? • Hard to migrate from 1.x? • etc.
  3. 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
  4. 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
  5. 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
  6. 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>
  7. 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
  8. 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
  9. 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.