Angular 2ベータ版で5分でクイックスタート

Angularチームからのチュートリアル「5 min quickstart」の翻訳を提供します。 このチュートリアルでは、 最近ベータステータスを取得した新しいAngular 2フレームワークで「Hello World」アプリケーションを作成するプロセスについて説明します。

最初から始めて、超シンプルなAngular2 TypeScriptアプリケーションを構築しましょう。

デモ

Angular 2アプリケーションがどのように機能するかを確認するには、 実際の例を実行するのが最善の方法です。
このリンクをクリックすると、新しいタブが開き、サンプルがplunkerにロードされ、簡単なメッセージが表示されます。

My First Angular 2 App 

ファイル構造は次のとおりです。

 angular2-quickstart ├── app │ ├── app.component.ts │ └── boot.ts ├── index.html └── license.md 

機能的には、 index.htmlとapp /フォルダー内の2つのTypeScriptファイルです。 やりましょう！

もちろん、プランカーでのみ実行されるアプリケーションは作成しません。 実生活でこれをやっているかのようにすべてをしましょう：

1. 開発環境をセットアップします。
2. アプリケーションのAngularのルートコンポーネントを作成します。
3. メインWebページを制御できるようにダウンロードしてください。
4. メインページ（ index.html ）を書きましょう。

指示に従ってすべてのコメントを無視すれば、5分でQuickStartを実際に構築できます。
しかし、私たちの多くはこのすべてが「なぜ」「どのように」起こるかに興味を持ち、これらの質問への答えにはもっと時間がかかります。

開発環境

場所（プロジェクトフォルダー）、いくつかのライブラリ、多数のTypeScript設定、お好みのTypeScriptサポートを備えたエディターが必要です。

プロジェクト用の新しいフォルダーを作成します。

 mkdir angular2-quickstart cd angular2-quickstart 

必要なライブラリを追加します

ライブラリのダウンロードと管理には、npmパッケージマネージャーを使用することをお勧めします。

npmがありませんか？ このチュートリアル全体で数回使用するため、 今すぐインストールしてください。

package.jsonファイルをプロジェクトフォルダーに追加し、次のコードをそのフォルダーにコピーします。

 // package.json { "name": "angular2-quickstart", "version": "1.0.0", "scripts": { "tsc": "tsc", "tsc:w": "tsc -w", "lite": "lite-server", "start": "concurrent \"npm run tsc:w\" \"npm run lite\" " }, "license": "ISC", "dependencies": { "angular2": "2.0.0-beta.0", "systemjs": "0.19.6", "es6-promise": "^3.0.2", "es6-shim": "^0.33.3", "reflect-metadata": "0.1.2", "rxjs": "5.0.0-beta.0", "zone.js": "0.5.10" }, "devDependencies": { "concurrently": "^1.0.0", "lite-server": "^1.3.1", "typescript": "^1.7.3" } } 

詳細を知りたいですか？ 私たちはそれらを設定しました 以下のアプリケーション 。

パッケージをインストールします。 ターミナルウィンドウ（Windowsのコマンドプロンプト）を開き、次のnpmコマンドを実行します。

 npm install 

インストール中に不気味な赤いエラーメッセージが表示される場合があります。 それらを無視します。 インストールは成功します。 見る 詳細については、以下のアプリケーションをご覧ください。

TypeScriptを構成する

TypeScriptコンパイラを非常に具体的に構成する必要があります。
tsconfig.jsonファイルをプロジェクトフォルダーに追加し、以下をコピーします。

 // tsconfig.json { "compilerOptions": { "target": "ES5", "module": "system", "moduleResolution": "node", "sourceMap": true, "emitDecoratorMetadata": true, "experimentalDecorators": true, "removeComments": false, "noImplicitAny": false }, "exclude": [ "node_modules" ] } 

tsconfig.jsonを探索します 以下のアプリケーション 。

これですべて準備が整いました。 いくつかのコードを書きましょう。

