Angular 2 のクイックスタートをやってみる。

## はじめに
僕はJSフレームワークに乗り遅れている感じがするので、今回はAngularJSを触ってみることにした。

今までは`Rails+CoffeScript+jQuery`で大体の事は対応できていたが、今後を考えるとSPA(Single Page Application)が弾頭に上がってくる事はほぼ間違い無いと思う。
(RailsもTurboinksを使っているので、ある意味SPAとも言える。Rails5のTurboinksはかなりSPAを意識しているっぽい。)

そう思って以前`BackboneJS`を触った事があるが、コード量の多さに辟易した経験がある。
（`BackboneJS`は固すぎる・・・）

今回の`AngularJS`がどんなものかわからないが、何はともあれ使ってみる事にする。

この記事では、[Angular2クイックスタート](https://angular.io/docs/ts/latest/quickstart.html)をやってみる。

※僕は英語が苦手なので、フィーリングでサイトを読んでいきます。謝ってる箇所などがありましたらご指摘ください。

## ファイルの配置
[クイックスタート](https://angular.io/docs/ts/latest/quickstart.html)に書かれている通り

```sh
mkdir angular2-quickstart
cd    angular2-quickstart
```

を行う。
そしてJSファイルとHTMLファイルを作成してみる。

```js:app.ts
import {bootstrap, Component} from 'angular2/angular2';
@Component({
    selector: 'my-app',
    template: '<h1>My First Angular 2 App</h1>'
})
class AppComponent { }
bootstrap(AppComponent);
```

JSファイルだと思ったが、拡張子を見ると`ts`になっている。
どうやら`TypeScript`で書かれているようだ。

`TypeScript`は初めて触った。
`CoffeeScript`と同じポジションらしいが、次のコードを見て驚愕する。

```html:index.html
<html>
  <head>
    <title>Angular 2 QuickStart</title>
    <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-alpha.44/angular2.dev.js"></script>
    <script>
      System.config({
        transpiler: 'typescript',
        typescriptOptions: { emitDecoratorMetadata: true }
      });
      System.import('./app.ts');
    </script>
  </head>
  <body>
    <my-app>loading...</my-app>
  </body>
</html>
```

HTML内部で`TypeScript`のコードである`System.import('./app.ts');`を直接インポートしているのだ。
`CoffeeScript`ではコンパイルしたJSファイルをメインに使用するのだが、ここでは直接`TypeScript`のコードを呼び出している。
これが驚愕した点だ。

もちろんだが、このファイルを直接開いても`loading...`と表示されるだけだ。

## live-server
この環境を動かすためには`静的ファイルサーバー`が必要になるようです。
なので、こちらを入れます。

```sh
$ npm install -g live-server
```

入れてたと思ったけど`node.js`を入れてなかったのでそこからスタートです。

```sh
$ brew install node
$ npm install -g live-server
```

インストールが終わったらサーバーを起動します。

```sh
$ live-server
```

ブラウザで`localhost:8080`にアクセスしたところ`My First Angular 2 App`が表示されました。

## 中身を変えてみる
`app.ts`の中身を変えてみると、自動的にデータを読み込んでくれました。
てっきり一部分だけの切り替えかと思ったのですが、ページ全てを再読み込みされました。

仕組みはわからないのですが、`101 Switching Protocols`というリクエストを投げているのでこれを`live-server`が監視しているのかもしれません。

また、`chrome`と`firefox`の両方で開いている場合は一方のブラウザは`loading...`と表示されてしまいました。

ここはクイックスタートを進めたいので、無視して進めます。

`Ctrl+c`で`live-server`を止めます。

## 構成を変えます
どうやら、この構成はあまりよろしくないとの事なので構成を変えます。

```sh
$ mkdir -p src/app
```

以下の構成に変更します。

```
angular2-quickstart
└── src
    ├── app
    │   └── app.ts
    └── index.html
```

コマンドは以下のとおりです。

```sh
$ mv app.ts src/app/
$ mv index.html src/
```

で、パッケージをインストールします。

```sh
$ npm init -y
```

これは`Gemfile`や`pom.xml`などと同じようなパッケージ管理をするための`package.json`を入れてくれるようです。
いつだかに使った`Bower`はフロントエンド用の管理ソフトでしたが、今回のはどうなのでしょうか？
気にせず進みますw

```sh
npm i angular2@2.0.0-alpha.44 systemjs@0.19.2 --save --save-exact
```

`package.json`に以下が追加され、`node_modules`が作成されました。

```json
  "dependencies": {
    "angular2": "2.0.0-alpha.44",
    "systemjs": "0.19.2"
  }
```

続けて`live-server`を入れていきます。

```sh
$ npm i typescript live-server --save-dev
```

さらに以下の内容が追加されました。

```json
  "devDependencies": {
    "live-server": "^0.9.0",
    "typescript": "^1.7.3"
  }
```

クイックスタートに`script`部分を以下のように書き換えろと書かれているので、`package.json`の中身を書き換えます。

```json
{
  "scripts": {
    "tsc": "tsc -p src -w",
    "start": "live-server --open=src"
  }
}
```

## ファイルのパスを書き換えます
構成が変わったのでファイルを書き換えます。

```src/index.html
<html>
  <head>
    <title>Angular 2 QuickStart</title>
    <script src="../node_modules/systemjs/dist/system.src.js"></script>
    <script src="../node_modules/angular2/bundles/angular2.dev.js"></script>
    <script>
      System.config({
        packages: {'app': {defaultExtension: 'js'}}
      });
      System.import('app/app');
    </script>
  </head>
  <body>
    <my-app>Loading...</my-app>
  </body>
</html>
```	

これで全てローカルファイルをみるようになりました。
また、`js`ファイルを読み込むようになりました。

`TypeScript`を読み込めなくなったので、`tsconfig.json`を`src`以下に配置します。

```src/tsconfig.json
{
  "compilerOptions": {
    "target": "ES5",
    "module": "commonjs",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  }
}
```

コンパイル情報でしょうか？

とりあえず以下の構成になっていればOKです。

```
angular2-quickstart
├── node_modules
├── src
│    ├── app
|    │    └── app.ts
│    ├── index.html
│    └── tsconfig.json
└── package.json
```

## JSのコンパイル
JSのコンパイルを行います。
以下のコマンドはルートで実行します。

```sh
$ npm run tsc
```

実行するとコンパイル監視状態になります。
なので`src/app/`の中をみると`app.js`ができており、`app.ts`を書き換えると`app.js`が書き換わります。

`tsc -p src -w`と`package.json`で指定しているため常駐されるようです。（`-w`をとれば常駐されません。）

`ctrl+c`で終了します。

## 実行
では、実際に実行します。

```sh
$ npm start
```

これでローカル内で動きました。
ただ、コンパイルは動いてないので`app.ts`を変更しても反映されません。

また、ルートへアクセスするとフォルダ情報が見えてしまいます。

## 最後に
とりあえず、いろいろ問題がありつつもクイックスタートを終えました。
（最後のおまけはやってませんが。）

これだけだと実運用には耐えれないですが、なんとなくの構想は理解できました。
引き続きチュートリアルを進める事で理解を深めていこうと思います。

RESTでデータを取り出して動的にページの情報を切り替えれないとAngularの恩恵はないですからね・・・。（まだ、理解してないだけかもしれませんが・・・）