Angular2 5 Min Quickstart の翻訳（TypeScript 説明あり版）

Google I/O 2016でも多くのセッションが見られ、これからのサービス開発の効率を大きく変えるフレームワーク、Angular2の 5 Min Quickstartを翻訳してみました。こちらは翻訳元にある説明を全て含めて翻訳していますので、30分以上かかるのではないかと思います。5分は嘘だと思ってください。

説明を全て省いた内容はこちらへ掲載しますので、そちらで5分間でのHello World成功にチャレンジしてください。

---

私たちのQuickStartのゴールは非常に単純なTypeScriptのAngular 2アプリケーションをビルドし、実行することです。そして、本稿以外のチュートリアルなどのドキュメントに出てくるサンプル、それらは実際のアプリケーションでの基本となるようなものですが、本稿では、それらのための開発環境も確立していきます。

試してみよう!

実行可能な例を試してください。サンプルアプリをplunkerの中に読み込み、サンプルのメッセージを表示します。

アプリをビルドしよう！（目次）

*　前提条件: Node.jsをインストールします。
* Step1:アプリのプロジェクトフォルダを作成し、パッケージの依存性を定義や特別なプロジェクト設定を行います。
* Step2: アプリのAngularルートコンポーネントを作成します。
* Step3: main.tsを追加し、Angularに対してrootコンポーネントを指定します。
* Step4: アプリケーションをホストする、index.htmlを追加します。
* Step5: アプリをビルドし、実行します。
* アプリに幾らかの変更を加える。
* ラップアップ

前提条件 Node.js

もし、まだインストールされていないなら、Node.js® と npm をインストールします。

　ターミナルやコンソールのウィンドウでnode -v とnpm -vコマンドを実行して、node v5.x.xとnpm　3.x.xであることを確認してください。古い/新しすぎるバージョンはエラーを起こします。

(筆者註：node最新版は6.xですのでnvmのインストールしたり、旧版をクリーンインストールするのが良さそうです。）

ソースコードのダウンロード

以下の説明の各ステップの代わりに、QuickStartのソースコードをgithubからダウンロードして手短に以下の手順を終わらせることもできます。

Step 1: プロジェクトの作成と設定

この手順では以下を扱います。

(a) プロジェクトのフォルダを作成する。
(b) パッケージ定義と設定ファイルを追加する。
(c) パッケージをインストールする。

(a) プロジェクトのフォルダを作成する。

> mkdir angular2-quickstart
> cd    angular2-quickstart

(b) パッケージ定義と設定ファイルを追加する。

以下のパッケージ定義ファイルと設定ファイルをプロジェクトのフォルダーへ追加します。

package.jsonはQuickStartアプリが依存するパッケージをリストし、幾つかの有用なスクリプトを定義します。詳細はNPM　パッケージ設定をご覧ください。

tsconfig.json はTypeScriptコンパイラの設定ファイルです。詳細はTypeScriptの設定をご覧ください。

typings.json はTypeScriptの定義ファイルです。 詳細はTypeScriptの設定をご覧ください。

systemjs.config.jsはSystemJSの設定ファイルです。以下で議論されます。

package.json

{
  "name": "angular2-quickstart",
  "version": "1.0.0",
  "scripts": {
    "start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ",
    "lite": "lite-server",
    "postinstall": "typings install",
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "typings": "typings"
  },
  "license": "ISC",
  "dependencies": {
    "@angular/common":  "2.0.0-rc.1",
    "@angular/compiler":  "2.0.0-rc.1",
    "@angular/core":  "2.0.0-rc.1",
    "@angular/http":  "2.0.0-rc.1",
    "@angular/platform-browser":  "2.0.0-rc.1",
    "@angular/platform-browser-dynamic":  "2.0.0-rc.1",
    "@angular/router":  "2.0.0-rc.1",
    "@angular/router-deprecated":  "2.0.0-rc.1",
    "@angular/upgrade":  "2.0.0-rc.1",
    "systemjs": "0.19.27",
    "core-js": "^2.4.0",
    "reflect-metadata": "^0.1.3",
    "rxjs": "5.0.0-beta.6",
    "zone.js": "^0.6.12",
    "angular2-in-memory-web-api": "0.0.10",
    "bootstrap": "^3.3.6"
  },
  "devDependencies": {
    "concurrently": "^2.0.0",
    "lite-server": "^2.2.0",
    "typescript": "^1.8.10",
    "typings":"^1.0.4"
  }
}

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  }
}