最初のAngularコンポーネント

コンポーネントはAngularの最も基本的な概念です。 コンポーネントはビュー（ビュー）を調整します。これは、ユーザーに情報を表示し、ユーザーのアクションに応答するWebページの一部です。

技術的には、コンポーネントは表示テンプレートを制御するクラスです。 Angularアプリケーションを作成するときに、このようなクラスを多数作成します。 これが最初の試みなので、すべてを非常にシンプルにします。

ソースが配置されるサブフォルダーを作成します

アプリケーションコードをapp /というサブフォルダーに保存することをお勧めします。 コンソールで次のコマンドを実行します。

 mkdir app cd app 

コンポーネントファイルを追加

ここで、 app.component.tsというファイルを追加し、次のコードをそのファイルにコピーします。

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

クラスを定義する最後から始めて、このファイルを詳しく見ていきましょう。

コンポーネントクラス

ファイルの下部には、 AppComponentと呼ばれる空で占有されていないクラスがあります。 独立したアプリケーションを作成する準備ができたら、このクラスをアプリケーションのプロパティとロジックで補完できます。 このクイックスタートでは何もする必要がないため、 AppComponentクラスは空です。

モジュール

角度アプリケーションはモジュール式です。 これらには多くのファイルが含まれており、それぞれに特定の目的があります。

ほとんどのアプリケーションファイルは、コンポーネントのようなものをエクスポートします。 app.componentファイルは、 AppComponentクラスをエクスポートします。

 // app/app.component.ts (export) export class AppComponent { } 

エクスポートの事実は、通常のファイルをモジュールに変えます。 ファイル名（拡張子なし）は通常、モジュールの名前です。 したがって、 「app.component」は最初のモジュールの名前です。

より複雑なアプリケーションには、ビジュアルツリーのAppComponentを継承する子コンポーネントがある場合があります。 より複雑なアプリケーションには、少なくともコンポーネントと同じ数のファイルとモジュールがあります。

QuickStartは複雑ではありません。1つのコンポーネントで十分です。 ただし、このような小さなアプリケーションでも、モジュールは基本的な組織上の役割を果たします。

モジュールは他のモジュールに依存しています。 Angular TypeScriptアプリケーションでは、別のモジュールから提供されるものが必要な場合、それをインポートします。 別のモジュールがAppComponentを参照する必要がある場合、次のようにAppComponent シンボルをインポートします。

 // app/boot.ts import {AppComponent} from './app.component' 

Angularはライブラリモジュールのコレクションでもあります。 各ライブラリは、共通の方向に接続された複数のモジュールで構成されるモジュールです。

Angularから何かが必要な場合は、ライブラリモジュールからインポートします。 そして今、コンポーネントのメタデータを定義できるものが必要です。

コンポーネントのメタデータ

クラスは、メタデータをバインドするとAngularのコンポーネントになります。 Angularは、マッピングの構築方法、およびコンポーネントがアプリケーションの他の部分と対話する方法を理解するためにメタデータを必要とします。

AngularのComponent関数を使用して、 コンポーネントのメタデータを定義します。 メインのAngularライブラリであるangular2 / coreからインポートすることで、この関数にアクセスします。

 // app/app.component.ts (import) import {Component} from 'angular2/core'; 

TypeScirptでは、関数をdecoratorに変換することにより、関数とクラスを関連付けることができます。 これを行うには、名前の前に@記号を追加し、クラス宣言の直前に配置します。

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

@Componentは、このクラスがAngularのコンポーネントであることをAngularに伝えます。 @Componentに送信される構成オブジェクトには、 セレクターとテンプレートの 2つのフィールドがあります。

selectorプロパティは、ホストとして機能するHTML要素my-appの通常のCSSセレクターを決定します。 Angularは、親HTMLでmy-appを検出するたびにAppComponentのインスタンスを作成して表示します。

my-appセレクターを覚えておいてください！ index.htmlを作成するときにこの情報が必要になります。

