Angular2でHello World


スクリーンショット 2016-05-13 18.22.51

過去記事でAngular2について触ってみた記事を書きましたが、大体コードをコピペして終わっていたので今回はHelloWorldからもう少し掘り下げて書こうと思います。
angular2ではTypeScriptの使用が推奨されているので、Typescript使います。(一応生javascriptやES6でも書けますし、公式にも3つ分のチュートリアルがありますがここでは触れないことにします。)

1.簡単なコンポーネントを作る

angular2ではComponentベースの設計が推奨され、angular1で使われていたController系とはちょっと違う書き方になります。

angular2でのHelloWorldComponentは以下のような書き方をします

import {Component} from '@angular/core';

@Component({
    selector:'my-app',
    template:'<h1>My First Angular 2 App</h1>'
})
export class AppComponent{

}

Angular2のコンポーネントの定義方法は以下の手順のようになります。

  • このコンポーネントを呼び出すセレクタ名を定義(selector)
  • このコンポーネントを呼びだされたときに描画されるhtmlを定義(template)
  • このコンポーネントの振る舞いを定義するクラスを定義して、外部からimportできるようにexport

上の例では、特に振る舞いを定義していないので空のクラスを使ってexportしています。

ちなみにangular1だとこんな感じの書き方になりますね。

angular.module('app', []);

angular.module('app')
  .directive('myApp', function () {
    return {
      restrict: 'E',
      template: '<h1>My First Angular 1 App</h1>',
      controller:function () {
        
      }
    }
  });

2.angular2のアプリを起動する

angular1では、angular.bootstrap()を明示的に呼ばなくてもangularは起動していましたが、angular2からは明示的にbootstrapメソッドを呼ぶ必要があります。

bootstrap()メソッドに渡す引数は、そのアプリケーションのRoot Componentです。(例だと、AppComponentしかないので当然AppComponentですね)

import {bootstrap} from '@angular/platform-browser-dynamic'
import {AppComponent} from './app.component';

bootstrap(AppComponent);

bootstrapは、@angular/coreではなくplatform-browser-dynamicパッケージ内のメソッドですが、これは、CordovaやNativeScript使っているとbootstrapのタイミングが通常のブラウザと微妙に異なったり、クローラーbotがWebページを解釈するときにもbootstrapのタイミングが異なることに起因していて、一概に@angular/coreに突っ込めない、という理由があるらしいです。

(公式サイトより引用)

Notice that we import the bootstrap function from @angular/platform-browser-dynamic, not @angular/core.

Bootstrapping isn’t core because there isn’t a single way to bootstrap the app. True, most applications that run in a browser call the bootstrap function from this library.

But it is possible to load a component in a different environment. We might load it on a mobile device with Apache Cordova or NativeScript. We might wish to render the first page of our application on the server to improve launch performance or facilitate SEO.

These targets require a different kind of bootstrap function that we’d import from a different library.

angular1は「SEO的に不都合がある」っていう性質があって「おいおい同じGoogle製なのにアンチシナジーなプロダクト作ってんじゃねえよ」と思いましたが、angular2ではその点も考慮されているようです。

参考:
Angular2 Quickstart

過去記事
Angular2触ってみた part1
Angular2触ってみた part2
Angular2触ってみた part3
Angular2触ってみた part4