typings.json

{
  "globalDependencies": {
    "core-js": "registry:dt/core-js#0.0.0+20160317120654",
    "jasmine": "registry:dt/jasmine#2.2.0+20160505161446",
    "node": "registry:dt/node#4.0.0+20160509154515"
  }
}

systemjs.config.js

/**
 * System configuration for Angular 2 samples
 * Adjust as necessary for your application needs.
 */
(function(global) {
  // map tells the System loader where to look for things
  var map = {
    'app':                        'app', // 'dist',
    '@angular':                   'node_modules/@angular',
    'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
    'rxjs':                       'node_modules/rxjs'
  };
  // packages tells the System loader how to load when no filename and/or no extension
  var packages = {
    'app':                        { main: 'main.js',  defaultExtension: 'js' },
    'rxjs':                       { defaultExtension: 'js' },
    'angular2-in-memory-web-api': { defaultExtension: 'js' },
  };
  var ngPackageNames = [
    'common',
    'compiler',
    'core',
    'http',
    'platform-browser',
    'platform-browser-dynamic',
    'router',
    'router-deprecated',
    'upgrade',
  ];
  // Add package entries for angular packages
  ngPackageNames.forEach(function(pkgName) {
    packages['@angular/'+pkgName] = { main: pkgName + '.umd.js', defaultExtension: 'js' };
  });
  var config = {
    map: map,
    packages: packages
  }
  System.config(config);
})(this);

(c)パッケージをインストールする。

package.jsonでリストされたパッケージをnpmを使ってインストールします。以下のコマンドをターミナルウィンドウ（Windowsではコマンドウィンドウ）へ入力してください。

> npm install

インストール中の注意すべきエラーが赤文字で表示されるかもしれません。インストールは大抵これらのエラーをリカバリし、成功して終了します。

npmのエラーと警告

npm installの最後でコンソールにnpm ERR!で始まるメッセージが表示されていない場合、すべてがうまくいっています。npm WARNメッセージが途中で幾つか表示されているかもしれませんが、この場合もうまくいっています。

しばしばgyp ERR!が続いた後にnpm WARNメッセージをよく見ることがありますが、それらは無視してください。パッケージはnode-gypを使って再コンパイルされることが必要な場合があります。もし再コンパイルが失敗した場合、パッケージはリカバリされ（多くはコンパイル済みバージョンへ）、すべてがうまく動作します。

npm installの最後にnpm ERR!メッセージがないようにしてください。

npmを使った必要なライブラリとパッケージの追加

　Angularアプリケーションの開発ではアプリに必要なライブラリやパッケージのインストールをnpmパッケージマネージャに任せます。AngularチームはdependenciesとdevDependenciesセクションのスターターセットパッケージを用意しておくことをお勧めします。詳細はnpmパッケージをご覧ください。

有用なスクリプト

私たちが提案するpackage.jsonには幾つかのスクリプトが含まれています。それらは開発の共通タスクを扱ってくれます。