テンプレートプロパティには、コンポーネントテンプレートが含まれています。 テンプレートは、ディスプレイのレンダリング方法をAngularに説明するHTMLのバリエーションです。 このテンプレートは、 「My First Angular App」を宣言する唯一のHTML行です。

このコンポーネントをダウンロードする必要があることを、Angularに何らかの形で説明する必要があります。

実行する

新しいファイルboot.tsをapp /フォルダーに追加し、次のコードをそのファイルにコピーします。

 // app/boot.ts import {bootstrap} from 'angular2/platform/browser' import {AppComponent} from './app.component' bootstrap(AppComponent); 

アプリケーションを実行するには、2つのことが必要です。

1. 角度ブートストラップブラウザ機能。
2. 作成したアプリケーションのルートコンポーネント。

両方をインポートします。 次に、 ブートストラップを呼び出して、 AppComponentの ルートコンポーネントの型を 渡します。

Angular2 / platform / browserからブートストラップをインポートする理由と、別のboot.tsファイルを作成する理由を調べることができます。 以下のアプリケーション 。

コンポーネントをルートとしてブラウザでアプリケーションを実行するようにAngularに依頼しました。 ただし、Angularはどこで起動しますか？

index.htmlページを追加します

Angularは、 index.htmlページの特定の場所にアプリケーションを表示します。 このファイルを作成します。

index.htmlをapp /フォルダーに入れません。 プロジェクトのルートフォルダーの1つ上のレベルに配置します 。

 cd .. 

次に、 index.htmlファイルを作成し、次のファイルをコピーします。

 <!-- index.html --> <html> <head> <title>Angular 2 QuickStart</title> <!-- 1.   --> <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.  SystemJS --> <script> System.config({ packages: { app: { format: 'register', defaultExtension: 'js' } } }); System.import('app/boot') .then(null, console.error.bind(console)); </script> </head> <!-- 3.   --> <body> <my-app>Loading...</my-app> </body> </html> 

注意すべきHTMLのセクションは3つあります。

1. 必要なJavaScriptライブラリをロードしています。 Angular 2を機能させるには、 angular2-polyfills.jsとRx.jsが必要です。
2. Systemと呼ばれるものをセットアップし、作成したブートファイルをインポートするように彼に依頼します。
3. <my-app>タグを<body>に追加します。 これは、アプリケーションが存在する場所です！

アプリケーションのモジュールを見つけてダウンロードする必要があります。 これにはSystemJSを使用します。 多くのオプションがあり、SystemJSが最良の選択であると言うことはできませんが、私たちはそれを気に入っており、機能しています。

SystemJS構成の詳細は、このチュートリアルの範囲外です。 構成の一部について簡単に説明します 以下のアプリケーション 。

Angularがboot.jsでbootstrap関数を呼び出すと、 AppComponentメタデータを読み取り、 my-appセレクターを見つけ、 my-appという名前のタグを検出し、アプリケーションをそのタグにロードします。

コンパイルして実行します！

ターミナルウィンドウを開き、次のコマンドを入力します

 npm start 

このコマンドは、2つの並列ノードプロセスを開始します。

1. 監視モードのTypeScriptコンパイラ。
2. ブラウザにindex.htmlをロードし、アプリケーションコードが変更されるたびにブラウザを更新するライトサーバー静的サーバー。

しばらくすると、ブラウザのタブが開いて表示されます：

 My First Angular 2 App 

おめでとうございます！ あなたは仕事中です！

読み込み中...が表示されている場合は、こちらをお読みください ES6ブラウザサポートアプリケーション 。

いくつかの変更を行います

メッセージを「My SECOND Angular 2 app」に変更してみてください。

TypeScriptコンパイラとライトサーバーがアクションを監視します。 変更を検出し、TypeScriptをJavaScriptに再コンパイルし、ブラウザタブを更新して、更新されたメッセージを表示する必要があります。

