コアポイント

• Angular 2.0は、TypeScript（JavaScriptのスーパーセット）を使用して、パフォーマンスを最適化し、ページの速度とワークフローの自動化を改善します。 TypeScriptを使用すると、開発者はタイプ情報を使用してJavaScriptコードに注釈を付け、コードベースのエラーをキャッチするのに役立ちます。
• Angular 2.0は、ビューとロジックを含むコードの再利用可能なブロックであるコンポーネントの概念を?qū)毪筏蓼?。コンポーネントは、命令をフレームワークの主な要素として置き換え、アプリケーションのコードの一部がコードの別の部分に干渉しないようにします。
• Angular 2.0のコンポーネントの作成TypeScriptを使用するには、コンポーネントクラスを定義し、Angularから必要な関數(shù)をインポートすることが含まれます。次に、@Componentデコレーターでクラスを飾り、アプリケーションの他の部分で使用するためにそれをエクスポートします。
• Angular 2.0は、ほとんどのブラウザーで実行される標(biāo)準(zhǔn)のJavaScriptバージョンであるES5もサポートしています。 Angular 2.0でES5を使用してコンポーネントを作成するには、開発者はNGオブジェクトのメソッドを使用してコンポーネントを定義し、機(jī)能を追加できます。次に、サーバーを必要とせずにブラウザでコードを直接実行できます。

この記事は、ステファン?マックス、ジェフ?スミス、ラビ?キランによってレビューされました。 SitePointコンテンツを最高の狀態(tài)にしてくれたすべてのSitePointピアレビューアに感謝します！

このチュートリアルのコードは、GitHubコードベースにあります。コードベースには2つのブランチがあります。1つはTypeScriptバージョン用、もう1つはES5バージョン用です。特定のブランチをクローンする場合は、

git clone <url> --branch <branch></branch></url>

JavaScriptでのコンポーネントの使用は、過去數(shù)か月で大幅に増加しています。それらは、React、ノックアウト、エンバーなどのプロジェクトで使用されているため、Angularがバージョン2.0にそれらを統(tǒng)合することは驚くことではありません。コードモジュール性は常にAngularチームの焦點(diǎn)であり、コンポーネントの使用は、カプセル化されたブロックにコードを分割できるため、これを強(qiáng)調(diào)しています。

では、コンポーネントとは何ですか？それは基本的に、アプリケーション全體で再利用できるコードの一部です。ビューとロジックの2つの部分が含まれています。 Angular Developmentチームのコンポーネントへの注意を活用することにより、いくつかの非常に強(qiáng)力な機(jī)能を活用できます。 Angular 2により、フレームワークのコアとして命令を置き換えたさまざまなコンポーネントで構(gòu)成される動的アプリケーションを非常に簡単に作成できます。 Angular 2では、ディレクティブは、DOMに何らかの機(jī)能を追加するためにのみ使用される軽量コンポーネントです?，F(xiàn)在、Angular開発者は、$範(fàn)囲の分離に関連する紛爭の問題のために、アプリケーションを臺無しにすることを心配する必要はありません。代わりに、コンポーネントを使用することは、アプリケーションのコードの一部がコードの別の部分に干渉しないようにする方法です。

typeScript

: number

function calculateArea(height: number, width: number): number {
  return height * width;
}
console.log(calculateArea(2, 3));
// 將正常工作

console.log(calculateArea("Ten", "Eleven"));
// 參數(shù)類型“string”不可分配給參數(shù)類型“number”。

TypeScriptをJavaScriptにコンパイルするプロセスは非常に簡単です。まず、NPM：

npm install -g typescript

tsc <filename.ts>

TypeScriptはJavaScriptのスーパーセットであるため、有効なJavaScriptは.tsファイルで適切に機(jī)能します。 TypeScriptを使用することにより、開発者はJavaScriptコードを拡張して、最新のES6機(jī)能を活用できます。この例では、クラスを使用します。

以下では、TypeScriptコードを使用してコンポーネントを作成しました。 ES6インポート構(gòu)文を使用して、最初にAngularをインポートしました。この例では、コンポーネントとそのコンポーネントのビューを定義します。完了したら、Angularのコードを?qū)g行するにはAngularのブートストラップ機(jī)能が必要になります。このコードでは、 @シンボルが表示されます。これは、Angularに何を構(gòu)築しようとしているかを伝えるために使用されます。

function calculateArea(height: number, width: number): number {
  return height * width;
}
console.log(calculateArea(2, 3));
// 將正常工作

console.log(calculateArea("Ten", "Eleven"));
// 參數(shù)類型“string”不可分配給參數(shù)類型“number”。

Angular 2はTypeScriptの上に構(gòu)築されているため、フレームワークは@Componentアノテーションを認(rèn)識し、新しいコンポーネントを作成しようとしていることを知っています。さらに、Angularに、htmlで<user-name></user-name>を表示するたびに、コンポーネントをインスタンス化することを示しています。

コンポーネントには2つの部分が含まれています

view
logistic

npm install -g typescript

<user-name></user-name>上記の例では、空のクラスは1つだけです。しかし、今、私は名前変數(shù)を作成し、次の式を使用して私たちのビューでこの名前変數(shù)をレンダリングします。

前述のブートストラップ機(jī)能も表示されます。名前は共有されていますが、この関數(shù)は角度アプリケーションを起動または起動するために使用され、Twitter Bootstrapフレームワークとは関係ありません。コンポーネントをこの関數(shù)に渡すことを忘れた場合、Angularはコンポーネントをロードすることを知りません。

tsc <filename.ts>

この例を使用しているユーザーは、ルートディレクトリでを?qū)g行できます。このコマンドを?qū)g行した後、

にアクセスして、コンポーネントの実際の効果を表示できます。うまくいけば、これがAngularがコンポーネントにロジックを追加する方法を示しています。

node app.jsコンポーネントをES5 < ES5を使用して2.0のパワーを活用したい人のために、Angular 2チームは、単純にWebサイトに配置できるフレームワークバージョンを作成しました。 ES5にはモジュールシステムがないため、これは必要です。したがって、何らかの自己実行バンドルが必要です。最初の例のコードを見た場合、アプリケーションに3つの異なるスクリプトタグを追加する必要があることがわかります。この例では、次のスクリプトを追加するだけです。

function calculateArea(height: number, width: number): number {
  return height * width;
}
console.log(calculateArea(2, 3));
// 將正常工作

console.log(calculateArea("Ten", "Eleven"));
// 參數(shù)類型“string”不可分配給參數(shù)類型“number”。

npm install -g typescript

tsc <filename.ts>

import { Component, View, bootstrap } from 'angular2/angular2';
@Component({
  selector: 'user-name'
})