```package.json (scripts)

{
"scripts": {
"start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ",
"lite": "lite-server",
"postinstall": "typings install",
"tsc": "tsc",
"tsc:w": "tsc -w",
"typings": "typings"
}
}
```
npm scriptは大抵、npm run スクリプト名といった方法で実行します。(startのような）幾つかのコマンドはrunキーワードを必要としません。以下、スクリプトが行うことの一覧です。

npm start - コンパイルを実行し、サーバーを同時に起動します。それらを"監視モード"で行います。

npm run tsc - TypeScriptコンパイラを１度実行します。

npm run tsc:w - TypeScriptコンパイラを監視モードで実行します。プロセスは実行され続け、TypeScriptファイルの変更を監視し、変更された時に再コンパイルを行います。

npm run lite - lite-serverを実行します。lite-serverは軽量なスタティックファイルサーバーで、ルーティングを使用するAngularアプリの開発を素晴らしいいサポートをしてくれます。

npm run typings - typings toolを独立して実行することができます。

npm run postinstall - npmによってパッケージのインストールが成功した時に呼び出されます。このスクリプトではtypings.jsonで定義されたTypeScript定義ファイルをインストールします。

私たちは準備ができました さあ、少しコードを書きましょう。

Step 2: 最初のAngularコンポーネント

それでは、私たちのアプリケーションが中に入るフォルダを作成します。そして、とっても簡単なAngularコンポーネントを作成しましょう。

アプリ用サブフォルダの作成
プロジェクトのルートディレクトリへサブフォルダを追加してください。

> mkdir app

コンポーネントファイルの作成
以下の内容でapp/app.component.tsファイルを（新しく追加されたフォルダの中へ）作成します。

app/app.component.ts

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

AppComponentはアプリケーションのルートです。

すべてのAngularアプリは少なくとも一つのルートコンポーネントを持ちます。慣例的にAppComponentと名付けられています。 ルートコンポーネントはクライアントのユーザー体験をホスティングします。コンポーネントはAngularアプリケーションの基本的なビルディングブロックです。コンポーネントは関連付けられたテンプレートを通じて、スクリーンの一部、つまり、ビューを制御します。

QuickStartでは１つの、極めて単純なコンポーネントしかありません。しかし、全てのコンポーネントにとって必須の構造を持っています。

• 一つか、それ以上のimport文で私たちの必要とするものへ参照する。
• @ComponentデコレーターでAngularへどのテンプレートを使用するか、どのようにコンポーネントを生成するかを指示する。
• コンポーネントクラスはビューの表示や振る舞いをテンプレートを通じて制御する。

Import

Angular アプリはモジュールです。モジュールは目的を実現するための幾つかのファイルからなります。Angular自身もモジュールです。Angularはアプリケーションを構築するのに使用される幾つかの関連する機能のライブラリモジュールの集合体です。

モジュールやライブラリが必要な時、インポートを使用します。これがAngular 2　コアのインポートです。それによって、コンポーネントのコードは@Componentデコレーターへアクセスすることができます。

```app/app.component.ts (import)

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

### @Component decorator

コンポーネントはデコレーター関数です。この関数ではメタデータオブジェクトを引数として受け取ります。@シンボルを持つ関数のプリフィックスにより見つけた、コンポーネントクラスへこの関数を適用し、メタデータをオブジェクトとともに呼び出します。ちょうど前で触れたクラスです。

@Componentはデコレーター（装飾）でコンポーネントクラスを持ったメタデータと関連付けられるようにします。メタデータはAngularへこのコンポーネントの生成と使いかたを指示します。

```app/app.component.ts (metadata)

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

この特別なメタデータオブジェクトには２つのフィールドがあります。slectorとtemplateです。

selectorはコンポーネントを表すHTML要素に対する簡単なCSSセレクタを指定します。

このコンポーネントに対する要素はmy-appと名付けられています。AngularはホストされているHTMLにmy-appエレメントを見つけるごとに、AppComponentのインスタンスを生成し、表示します。

templateはコンポーネントのコンパニオンとなるテンプレートを指定します。HTMLを拡張した書式で記載され、Angularへコンポーネントのビューをどのようにレンダリングするかを指示します。

今回のテンプレートは１行のHTMLで"My First Angular 2 App"と表示します。

より高度なテンプレートはコンポーネント持つプロパティへのデータバインディングや他のテンプレートを持ったアプリケーションコンポーネントを指定するといった場合があります。これらのテンプレートは他のコンポーネント指定することもあります。この方法ではAngulerアプリケーションはコンポーネントのツリーになります。

コンポーネントクラス

ファイルの末尾に空で何もしないAppComponentと名付けられたクラスがあります。

```app/app.component.ts (class)

export class AppComponent { }

私たちが大きなアプリケーションをビルドする学習が出来た時、このクラスをプロパティやアプリケーションのロジックで拡張することができます。AppComponentクラスが空なのは私たちがQuickStartですることが何もないからです。

私たちはAppComponentをエクスポートし、アプリケーションの他の箇所でインポートできます。main.tsを作る時にそれが見られるでしょう。

Step 3: main.tsの追加

Angularにルートコンポーネントをロードさせましょう。以下の内容でapp/main.tsファイルを作成してください。

app/main.ts

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

アプリケーションを起動するために、二つのものをインポートします。

• Angularのブラウザブートストラップ関数
• アプリケーションのルートコンポーネント,AppComponent

それから、AppComponentと共にbootstrapを呼び出します。

ブートストラップはプラットフォームで固有です。

ブートストラップ関数を@angular/coreでなく、@angular/platform-browser-dynamicからインポートしました。ブートストラップは、コアではありません。なぜなら、アプリを起動する方法は一つではないからです。実際、ブラウザ中でのアプリケーションのほとんどは、このライブラリのブートストラップを呼び出します。

しかし、コンポーメントを異なる環境にロードすることも可能です。私たちはそれをApache CordovaやNativeScriptでロードすることがあります。アプリケーションのファーストページをサーバー上でレンダリングし、起動パフォーマンスやSEOを促進したいこともあります。これらのターゲットでは異なる種類のブートストラップ関数を必要とします。それらは異なるライブラリからインポートされます。

どうしてmain.tsをアプリのコンポーネントファイルと別に作成したのでしょう？

main.tsとアプリケーションのコンポーネントファイルはどちらも小さなファイルです。今回は単にQuickStartです。これら2つのファイルを1つに統合することもでき、それにより私たちは複雑さを免れたかもしれません。

Angularアプリケーションを作る、その固有のやり方を本稿では示したいと思います。アプリケーションのブートストラップはビューを表示することとは別の関心事です。関心事を混ぜてしまうとより複雑になってしまいます。AppComponentを複数の環境で異なるブートストラップで起動することができるかもしれません。そのため、テストのコンポーネントは、アプリケーション全体を実行しようとすることがなければ、より簡単になるかもしれません。正しい方法を行うため、ほんの少しだけ努力をしてみましょう。

Step 4: index.htmlを追加する。

プロジェクトのルートフォルダーにindex.htmlファイルを作成し、以下の内容をペーストしてください。

index.html

    <html>
      <head>
        <title>Angular 2 QuickStart</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="styles.css">
        <!-- 1. Load libraries -->
         <!-- Polyfill(s) for older browsers -->
        <script src="node_modules/core-js/client/shim.min.js"></script>
        <script src="node_modules/zone.js/dist/zone.js"></script>
        <script src="node_modules/reflect-metadata/Reflect.js"></script>
        <script src="node_modules/systemjs/dist/system.src.js"></script>
        <!-- 2. Configure SystemJS -->
        <script src="systemjs.config.js"></script>
        <script>
          System.import('app').catch(function(err){ console.error(err); });
        </script>
      </head>
      <!-- 3. Display the application -->
      <body>
        <my-app>Loading...</my-app>
      </body>
    </html>

index.htmlファイルはアプリケーションをホストするwebページを定義します。注目すべきHTMLのセクションは、

1. JavaScript ライブラリ
   
2. SystemJSの設定ファイル スクリプトで、アプリのモジュールを、どこからインポートし、実行するか、私たちの先ほど書いたmainファイルに言及しています。
   
3. <body>の<my-app> タグはどこでアプリが実行されるのかを示します。

ライブラリ

index.htmlで以下のようにスクリプトをロードします。

```index.html (libraries)

<!-- Polyfill(s) for older browsers -->

core-jsのES2015/ES6 shimから始まっています。このファイルはグローバルコンテキスト(window)に>ES2015(ES6)の必須機能のモンキーパッチを当てます。その次、zone.jsとreflect-metadataはAngular2のためのpolyfillです。それからモジュールローディングのための[SystemJS](https://angular.io/docs/ts/latest/quickstart.html#systemjs)ライブラリです。

ユーザーエクスペリエンスの向上やロードタイムやメモリフットプリントなどの製品品質により関心がある場合は他の選択肢を利用することもできます。

### SystemJS

QuickStartは[SystemJS](https://github.com/systemjs/systemjs)をアプリケーションやライブラリのモジュールのロードに使います。[以前](#AddFiles)にsystemjs.config.jsファイルをプロジェクトルートに追加しました。ローディングについては、定評のある[webpack](https://angular.io/docs/ts/latest/guide/webpack.html)含め、代替手段があります。SystemJSはたまたま良い選択でした。しかし、それは選択であって、好みでなかったことを明確にしておきたいと思います。

すべてのモジュールローダーには設定が必要で、どんなローダーの設定もファイル構造が多様化するとあっという間に複雑になり、製品をビルドすることやパフォーマンスについて思案をしなくてはならなくなります。

選択するローダーについて精通しておくことを推奨します。SystemJSの設定についてもっと知りたい場合は、[こちら](https://github.com/systemjs/systemjs/blob/master/docs/config-api.md)をどうぞ。

それらの注意点を心に留めておくとして、では[先ほど追加したQuickStartでのsystemjs.config.js設定ファイル](AddFiles)では何をしているのでしょうか？ここでは第一には、SystemJSへあるモジュールをインポートする時にどこを見れば良いかを教えるマップを作成します。次に私たちの全てのパッケージ、つまりはプロジェクトが依存しているパッケージの全てや私たちのアプリケーションのパッケージ、appをSystemJSに登録します。

私たちのQuickStartでは全てのリストされたパッケージは使用しませんが、相当なアプリケーションで、それらの多くを必要とします。少なくとも一つのサンプルのドキュメントではその全てのパッケージが必要となります。

パッケージをリストすることに関して、必要でないパッケージはリクエストされた時にロードだけされますが、ランタイムに害はありません。
```

appパッケージはSystemJSへapp/フォルダーのモジュールからリクエストされた際にどうすれば良いかを指示します。

私たちのQuickStartはアプリケーションのTypeScriptの一つファイルが以下のようなインポート文を持っていた場合、そのようなリクエストを行う。

```app/main.ts (import)

import { AppComponent } from './>app.component';

モジュール名にはファイル名の拡張子が含まれていないことに注意してください。設定ファイルでSystemJSへデフォルト拡張子がjs,つまり、JavaScriptであることを指示します。

Applicationを実行する前に私たちはTypeScriptをJavaScriptへトランスパイルしますので、モジュールをtsで書いても読み込みがjsであることは理にかなっています。

### ブラウザ内でのトランスパイル

plunkerの上の実行可能な例では、JavaScriptへのトランスパイル（すなわちコンパイル）をブラウザの中でその場で行っています。このことはデモにとっては良いことです。

しかし、開発している間、製品なったアプリではブラウザでのトランスパイルは行わないでください。

JavaScriptへのトランスパイル（つまりコンパイル）はアプリケーションを実行する前のビルド段階で行うことを強く推奨します。以下のような理由があります。

• コンパイラの警告やエラーを見ることができます。それらはブラウザーでは隠されてしまいます。

• 事前コンパイルはモジュールのロードプロセスを単純化します。コンパイルが分かれた外部のステップである時、問題の診断はより簡単になります。

• 事前コンパイルはより速いユーザー体験につながります。というのもブラウザでコンパイルするのにかかる無駄な時間がなくなるからです。

変更のあったファイルのみ再コンパイルするので、繰り返し開発するのが早くなります。私たちはアプリが把握しきれないくらいのファイル数になっても、すぐに違いに気づくことができます。

事前コンパイルは継続的インテグレーションのプロセス、ビルド、テスト、デプロイによくフィットします。
```
System.importはSystemJSにメインファイル(mai.js main.tsをトランスパイルしたものです。覚えていますか？）mainはAngularへどこからアプリケーションを起動すれば良いか指示します。この起動時のログとエラーはコンソールで取得することもできます。

その他のすべてのモジュールはロード、import文のリクエストかAnguler自身によるリクエストによってロードされます。

<my-app>

Angularがmain.tsのブートストラップ関数をを呼び出す時、AngularはAppComponentのメタデータを読んで、my-appセレクタを見つけ、my-appと名付けられたタグの要素を探し出し、そのタグの間のアプリケーションのビューをレンダリングします。

スタイルの追加

スタイルは必須ではありませんが、良いものです。index.htmlにもstyles.cssと呼ばれるスタイルシートを準備しましょう。

styles.cssファイルをプロジェクトのルートフォルダに作成します。それではスタイリングを始めましょう。ひょっとした、スタイルは以下のような最小限のものから始めるのが良いかもしれません。サンプルの文書で使われているフルセットのマスタースタイルのためには、styles.cssをご参照ください。

```styles.css (excerpt)

h1 {
color: #369;
font-family: Arial, Helvetica, sans-serif;
font-size: 250%;
}
body {
margin: 2em;
}

/*
* See https://github.com/angular/angular.io/blob/master/public/docs/_examples/styles.css
* for the full set of master styles used by the documentation samples
*/

## Step 5: アプリのビルドと実行! <a name="Step5" />

ターミナルウィンドウを開いて、こちらのコマンドを入力してください。

npm start

このコマンドは二つの並行してnodeプロセスを実行します。

* TypeScriptコンパイラを監視モードで実行
* lite-serverと呼ばれる静的サーバー　ブラウザでindex.htmlをロードし、アプリケーションファイルが更新された時にリフレッシュします。

しばらく経つと、ブラウザタブが開き、QuickStartアプリの出力が表示されるでしょう。

Great job!

## 変更を加える <a name="Changes" />

メッセージを"My SECOND Angular 2 app"へ変更してみましょう。

TypeScriptとlite-serverは監視しています。変更を検知し、TypeScriptをJavaScriptへ再コンパイルし、ブラウザを更新し、新しいメッセージを表示します。アプリケーションを開発する気の利いた方法ですね！

コンパイラとサーバーの利用が終わったら、ターミナルウィンドウを閉じてください。

## ラップアップ <a name="WrapUp" />


私たちのプロジェクトのフォルダ構成は以下のようになります。

angular2-quickstart
+app
+app.component.ts
+main.ts
+node_modules ...
+typings ...
+index.html
+package.json
+styles.css
+systemjs.config.js
+tsconfig.json
+typings.json

以下がファイルの内容です。(**筆者註：要するに以下のファイルをコピーしてファイルを揃えましょう！**)

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

app/main.ts

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

index.html

<html>
  <head>
    <title>Angular 2 QuickStart</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="styles.css">
    <!-- 1. Load libraries -->
     <!-- Polyfill(s) for older browsers -->
    <script src="node_modules/core-js/client/shim.min.js"></script>
    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/reflect-metadata/Reflect.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <!-- 2. Configure SystemJS -->
    <script src="systemjs.config.js"></script>
    <script>
      System.import('app').catch(function(err){ console.error(err); });
    </script>
  </head>
  <!-- 3. Display the application -->
  <body>
    <my-app>Loading...</my-app>
  </body>
</html>

package.json

{
  "name": "angular2-quickstart",
  "version": "1.0.0",
  "scripts": {
    "start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ",
    "lite": "lite-server",
    "postinstall": "typings install",
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "typings": "typings"
  },
  "license": "ISC",
  "dependencies": {
    "@angular/common":  "2.0.0-rc.1",
    "@angular/compiler":  "2.0.0-rc.1",
    "@angular/core":  "2.0.0-rc.1",
    "@angular/http":  "2.0.0-rc.1",
    "@angular/platform-browser":  "2.0.0-rc.1",
    "@angular/platform-browser-dynamic":  "2.0.0-rc.1",
    "@angular/router":  "2.0.0-rc.1",
    "@angular/router-deprecated":  "2.0.0-rc.1",
    "@angular/upgrade":  "2.0.0-rc.1",
    "systemjs": "0.19.27",
    "core-js": "^2.4.0",
    "reflect-metadata": "^0.1.3",
    "rxjs": "5.0.0-beta.6",
    "zone.js": "^0.6.12",
    "angular2-in-memory-web-api": "0.0.10",
    "bootstrap": "^3.3.6"
  },
  "devDependencies": {
    "concurrently": "^2.0.0",
    "lite-server": "^2.2.0",
    "typescript": "^1.8.10",
    "typings":"^1.0.4"
  }
}

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  }
}

typings.json

{
  "globalDependencies": {
    "core-js": "registry:dt/core-js#0.0.0+20160317120654",
    "jasmine": "registry:dt/jasmine#2.2.0+20160505161446",
    "node": "registry:dt/node#4.0.0+20160509154515"
  }
}

style.css

h1 {
  color: #369;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 250%;
}
body {
  margin: 2em;
}
 /*
  * See https://github.com/angular/angular.io/blob/master/public/docs/_examples/styles.css
  * for the full set of master styles used by the documentation samples
  */

system.config.js

/**
 * System configuration for Angular 2 samples
 * Adjust as necessary for your application needs.
 */
(function(global) {
  // map tells the System loader where to look for things
  var map = {
    'app':                        'app', // 'dist',
    '@angular':                   'node_modules/@angular',
    'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
    'rxjs':                       'node_modules/rxjs'
  };
  // packages tells the System loader how to load when no filename and/or no extension
  var packages = {
    'app':                        { main: 'main.js',  defaultExtension: 'js' },
    'rxjs':                       { defaultExtension: 'js' },
    'angular2-in-memory-web-api': { defaultExtension: 'js' },
  };
  var ngPackageNames = [
    'common',
    'compiler',
    'core',
    'http',
    'platform-browser',
    'platform-browser-dynamic',
    'router',
    'router-deprecated',
    'upgrade',
  ];
  // Add package entries for angular packages
  ngPackageNames.forEach(function(pkgName) {
    packages['@angular/'+pkgName] = { main: pkgName + '.umd.js', defaultExtension: 'js' };
  });
  var config = {
    map: map,
    packages: packages
  }
  System.config(config);
})(this);

次は?

私たちの最初のアプリケーションは多くのことをしません。基本的にAngular 2の"Hello World"です。

最初のアプリを簡単に保ちました。小さなAngularコンポーネントを作成し、簡単なindex.htmlを作り、静的ファイルサーバーで起動しました。それが、私たちが"Hello World"アプリに期待するすべてのことです。

私たちにはもっと大きな野望があります！

良いお知らせは、これでセットアップのオーバーヘッドはほとんどなくなったということです。package.jsonを触ってライブラリ更新したり、index.htmlへ必要なライブラリやcssスタイルシートを追加しましょう。

私たち次のステップにいける段階になりました。次のステップは、より大きなアプリケーションをAngular2を使って構築できることを示すような、小さなアプリケーションを作ってみることです。

Tour of Herosチュートリアルをやってみましょう！

---

Powered by Google ©2010-2016. Code licensed under an MIT-style License. Documentation licensed under CC BY 4.0.