あまり力を入れないでAngular2の5 Min Quickstartを試す

# Angular2の5 Min Quickstartとは

Angular2のDocsに最初に掲げられているサンプルアプリケーションです。

https://angular.io/docs/ts/latest/quickstart.html

# 準備

とりあえず、次のものをインストールしました。なお、環境はWindowsです。また、これを書いている時点での最新のバージョンをインストールしました。

## node.jsなど

1. node.js v5.10.1 / https://nodejs.org/en/
2. gitfor windows / https://git-for-windows.github.io/
3. Python3.5.1 / https://www.python.org/

## grunt関係

npm initでpackage.jsonを作った後、次のプラグインをインストールする。

1. grunt-cli(グローバルインストール)
2. grunt
3. grunt-contrib-connect

# Gruntfile.jsの作成

grunt-contrib-connectを用いてWebサーバを建てたいので、 http://qiita.com/ginpei/items/6a3f870da2a9ec043627 を参考にGruntfile.jsを作成する。感謝しつつ、コピペ。

```` Gruntfile.js
module.exports = function (grunt) {
    grunt.initConfig({
        connect: {
            local: {
                options: {
                    keepalive: true,
                    port: 1234
                }
            }
        }
    });
    grunt.loadNpmTasks('grunt-contrib-connect');
};
````

コンソールからgrunt connectを実行して、次のような表示が出ればOK。

```
> grunt connect
Running "connect:local" (connect) task
Waiting forever...
Started connect web server on http://localhost:1234
```

ブラウザでlocalhost:1234にアクセスして、それっぽい反応があれば、Webサーバが動いていることがわかります。

# ソースのコピペ

ワーキングディレクトリとして、5min-quickstartというディレクトリを作っておく。そのディレクトリ下に、https://angular.io/docs/ts/latest/quickstart.html から、以下のファイルをコピペして保存する。

* app/app.component.ts
* app/main.ts
* index.html
* styles.css (excerpt)

ここまでの手順で、ファイルの構造としては、こういう形になっていると思われる。

```
+ [5min-quickstart]
|  + [app]
|  |  + app.component.ts
|  |  + main.ts
|  |
|  + index.html
|  + styles.css
|
+ package.json
+ Gruntfile.js
```

5 Min QuickstartではTypescriptの使用を前提に書かれているけれど、Typescriptの導入が面倒なので、index.htmlを少し工夫して、省力化を図ることとする。

# index.htmlの改造

https://angular.io/ の The Basicsなどに示されているソースコードは、tsファイルを直接使用してAngular2アプリケーションを動かすソースとなっている。

そこで、5 Min Quickstartのindex.htmlを次のように修正する。

```` 修正前のindex.htmlのheadの一部
    <!-- 1. Load libraries -->
    <!-- IE required polyfills, in this exact order -->
    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
    <script src="node_modules/systemjs/dist/system-polyfills.js"></script>
    <script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>   

    <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <script src="node_modules/rxjs/bundles/Rx.js"></script>
    <script src="node_modules/angular2/bundles/angular2.dev.js"></script>

    <!-- 2. Configure SystemJS -->
    <script>
      System.config({
        packages: {        
          app: {
            format: 'register',
            defaultExtension: 'js'
          }
        }
      });
      System.import('app/main')
            .then(null, console.error.bind(console));
    </script>
````

これを…

```` 修正後のindex.htmlのheadの一部
    <!-- 1. Load libraries -->
    <!-- IE required polyfills (from CDN), in this exact order -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.35.0/es6-shim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.26/system-polyfills.js"></script>
    <script src="https://npmcdn.com/angular2/es6/dev/src/testing/shims_for_IE.js"></script>
    <script src="https://code.angularjs.org/tools/system.js"></script>
    <script src="https://code.angularjs.org/tools/typescript.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.15/angular2-polyfills.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.15/Rx.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.15/angular2.dev.js"></script>

    <!-- 2. Configure SystemJS -->
    <script>
      System.config({
        transpiler: 'typescript',
        typescriptOptions: { emitDecoratorMetadata: true },
        packages: {'app': {defaultExtension: 'ts'}}
      });
      System.import('app/main')
            .then(null, console.error.bind(console));
    </script>
````

とする。

typescript.jsをインポートし、SystemJSの設定を適切に書けば、直接tsファイルを使用することができる(と思う)。

# 実行

ブラウザで http://localhost:1234/5min-quickstart/index.html にアクセスすればOK。