Angular2 で Hello World してみた

# Angular2 で HelloWorld したのでまとめ

## 前提環境

| 環境 | バージョン |
|-----------|-----------|
| PC | Win |
| node | v5.6.0 |
| npm | 3.6.0 |

node, npm はインストール済とします。

## 環境を用意する

### 1.ディレクトリ作成

```
mkdir angular-hello
cd angular-hello
npm init
```

npm init を実行すると、package.json の作成にあたって、名前やバージョン、ライセンスなどを聞いてきます。
適当に「OKだぜ！」と Enter 連打です。
公開予定のコードを作成する場合は、ライセンスに注意。
![3.png](https://qiita-image-store.s3.amazonaws.com/0/67675/372975ee-f844-5824-7bf0-394f3e8b07ff.png)

npm 事始めにかんしては[こちらを参照](http://qiita.com/hashrock/items/15f4a4961183cfbb2658)

### 2.インストール

今回はあえて1つずつ分けて書いています。
これは、いかんせん筆者が初心者なため、
1つずつ何をインストールしてどんな役割なのかを確認したり、
ぐぐったりしながら勉強がてら進めたせいです。
[参考にしたサイト](http://rdlabo.jp/angular2-376.php)

```
npm install typescript
npm install browserify
npm install angular2
```

| 環境 | バージョン |
|-----------|-----------|
| typescript | 1.8.10 |
| browserify | 13.0.0 |
| angular2 | 2.0.0-beta.17 |

angular2 をインストールした時点で、エラーメッセージで
何が足りないかの指定をしてくるので、バージョンを指定してインストールします。
![2.png](https://qiita-image-store.s3.amazonaws.com/0/67675/8f2df21c-c3fc-c12b-cfdd-64a02efd62ff.png)

```
npm install es6-shim@^0.35.0
npm install reflect-metadata@0.1.2
npm install rxjs@5.0.0-beta.6
npm install zone.js@^0.6.6
```

UNMET PEER DEPENDENCY
など、npm のエラーで怒られた場合は、[こちらを参照](http://qiita.com/M-ISO/items/d693ac892549fc95c14c)
上記は、依存関係のエラー。

全てバージョンをあわせてインストールして完了。

## ビルドスクリプト

### package.json

npm init を実行後、package.json を編集します。
今回、参考サイトにあわせて、ビルドは Browserify を使います。

``` json:package.json
{
    "scripts": {
        "tsc": "tsc -p .",
        "browserify": "browserify ./index.js -o ./bundle.js",
        "build": "npm run tsc && npm run browserify"
    }
}
```

### tsconfig.json

tsconfig.json を作成します。

```json:tsconfig.json
{
    "compilerOptions": {
    "target": "es5",
    "noImplicitAny": true,
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "moduleResolution": "node"
  },
  "files": [
    "./index.ts"
  ]
}
```

## ファイル作成

### index.html

[参照ページ](http://qiita.com/armorik83/items/ae737ab584012a0f5876)にならって、index.html はテンプレそのままで作成。

```html:index.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Hello Angular 2!</title>
</head>
<body>
  <my-app>Loading…</my-app>
  <script src="./bundle.js"></script>
</body>
</html>
```

### index.ts

```ts:index.ts
/// <reference path="node_modules/angular2/typings/browser.d.ts" />

import "es6-shim";
import "reflect-metadata";
import "rxjs/Rx";
import "zone.js/dist/zone";

import {bootstrap} from "angular2/platform/browser";
import {Component} from "angular2/core";

@Component({
  selector: `hello-world`,
  template: `
    <h1>Hello World!</h1>
  `
})
class HelloWorldComponent {
}

@Component({
  selector: `my-app`,
  template: `
    <hello-world></hello-world>
  `,
  directives: [HelloWorldComponent]
})
class MyAppComponent {
}

bootstrap(MyAppComponent);
```

## ビルド

```
npm run build
```

![1.png](https://qiita-image-store.s3.amazonaws.com/0/67675/375b0190-3fa7-6f35-61cd-74f0e2a117f7.png)

bundle.js が生成されます。

index.html を開いて、
画面上の「loading...」が「Hello World !」に変わったら完了です。

## 参考にしたページ

http://qiita.com/hashrock/items/15f4a4961183cfbb2658
http://qiita.com/armorik83/items/ae737ab584012a0f5876
https://angular.io/docs/ts/latest/quickstart.html
http://rdlabo.jp/angular2-376.php
http://qiita.com/M-ISO/items/d693ac892549fc95c14c

## まとめ

かろうじてパクりながら実行できたに過ぎない感じ。。。
おまじないで終わらせずに、動かしているところは全部理解しながら進めないと。