これは、アプリケーションを開発するためのエレガントな方法です！

コンパイラーとサーバーの両方を中断するためにすべてを行ったら、ターミナルウィンドウを閉じます。

最終的な構造

プロジェクトフォルダの最終的な構造は次のようになります。

 angular2-quickstart ├── node_modules ├── app │ ├── app.component.ts │ └── boot.ts ├── index.html ├── package.json └── tsconfig.json 

そして、ここに私たちのファイルがあります：

おわりに

私たちの最初のアプリケーションはあまりしません。 これは基本的にAngular 2の「Hello World」です。

初めて、可能な限りすべてをシンプルにしました。小さなAngularコンポーネントを作成し、JavaScriptライブラリをindex.htmlに追加して、静的ファイルサーバーを起動しました。 全体として、Hello Worldアプリに期待したのはこれだけです。

もっと深刻な野心があります

良いニュースは、インストールに関する大騒ぎは私たちに関係ないということです。 おそらく、 package.jsonに少し触れて、ライブラリを更新します。 index.htmlは、ライブラリまたはcssスタイルのファイルを追加する必要がある場合にのみ開きます。

次のステップへの準備が整いました。今、私たちのタスクは、Angular 2で素晴らしいことができることを示すアプリケーションを構築することです。

Heroic Tourチュートリアルに参加してください ！

用途

この章の残りの部分では、上記で簡単に触れたいくつかのポイントをより詳細に説明する一連のアプリケーションに専念します。

ここには重要な資料はありません。 詳細に興味がある場合は読んでください。

↑付録：ES6ブラウザーのサポート

Angular 2はES2015標準のいくつかの機能に依存しており、そのほとんどは既に最新のブラウザーに含まれています。 ただし、一部のブラウザー（IE11など）では、この機能をサポートするためにポリフィル（シム）が必要です。 index.htmlの他のスクリプトの前に 、次のポリフィルをロードしてみてください。

 <script src="node_modules/es6-shim/es6-shim.js"></script> 

↑付録：package.json

npmはノード用の一般的なパッケージマネージャーであり、多くのAngular開発者はそれを使用して、アプリケーションに必要なライブラリをダウンロードおよび管理します。

npm package.jsonファイルで必要なパッケージを特定しました。

Angularチームは、このファイルの依存関係とdevDependenciesセクションで指定されたパッケージを使用することを提案しています。

 // package.json (dependencies) { "dependencies": { "angular2": "2.0.0-beta.0", "systemjs": "0.19.6", "es6-promise": "^3.0.2", "es6-shim": "^0.33.3", "reflect-metadata": "0.1.2", "rxjs": "5.0.0-beta.0", "zone.js": "0.5.10" }, "devDependencies": { "concurrently": "^1.0.0", "lite-server": "^1.3.1", "typescript": "^1.7.3" } } 

他のパッケージを選択できます。 このキットは、すべてのコンポーネントが適切に機能することがわかっているため、お勧めします。 今すぐ私たちに従ってください、そして後であなたの喜びに実験して、あなたの経験と味に合うオプションを選択してください。

オプションのスクリプトセクションがpackage.jsonに存在する場合があります。このセクションでは、開発と構築を実行するための便利なコマンドを定義できます。 提供するpackage.jsonには、このようなスクリプトがいくつか含まれています。

 // package.json (scripts) { "scripts": { "tsc": "tsc", "tsc:w": "tsc -w", "lite": "lite-server", "start": "concurrent \"npm run tsc:w\" \"npm run lite\" " } } 

このコマンドを使用して、コンパイラーとサーバーを同時に起動する方法については既に説明しました。

 npm start 

次の形式でnpmスクリプトを実行します： npm run + script-name 。 スクリプトの機能の説明は次のとおりです。

• npm run tsc -1回の実行でTypeScriptコンパイラを実行
• npm run tsc：w -TypeScriptコンパイラを監視モードで起動します。 プロセスは引き続き動作し、TypeScriptファイルに加えられた変更をキャプチャした時点でプロジェクトを再コンパイルします。
• npm run lite - lite-serverを起動します。これは、 John Papaが作成および保守する軽量の静的ファイルサーバーで、ルーティングを使用するAngularアプリケーションを強力にサポートします。

↑付録：npmの警告とエラー

npm ERRで始まるコンソールメッセージがある場合はすべて正常です！ npm install の最後にありません。 コマンドの実行中にいくつかのnpm WARNメッセージが表示される場合があります。これは素晴らしい結果です。

gyp ERRシリーズの後にnpm WARNメッセージがよく表示されます！ 彼を無視します。 パッケージは、 node-gypを使用して自分自身を再コンパイルしようとする場合があります 。 この試行が失敗した場合、パッケージは（通常は以前のバージョンに）復元され、すべてが機能します。

単一のnpm ERRメッセージがない限り、すべてが正常です！ npm installの最後に。

↑付録：TypeScript設定

構成ファイル（ tsconfig.json ）をプロジェクトに追加して、JavaScriptファイルを生成する方法をコンパイラーに説明しました。 tsconfig.jsonの詳細については、公式のTypeScript wikiを ご覧ください 。

ファイルに追加したオプションとフラグが最も重要です。

noImplicitAnyフラグについて少し説明したいと思います。 TypeScript開発者は、 trueまたはfalseに設定する必要があるかどうかに同意しません。 ここには正確な答えはありません。フラグは後でいつでも変更できます。 しかし、私たちの選択は大規模プロジェクトに深刻な影響を与える可能性があるため、議論に値します。

noImplicitAnyが falseに設定されている場合、コンパイラーは、変数の使用方法に応じて変数の型を推測できない場合、変数の型を密かにanyに設定します 。 これは、「暗黙のいずれか 」も意味します。

noImplicitAnyが trueに設定され、TypeScriptコンパイラーが型を推測できない場合、JavaScriptファイルは生成されますが、エラーも報告されます。

このクイックスタートおよびこの開発者ガイドの他の多くの例では、 noImplicitAnyをfalseに設定します 。

より強力なタイピングを好む開発者は、 noImplicitAnyをtrueに設定する必要があります 。 変数の型を最適な選択と思われる場合は任意に設定できますが、このステップの必要性を少し反映した後に明示的に行う必要があります。

noImplicitAnyをtrueに設定すると、非表示のインデックスエラーも発生します。 これが支援よりも厄介であると思われる場合は、次のフラグを使用してそれらをオフにすることができます。

 "suppressImplicitAnyIndexErrors":true 

↑付録：SystemJS設定

QuickStartはSystemJSを使用して、アプリケーションとライブラリモジュールをダウンロードします。 ただし、高く評価されているコミュニティwebpackなどの代替機能があることを忘れないでください。 SystemJSは良い選択ですが、これは単なる選択であり、好みではないことを明確にしたいと思います。

すべてのモジュールローダーには構成が必要であり、ローダーの構成はより複雑になり、ファイル構造がより多様になります-パフォーマンスを向上させるためにファイルを結合することを考え始めるところまで。

選択したブートローダーをよく理解することをお勧めします。

SystemJS設定の詳細については、 こちらをご覧ください。

これらの警告を考えると、私たちは何ができますか？

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

packagesノードは、 アプリケーション/フォルダーからのモジュール要求を検出した場合の処理​​をSystemJSに指示します。

クイックスタートは、TypeScriptアプリケーションファイルで同様のインポートステートメントが見つかるたびに、そのようなリクエストを作成します。

 // boot.ts () import {AppComponent} from './app.component' 

モジュール名（ から ）にはファイル拡張子が含まれていないことに注意してください。 パッケージ構成では、デフォルトでSystemJS拡張機能を「js」、つまりJavaScriptファイルとして定義します。

これは、アプリケーションを起動する前にJavaScriptでTypeScriptをコンパイルするため、合理的です。

plunkerデモでは、ブラウザーでJavaScriptを直接オンザフライでコンパイルします。 これはデモには悪いことではありませんが、開発やリリースに適しているとは限りません。

いくつかの理由により、アプリケーションを起動する前のビルドフェーズでJavaScriptをコンパイルすることをお勧めします。

• ブラウザーで非表示になっているコンパイル時間のエラーと警告を確認できます。
• , , .
• , .
• , . , .
• — , , .

コールSystem.importは SystemJSは、ファイルをインポートしますないブート（boot.js ...コンパイル後boot.ts？、覚えておいてください）未ブーツ -それは我々が角度の実行アプリケーションを尋ねるファイルです。また、起動エラーをキャッチしてコンソールに記録します。

他のすべてのモジュールは、importステートメントまたはAngular自体によって作成されたクエリを使用してロードされます。

↑アプリケーション：boot.ts

プラットフォーム読み込み固有

ブートストラップ関数は、angular2 / coreからではなく、angular2 / platform / browserからインポートします。これには理由があります。すべてのターゲットプラットフォームで同じ機能のみを「コア」と呼ぶことができます。実際、多くのAngularアプリケーションはブラウザでしか実行できず、このライブラリから最長時間ブートストラップ関数を呼び出します。ブラウザ専用に作成する場合、これは「コア」機能です。しかし、別の環境でコンポーネントをロードすることはかなり可能です。Apache Cordovaを使用してモバイルデバイスにダウンロードできます。サーバー上でアプリケーションのホームページをレンダリングして、生産性を向上させたり、



SEOプロモーション。

これらのプラットフォームには、別のライブラリからロードするブートストラップ機能のためのその他のオプションが必要です。

別のboot.tsファイルを作成する理由

boot.tsファイルは小さいです。これは単なるクイックスタートです。app.componentファイルにこれらの数行を入力するだけで、不必要な複雑さから解放されます。

ただし、重要だと思われる理由でこれを行いません。

1. 正しく行うのは簡単です。
2. テストのしやすさ。
3. 再利用の便利さ。
4. 職務の分離。
5. インポートとエクスポートの勉強。

ただ

はい、これは追加の手順および追加のファイルです。全体的にどのくらい難しいですか？QuickStartにとってそれほど重要ではない場合でも、ほとんどのアプリケーションでは

別のboot.tsファイルが望ましいことがわかります。低価格ながら、今すぐ良い習慣を身に付けましょう。

ユーザビリティテスト

QuickStartを決してテストしないことがわかっていても、最初からテストの利便性について考える必要があります。ブートストラップ

機能が同じファイルに存在する場合、コンポーネントをテストすることは困難です。テスト用のコンポーネントファイルをダウンロードするたびに、ブートストラップ機能はアプリケーションをブラウザーにロードしようとします。これは、アプリケーション全体を起動することを想定していなかったため、エラーを引き起こします。コンポーネントだけです。移動ブートストラップで-functionをboot.tsすることは誤ったエラーと純粋なコンポーネントファイルと葉たちを削除します。

再利用

アプリケーションの進化を通じて、ファイルをリファクタリング、名前変更、および移動します。ファイルがbootstrapを呼び出すまで、これを行うことはできません。移動できません。別のアプリケーションでコンポーネントを再利用することはできません。サーバーにコンポーネントをレンダリングしてパフォーマンスを向上させることはできません。

職務分離

コンポーネントのタスクは、表示を表現および管理することです。

アプリケーションの実行は、表示制御とは関係ありません。これは完全に異なる義務です。テストと再利用中に発生した問題は、この不必要な責任の混乱に起因しています。

インポート/エクスポート

別のboot.tsファイルを作成したとき、Angularを操作するための重要なスキルが得られました。あるモジュールから何かをエクスポートして別のモジュールにインポートする方法です。Angularとより緊密に連携するときに、この多くを行います。