Angular 2-概要

Angular JSは、JavaScriptで構築されたオープンソースフレームワークです。 Googleの開発者によって作成されました。このフレームワークは、シングルページアプリケーションでの作業中に遭遇した障害を克服するために使用されました。また、テストはフレームワークを構築する際の重要な側面と見なされました。フレームワークを簡単にテストできることが保証されました。フレームワークの最初のリリースは2010年10月でした。

Angular 2の機能

以下はAngular 2の主な特徴です-

コンポーネント-Angularの以前のバージョンはコントローラーに焦点を当てていましたが、コントローラーよりもコンポーネントを持つことに焦点を変更しました。コンポーネントは、アプリケーションを多くのモジュールに組み込むのに役立ちます。これは、一定期間にわたってアプリケーションをより適切に維持するのに役立ちます。
TypeScript -新しいバージョンのAngularはTypeScriptに基づいています。これはJavaScriptのスーパーセットであり、Microsoftによって維持されています。
サービス-サービスは、アプリケーションのさまざまなコンポーネントで共有できるコードのセットです。たとえば、データベースからデータを選択するデータコンポーネントがある場合、複数のアプリケーションで使用できる共有サービスとして使用できます。

さらに、Angular 2には、より優れたイベント処理機能、強力なテンプレート、モバイルデバイスのより優れたサポートがあります。

Angular 2のコンポーネント

Angular 2には次のコンポーネントがあります-

モジュール-これは、アプリケーションを論理的なコードに分割するために使用されます。コードまたはモジュールの各部分は、単一のタスクを実行するように設計されています。
コンポーネント-これは、モジュールをまとめるために使用できます。
テンプレート-これは、Angular JSアプリケーションのビューを定義するために使用されます。
Metadata -これを使用して、Angular JSクラスにデータを追加できます。
サービス-これは、アプリケーション全体で共有できるコンポーネントを作成するために使用されます。

これらすべてのコンポーネントについては、このチュートリアルの後続の章で詳しく説明します。

Angularの公式サイトはhttps://angular.io/です。サイトにはAngular 2に関するすべての情報とドキュメントがあります。

公式サイト

Angular 2-環境

Angular 2の使用を開始するには、次の主要コンポーネントをインストールする必要があります。

Npm -これは、オープンソースリポジトリを操作するために使用されるノードパッケージマネージャーとして知られています。フレームワークとしてのAngular JSは、他のコンポーネントに依存しています。また、 npm を使用してこれらの依存関係をダウンロードし、プロジェクトに添付できます。
Git -これは、 github 角度サイトからサンプルアプリケーションを取得するために使用できるソースコードソフトウェアです。
エディター-Visual StudioコードやWebStormなど、Angular JS開発に使用できるエディターが多数あります。チュートリアルでは、Microsoftから無料で提供されるVisual Studioコードを使用します。

npmインストール

npmをインストールする手順を見てみましょう。 npmの公式サイトはhttps://www.npmjs.com/です

NPM

ステップ1 *-サイトの「Get Started with npm」セクションに移動します。

はじめに

ステップ2 *-次の画面で、オペレーティングシステムに応じて、ダウンロードするインストーラーを選択します。この演習では、Windows 64ビットバージョンをダウンロードします。

インストーラーの選択

ステップ3 *-インストーラーを起動します。初期画面で、「次へ」ボタンをクリックします。

起動

ステップ4 *-次の画面で、使用許諾契約に同意し、次のボタンをクリックします。

同意する

ステップ5 *-次の画面で、インストール先のフォルダーを選択し、[次へ]ボタンをクリックします。

接続先フォルダー

ステップ6 *-次の画面でコンポーネントを選択し、[次へ]ボタンをクリックします。デフォルトのインストールのすべてのコンポーネントを受け入れることができます。

デフォルトのインストール

ステップ7 *-次の画面で、[インストール]ボタンをクリックします。

インストールをクリック

ステップ8 *-インストールが完了したら、[完了]ボタンをクリックします。

完了ボタン

ステップ9 *-インストールを確認するために、コマンドプロンプトでコマンドnpm versionを発行できます。次のスクリーンショットに示すように、npmのバージョン番号を取得します。

スクリーンショット

Visual Studio Codeのインストール

Visual Studio Codeの機能は次のとおりです-

Visual Studioの実際のバージョンと比較した場合の軽量エディター。
Clojure、Java、Objective-C、および他の多くの言語などのコーディング言語に使用できます。
組み込みのGit拡張機能。
組み込みのIntelliSense機能。
開発のためのさらに多くの拡張。

Visual Studioコードの公式サイトはhttps://code.visualstudio.com/です

VisualStudio

ステップ1 *-ダウンロードが完了したら、インストール手順に従ってください。初期画面で、「次へ」ボタンをクリックします。

初期画面

ステップ2 *-次の画面で、使用許諾契約に同意し、[次へ]ボタンをクリックします。

ステップ3 *-次の画面で、インストール先の場所を選択し、[次へ]ボタンをクリックします。

目的地の場所

ステップ4 *-プログラムショートカットの名前を選択し、[次へ]ボタンをクリックします。

プログラムのショートカット

ステップ5 *-デフォルト設定を受け入れて、[次へ]ボタンをクリックします。

デフォルト設定

ステップ6 *-次の画面で[インストール]ボタンをクリックします。

セットアップ

ステップ7 *-最後の画面で、[完了]ボタンをクリックしてVisual Studio Codeを起動します。

最終画面

Gitのインストール

Gitの主要な機能の一部は次のとおりです-

コードの簡単な分岐とマージ。
Git内のコードのフローに多くのテクニックを使用するためのプロビジョニング。
Gitは、他のSCMツールと比較すると非常に高速です。
より優れたデータ保証を提供します。
フリーでオープンソース

Gitの公式サイトはhttps://git-scm.com/です

Git

ステップ1 *-ダウンロードが完了したら、インストール手順に従ってください。初期画面で、「次へ」ボタンをクリックします。

GNUライセンス

ステップ2 *-インストールする必要があるコンポーネントを選択します。デフォルトのコンポーネントを受け入れることができます。

デフォルトのコンポーネント

ステップ3 *-次のステップで、プログラムのショートカット名を選択し、[次へ]ボタンをクリックします。

GITショートカット

ステップ4 *-デフォルトのSSH実行可能ファイルを受け入れて、[次へ]ボタンをクリックします。

デフォルトSSH

ステップ5 *-「Windowsスタイルのチェックアウト、Unixスタイルの終了のコミット」のデフォルト設定を受け入れ、「次へ」ボタンをクリックします。

デフォルト設定

ステップ6 *-次に、ターミナルエミュレータのデフォルト設定を受け入れて、[次へ]ボタンをクリックします。

ターミナル

ステップ7 *-デフォルト設定を受け入れ、[次へ]ボタンをクリックします。

デフォルト設定を受け入れる

ステップ8 *-実験オプションをスキップして、[インストール]ボタンをクリックできます。

実験オプション

ステップ9 *-最後の画面で、[完了]ボタンをクリックしてインストールを完了します。

完全なインストールプロセス

Angular 2-Hello World

最初のAngular JSアプリケーションを開始するには、さまざまな方法があります。

1つの方法は、最初からすべてを実行することです。これは最も難しく、推奨される方法ではありません。多くの依存関係があるため、この設定を取得することは困難になります。
もう1つの方法は、Angular Githubのクイックスタートを使用することです。これには、開始に必要なコードが含まれています。これは通常、すべての開発者が選択するものであり、Hello Worldアプリケーションに対して表示するものです。
最後の方法は、Angular CLIを使用することです。これについては、別の章で詳しく説明します。

以下は、githubを介してサンプルアプリケーションを起動して実行する手順です。

ステップ1 *-githubのURLにアクセス-https://github.com/angular/quickstart

github

ステップ2 *-コマンドプロンプトに移動して、プロジェクトディレクトリを作成します。これは空のディレクトリにすることができます。この例では、Projectというディレクトリを作成しました。

ステップ3 *-次に、コマンドプロンプトでこのディレクトリに移動し、次のコマンドを発行して、ローカルシステムのgithubリポジトリを複製します。これを行うには、次のコマンドを発行します-

git clone https://github.com/angular/quickstart Demo

クイックスタート

これにより、ローカルマシンにサンプルのAngular JSアプリケーションが作成されます。

ステップ4 *-Visual Studioコードでコードを開きます。

コードを開く

ステップ5 *-コマンドプロンプトに移動し、プロジェクトフォルダーで再度次のコマンドを発行します-

npm install

これにより、Angular JSアプリケーションが動作するために必要なすべてのパッケージがインストールされます。

NPMインストール

完了すると、すべての依存関係がインストールされたツリー構造が表示されます。

ツリー構造

ステップ6 *-フォルダーDemo→src→app→app.component.tsに移動します。コードの次の行を見つけます-

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

@Component ({
   selector: 'my-app',
   template: `<h1>Hello {{name}}</h1>`,
})
export class AppComponent  { name = 'Angular'; }

次に示すように、AngularキーワードをWorldに置き換えます-

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

@Component ({
   selector: 'my-app',
   template: `<h1>Hello {{name}}</h1>`,
})
export class AppComponent  { name = 'World'; }

Angular 2アプリケーションのプロジェクト作成の一部として作成される他のファイルがあります。現時点では、これらはすべてAngular 2アプリケーションの一部として含まれており、Hello Worldアプリケーション用に変更する必要がないため、他のコードファイルを気にする必要はありません。

これらのファイルについては、後続の章で詳しく説明します。

注-Visual Studio Codeは、すべてのファイルを自動的にコンパイルし、すべてのtypescriptファイルのJavaScriptファイルを作成します。

ステップ7 *-コマンドプロンプトに移動して、npm startコマンドを発行します。これにより、ノードパッケージマネージャーはライトWebサーバーを起動し、Angularアプリケーションを起動します。

Angular Application

Lite Server

Angular JSアプリケーションがブラウザで起動し、次のスクリーンショットに示すように、ブラウザに「Hello World」が表示されます。

Hello World

展開

このトピックは、上記のHello worldアプリケーションの展開に焦点を当てています。これはAngular JSアプリケーションであるため、任意のプラットフォームにデプロイできます。開発はどのプラットフォームでも可能です。

この場合、WindowsでVisual Studioコードを使用します。次に、2つの展開オプションを見てみましょう。

Windows上のNGNIXサーバーでの展開

任意のプラットフォームで任意のWebサーバーを使用して、Angular JSアプリケーションをホストできることに注意してください。この場合、人気のあるWebサーバーであるNGNIXの例を取り上げます。

ステップ1 *-次のURLからNGNIX Webサーバーをダウンロードしますhttps://nginx.org/en/downloadl[http://nginx.org/en/downloadl]

nginx

ステップ2 *-ダウンロードしたzipファイルを抽出した後、nginx exeコンポーネントを実行して、Webサーバーをバックグラウンドで実行します。その後、URLのホームページにアクセスできます- *http：//localhost

ダウンロード

ステップ3 *-WindowsエクスプローラーでAngular JSプロジェクトフォルダーに移動します。

ステップ4 *-プロジェクト→デモ→node-modulesフォルダーをコピーします。

デモ

ステップ5 *-プロジェクト→デモ→srcフォルダーからすべてのコンテンツをコピーします。

Src Folder

ステップ6 *-すべてのコンテンツをnginx/htmlフォルダーにコピーします。

HTMLフォルダー

次のURLに移動します- http：//localhost 、次のスクリーンショットに示すように、実際にhello worldアプリケーションが表示されます。

Hello Worldアプリケーション

Ubuntuでのセットアップ

次に、同じhello worldアプリケーションをUbuntuサーバーにホストする方法を見てみましょう。

ステップ1 *-Ubuntuサーバーで次のコマンドを発行して、nginxをインストールします。

apt-get update

上記のコマンドは、システム上のすべてのパッケージが最新であることを確認します。

Ubuntuでのnginxの展開

注-任意のプラットフォームで任意のWebサーバーを使用して、Angular JSアプリケーションをホストできます。この場合、人気のあるWebサーバーであるNGNIXの例を取り上げます。

ステップ1 *-Ubuntuサーバーで次のコマンドを発行して、nginxをWebサーバーとしてインストールします。

sudo apt-get update

このコマンドは、システム上のすべてのパッケージが最新であることを確認します。

Command Ensure

完了したら、システムは最新の状態になっているはずです。

一度完了

ステップ2 *-次のコマンドを発行して、 *nginx をインストールします。

apt-get install nginx

nginxのインストール

完了すると、nginxはバックグラウンドで実行されます。

背景

ステップ3 *-次のコマンドを実行して、 *nginx サービスが実行されていることを確認します。

ps –ef | grep nginx

nginxサービス

現在、デフォルトでは、nginxのファイルは/var/www/htmlフォルダーに保存されます。したがって、Hello Worldファイルをこの場所にコピーするために必要な許可を与えてください。

ステップ4 *-次のコマンドを発行します。

sudo chmod 777/var/www/html

発行コマンド

ステップ5 *-任意の方法を使用してファイルをコピーし、プロジェクトファイルを/var/www/htmlフォルダーにコピーします。

メソッド

ここで、URLを参照すると-* http：//192.168.1.200/indexl*で、Hello world Angular JSアプリケーションが見つかります。

リンク

Angular 2-モジュール

モジュールは、アプリケーションに論理境界を設定するためにAngular JSで使用されます。したがって、すべてを1つのアプリケーションにコーディングする代わりに、すべてを個別のモジュールにビルドして、アプリケーションの機能を分離することができます。デモアプリケーションに追加されるコードを調べてみましょう。

Visual Studioコードで、アプリフォルダーのapp.module.tsフォルダーに移動します。これは、ルートモジュールクラスと呼ばれます。

ルートモジュールクラス

次のコードが app.module.ts ファイルに存在します。

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent }  from './app.component';

@NgModule ({
   imports:      [ BrowserModule ],
   declarations: [ AppComponent ],
   bootstrap:    [ AppComponent ]
})
export class AppModule { }

コードの各行を詳しく見ていきましょう。

importステートメントは、既存のモジュールから機能をインポートするために使用されます。したがって、最初の3つのステートメントを使用して、NgModule、BrowserModule、およびAppComponentモジュールをこのモジュールにインポートします。
NgModuleデコレータは、インポート、宣言、およびブートストラップオプションを後で定義するために使用されます。
BrowserModuleは、Webベースの角度アプリケーションの場合、デフォルトで必要です。
ブートストラップオプションは、アプリケーションでブートストラップするコンポーネントをAngularに指示します。

モジュールは、次の部分で構成されています-

Bootstrap array -これは、アプリケーションでその機能にアクセスできるように、どのコンポーネントをロードする必要があるかをAngular JSに伝えるために使用されます。ブートストラップ配列にコンポーネントを含めたら、それらを宣言して、Angular JSアプリケーションの他のコンポーネントで使用できるようにする必要があります。
Export array -これは、他のモジュールで使用できるコンポーネント、ディレクティブ、およびパイプをエクスポートするために使用されます。
インポート配列-エクスポート配列と同様に、インポート配列を使用して他のAngular JSモジュールから機能をインポートできます。

Angular 2-アーキテクチャ

次のスクリーンショットは、Angular 2アプリケーションの構造を示しています。各アプリケーションはコンポーネントで構成されています。各コンポーネントは、アプリケーションの機能の論理的な境界です。コンポーネント間で機能を共有するために使用される階層化サービスが必要です。

解剖学

以下はコンポーネントの構造です。コンポーネントはで構成されています-

クラス-これは、プロパティとメソッドで構成されるC ++またはJavaクラスのようなものです。
*メタデータ-これは、クラスを装飾し、クラスの機能を拡張するために使用されます。
テンプレート-これは、アプリケーションに表示されるHTMLビューを定義するために使用されます。

コンポーネント

以下はコンポーネントの例です。

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

@Component ({
   selector: 'my-app',
   templateUrl: 'app/app.componentl'
})

export class AppComponent {
   appTitle: string = 'Welcome';
}

各アプリケーションはモジュールで構成されています。各Angular 2アプリケーションには、1つのAngular Root Moduleが必要です。各Angular Rootモジュールは、機能を分離するために複数のコンポーネントを持つことができます。

機能

以下はルートモジュールの例です。

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent }  from './app.component';

@NgModule ({
   imports:      [ BrowserModule ],
   declarations: [ AppComponent ],
   bootstrap:    [ AppComponent ]
})
export class AppModule { }

各アプリケーションは機能モジュールで構成され、各モジュールにはアプリケーションの個別の機能があります。各Angular機能モジュールには、機能を分離するための複数のコンポーネントを含めることができます。

各アプリケーション

Angular 2-コンポーネント

コンポーネントは、Angular JSアプリケーションの論理的なコードです。コンポーネントは以下で構成されます-

テンプレート-これは、アプリケーションのビューをレンダリングするために使用されます。これには、アプリケーションでレンダリングする必要があるHTMLが含まれます。この部分には、バインディングとディレクティブも含まれます。
クラス-これはCなどの言語で定義されたクラスのようなものです。これにはプロパティとメソッドが含まれます。これには、ビューをサポートするために使用されるコードが含まれています。 TypeScriptで定義されています。
Metadata -これには、Angularクラス用に定義された追加データがあります。デコレータで定義されます。

app.component.tsファイルに移動して、最初のAngularコンポーネントを作成しましょう。

最初の角度コンポーネント

次のコードをファイルに追加して、各側面を詳細に見てみましょう。

クラス

クラスデコレータ。クラスはTypeScriptで定義されています。このクラスは通常、TypeScriptで次の構文を持ちます。

構文

class classname {
   Propertyname: PropertyType = Value
}

パラメーター

クラス名-これはクラスに与えられる名前です。
Propertyname -これは、プロパティに与えられる名前です。
PropertyType -TypeScriptは厳密に型指定されているため、プロパティに型を指定する必要があります。
値-これはプロパティに与えられる値です。

例

export class AppComponent {
   appTitle: string = 'Welcome';
}

例では、次のことに注意する必要があります-

AppComponentというクラスを定義しています。
exportキーワードは、Angular JSアプリケーションの他のモジュールでコンポーネントを使用できるようにするために使用されます。
appTitleはプロパティの名前です。
プロパティには文字列のタイプが与えられます。
プロパティには「ようこそ」という値が与えられます。

テンプレート

これは、アプリケーションでレンダリングする必要があるビューです。

構文

Template: '
   <HTML code>
   class properties

パラメーター

* HTMLコード*-これは、アプリケーションでレンダリングする必要があるHTMLコードです。
クラスのプロパティ-これらは、テンプレートで参照できるクラスのプロパティです。

例

template: '
   <div>
      <h1>{{appTitle}}</h1>
      <div>To Tutorials Point</div>
   </div>

例では、次のことに注意する必要があります-

アプリケーションでレンダリングされるHTMLコードを定義しています
また、クラスからappTitleプロパティを参照しています。

メタデータ

これは、Angular JSクラスを追加情報で装飾するために使用されます。

クラス、テンプレート、メタデータで完成したコードを見てみましょう。

例

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

@Component ({
   selector: 'my-app',
   template: ` <div>
      <h1>{{appTitle}}</h1>
      <div>To Tutorials Point</div>
   </div> `,
})

export class AppComponent {
   appTitle: string = 'Welcome';
}

上記の例では、次のことに注意する必要があります-

importキーワードを使用して、角度/コアモジュールから「コンポーネント」デコレータをインポートします。
次に、デコレータを使用してコンポーネントを定義します。
コンポーネントには「my-app」というセレクターがあります。これは、メインhtmlページで使用できるカスタムhtmlタグに他なりません。

次に、コード内のインデックスファイルに移動します。

デモアプリ

bodyタグに、コンポーネント内のカスタムタグへの参照が含まれるようになりました。したがって、上記の場合、bodyタグに次のコードが含まれていることを確認する必要があります-

<body>
   <my-app></my-app>
</body>

出力

ブラウザに移動して出力を確認すると、出力がコンポーネントにそのまま表示されていることがわかります。

出力

Angular 2-テンプレート

コンポーネントの章で、次のテンプレートの例をすでに見ました。

template: '
   <div>
      <h1>{{appTitle}}</h1>
      <div>To Tutorials Point</div>
   </div>

これは「インラインテンプレート」と呼ばれます。テンプレートを定義する他の方法があり、それはtemplateURLコマンドを介して実行できます。コンポーネントでこれを使用する最も簡単な方法は次のとおりです。

構文

templateURL:
viewname.componentl

パラメーター

viewname -これはアプリコンポーネントモジュールの名前です。

ビュー名の後、コンポーネントをファイル名に追加する必要があります。

インラインテンプレートを定義する手順は次のとおりです。

ステップ1 *-app.componentlというファイルを作成します。これには、ビューのhtmlコードが含まれます。

アプリコンポーネント

ステップ2 *-上記で作成したファイルに次のコードを追加します。

<div>{{appTitle}} finddevguides </div>

これは単純なdivタグを定義し、app.componentクラスのappTitleプロパティを参照します。

ステップ3 *-app.component.tsファイルに、次のコードを追加します。

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

@Component ({
   selector: 'my-app',
   templateUrl: 'app/app.componentl'
})

export class AppComponent {
   appTitle: string = 'Welcome';
}

上記のコードから、注目できる唯一の変更は、appフォルダーにあるapp.componentlファイルへのリンクを提供するtemplateURLからの変更です。

ステップ4 *-ブラウザでコードを実行すると、次の出力が得られます。

コードを実行

出力から、テンプレートファイル（app.componentl）ファイルがそれに応じて呼び出されていることがわかります。

Angular 2-ディレクティブ

ディレクティブ*は、HTMLの機能を拡張するために使用されるカスタムHTML要素です。 Angular 2には、BrowserModuleモジュールの一部として呼び出される以下のディレクティブがあります。

ngif
ngFor

app.module.tsファイルを表示すると、次のコードとBrowserModuleモジュールが定義されていることがわかります。このモジュールを定義すると、2つのディレクティブにアクセスできます。

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent }  from './app.component';

@NgModule ({
   imports:      [ BrowserModule ],
   declarations: [ AppComponent ],
   bootstrap:    [ AppComponent ]
})
export class AppModule { }

それでは、各ディレクティブを詳しく見ていきましょう。

ngIf

*ngif* 要素は、trueと評価された場合にHTMLコードに要素を追加するために使用されます。そうでない場合、要素はHTMLコードに追加されません。

構文

*ngIf = 'expression'

式がtrueと評価された場合、対応する要素が追加されます。それ以外の場合、要素は追加されません。

ここで、* ngifディレクティブを使用する方法の例を見てみましょう。

ステップ1 *-最初にappStatusという名前のクラスにプロパティを追加します。これはブール型になります。この値をtrueのままにします。

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

@Component ({
   selector: 'my-app',
   templateUrl: 'app/app.componentl'
})

export class AppComponent {
   appTitle: string = 'Welcome';
   appStatus: boolean = true;
}

ステップ2 *-app.componentlファイルに次のコードを追加します。

<div *ngIf = 'appStatus'>{{appTitle}} finddevguides </div>

上記のコードには、* ngIfディレクティブがあります。ディレクティブでは、appStatusプロパティの値を評価しています。プロパティの値はtrueと評価される必要があるため、divタグがブラウザに表示される必要があります。

上記のコードを追加すると、ブラウザに次の出力が表示されます。

出力

ngIf

ngFor

*ngFor* 要素は、Forループの条件に基づいて要素に使用されます。

構文

*ngFor = 'let variable of variablelist'

変数は、 variablelist の値を表示する一時変数です。

ここで、* ngForディレクティブを使用する方法の例を見てみましょう。

ステップ1 *-最初にappListという名前のクラスにプロパティを追加します。これは、任意のタイプの配列を定義するために使用できるタイプになります。

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

@Component ({
   selector: 'my-app',
   templateUrl: 'app/app.componentl'
})

export class AppComponent {
   appTitle: string = 'Welcome';
   appList: any[] = [ {
      "ID": "1",
      "Name" : "One"
   },

   {
      "ID": "2",
      "Name" : "Two"
   } ];
}

したがって、appListを2つの要素を持つ配列として定義しています。各要素には、IDと名前として2つのサブプロパティがあります。

ステップ2 *-app.componentlで、次のコードを定義します。

<div *ngFor = 'let lst of appList'>
   <ul>
      <li>{{lst.ID}}</li>
      <li>{{lst.Name}}</li>
   </ul>
</div>

上記のコードでは、ngForディレクティブを使用してappList配列を反復処理しています。次に、各リスト項目が配列のIDおよび名前パラメーターであるリストを定義します。

上記のコードを追加すると、ブラウザに次の出力が表示されます。

出力

ngFor

Angular 2-メタデータ

メタデータを使用してクラスを修飾し、クラスの予想される動作を構成できるようにします。以下は、メタデータのさまざまな部分です。

注釈-これらはクラスレベルのデコレータです。これは配列であり、@ Componentデコレータと@Routesデコレータの両方を持つ例です。

以下は、app.component.tsファイルにあるサンプルコードです。

@Component ({
   selector: 'my-app',
   templateUrl: 'app/app.componentl'
})

コンポーネントデコレータは、app.component.tsファイル内のクラスをコンポーネントとして宣言するために使用されます。

Design：paramtypes -これらはコンストラクタにのみ使用され、Typescriptにのみ適用されます。
propMetadata -これはクラスのプロパティに適用されるメタデータです。

以下はコード例です。

export class AppComponent {
   @Environment(‘test’)
   appTitle: string = 'Welcome';
}

ここで、@ EnvironmentはプロパティappTitleに適用されるメタデータであり、指定された値は「test」です。

パラメータ-これは、コンストラクタレベルでデコレータによって設定されます。

以下はコード例です。

export class AppComponent {
   constructor(@Environment(‘test’ private appTitle:string) { }
}

上記の例では、メタデータはコンストラクターのパラメーターに適用されます。

Angular 2-データバインディング

双方向バインディングは、Angular JSの機能でしたが、Angular 2.x以降では削除されました。しかし、Angular 2のクラスのイベント以来、AngularJSクラスのプロパティにバインドできます。

クラス名を持つクラスと、タイプと値を持つプロパティがあるとします。

export class className {
   property: propertytype = value;
}

その後、htmlタグのプロパティをクラスのプロパティにバインドできます。

<html tag htmlproperty = 'property'>

プロパティの値は、htmlのhtmlプロパティに割り当てられます。

データバインディングを実現する方法の例を見てみましょう。この例では、クラスのプロパティから画像ソースが取得される画像の表示を見ていきます。これを実現する手順は次のとおりです。

ステップ1 *-2つの画像をダウンロードします。この例では、以下に示すいくつかの簡単な画像をダウンロードします。

画像のダウンロード

ステップ2 *-これらの画像をappディレクトリの *Images というフォルダーに保存します。 imagesフォルダーが存在しない場合は、作成してください。

ステップ3 *-以下に示すように、app.component.tsに次のコンテンツを追加します。

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

@Component ({
   selector: 'my-app',
   templateUrl: 'app/app.componentl'
})

export class AppComponent {
   appTitle: string = 'Welcome';
   appList: any[] = [ {
      "ID": "1",
      "url": 'app/Images/One.jpg'
   },

   {
      "ID": "2",
      "url": 'app/Images/Two.jpg'
   } ];
}

ステップ4 *-以下に示すように、app.componentlに次のコンテンツを追加します。

<div *ngFor = 'let lst of appList'>
   <ul>
      <li>{{lst.ID}}</li>
      <img [src] = 'lst.url'>
   </ul>
</div>

上記のapp.componentlファイルでは、クラスのプロパティから画像にアクセスしています。

出力

上記のプログラムの出力は次のようになります-

データバインディング

Angular 2-HTTPを使用したCRUD操作

この章で説明する基本的なCRUD操作は、Angular 2を使用したWebサービスからのデータの読み取りです。

例

この例では、製品の単純な json ファイルであるデータソースを定義します。次に、 json ファイルからデータを読み取るために使用されるサービスを定義します。次に、メインのapp.component.tsファイルでこのサービスを使用します。

ステップ1 *-まず、Visual Studioコードでproduct.jsonファイルを定義しましょう。

製品サービス

products.jsonファイルに、次のテキストを入力します。これは、Angular JSアプリケーションから取得されるデータになります。

[{
   "ProductID": 1,
   "ProductName": "ProductA"
},

{
   "ProductID": 2,
   "ProductName": "ProductB"
}]

ステップ2 *-products.jsonファイルからの情報を保存するためのクラス定義となるインターフェースを定義します。 products.tsというファイルを作成します。

製品

ステップ3 *-ファイルに次のコードを挿入します。

export interface IProduct {
   ProductID: number;
   ProductName: string;
}

上記のインターフェイスには、インターフェイスのプロパティとしてProductIDとProductNameの定義があります。

ステップ4 *-app.module.tsファイルに次のコードを含めます-

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent }  from './app.component';
import { HttpModule } from '@angular/http';

@NgModule ({
   imports:      [ BrowserModule,HttpModule],
   declarations: [ AppComponent],
   bootstrap:    [ AppComponent ]
})
export class AppModule { }

ステップ5 *-Visual Studioコードでproducts.service.tsファイルを定義する

製品の定義

ステップ6 *-次のコードをファイルに挿入します。

import { Injectable } from '@angular/core';
import { Http , Response } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/do';
import { IProduct } from './product';

@Injectable()
export class ProductService {
   private _producturl='app/products.json';
   constructor(private _http: Http){}

   getproducts(): Observable<IProduct[]> {
      return this._http.get(this._producturl)
      .map((response: Response) => <IProduct[]> response.json())
      .do(data => console.log(JSON.stringify(data)));
   }
}

上記のプログラムについて、次の点に注意する必要があります。

「@ angular/http」ステートメントからのインポート\ {Http、Response}を使用して、https関数を使用してproducts.jsonファイルからデータを取得できるようにします。
Observable変数を作成するために使用できるReactiveフレームワークを使用するには、次のステートメントを使用します。 Observableフレームワークを使用して、http応答の変更を検出し、メインアプリケーションに送り返すことができます。

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/do';

クラスのステートメントprivate _producturl = 'app/products.json’は、データソースの場所を指定するために使用されます。必要に応じて、Webサービスの場所を指定することもできます。
次に、データソースから応答を取得するために使用されるHttp型の変数を定義します。
データソースからデータを取得したら、JSON.stringify（data）コマンドを使用して、ブラウザーのコンソールにデータを送信します。

ステップ7 *-app.component.tsファイルに次のコードを配置します。

import { Component } from '@angular/core';
import { IProduct } from './product';
import { ProductService } from './products.service';
import { appService } from './app.service';
import { Http , Response } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';

@Component ({
   selector: 'my-app',
   template: '<div>Hello</div>',
   providers: [ProductService]
})

export   class   AppComponent  {
   iproducts: IProduct[];
   constructor(private _product: ProductService) {
   }

   ngOnInit() : void {
      this._product.getproducts()
      .subscribe(iproducts => this.iproducts = iproducts);
   }
}

ここで、コードの主なものは、データソースからのデータをリッスンするためにObservable getproducts（）関数をリッスンするために使用されるサブスクライブオプションです。

すべてのコードを保存し、 npm を使用してアプリケーションを実行します。ブラウザに移動すると、次の出力が表示されます。

Using npm

コンソールには、products.jsonファイルから取得されたデータが表示されます。

Angular 2-エラー処理

Angular 2アプリケーションには、エラー処理のオプションがあります。これは、ReactJS catchライブラリを含めてから、catch関数を使用することにより行われます。

エラー処理に必要なコードを見てみましょう。このコードは、httpを使用したCRUD操作の章の先頭に追加できます。

product.service.tsファイルでは、次のコードを入力してください-

import { Injectable } from '@angular/core';
import { Http , Response } from '@angular/http';
import { Observable } from 'rxjs/Observable';

import 'rxjs/add/operator/map';
import 'rxjs/add/operator/do';
import 'rxjs/add/operator/catch';
import { IProduct } from './product';

@Injectable()
export class ProductService {
   private _producturl = 'app/products.json';
   constructor(private _http: Http){}

   getproducts(): Observable<IProduct[]> {
      return this._http.get(this._producturl)
      .map((response: Response) => <IProduct[]> response.json())
      .do(data => console.log(JSON.stringify(data)))
      .catch(this.handleError);
   }

   private handleError(error: Response) {
      console.error(error);
      return Observable.throw(error.json().error());
   }
}

catch関数には、エラーハンドラー関数へのリンクが含まれています。
エラーハンドラー関数では、コンソールにエラーを送信します。実行を継続できるように、メインプログラムにもエラーをスローします。

これで、エラーが発生するたびに、ブラウザのエラーコンソールにリダイレクトされます。

Angular 2-ルーティング

ルーティングは、メインページで選択したオプションに基づいて、ユーザーを異なるページに誘導するのに役立ちます。したがって、選択したオプションに基づいて、必要な角度コンポーネントがユーザーにレンダリングされます。

Angular 2アプリケーションでルーティングを実装する方法を確認するために必要な手順を見てみましょう。

ステップ1 *-基本参照タグをindexlファイルに追加します。

<!DOCTYPE html>
<html>
   <head>
      <base href = "/">
      <title>Angular QuickStart</title>
      <meta charset = "UTF-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">

      <base href = "/">
      <link rel = "stylesheet" href = "styles.css">

      <!-- 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/systemjs/dist/system.src.js"></script>
      <script src = "systemjs.config.js"></script>

      <script>
         System.import('main.js').catch(function(err){ console.error(err); });
      </script>
   </head>

   <body>
      <my-app></my-app>
   </body>
</html>

ステップ2 *-アプリケーションの2つのルートを作成します。このため、 *Inventory.component.ts および product.component.ts という2つのファイルを作成します

エディターを開く

ステップ3 *-次のコードをproduct.component.tsファイルに配置します。

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

@Component ({
   selector: 'my-app',
   template: 'Products',
})
export   class   Appproduct  {
}

ステップ4 *-Inventory.component.tsファイルに次のコードを配置します。

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

@Component ({
   selector: 'my-app',
   template: 'Inventory',
})
export class AppInventory  {
}

どちらのコンポーネントも派手なことは何もせず、コンポーネントに基づいてキーワードをレンダリングするだけです。そのため、Inventoryコンポーネントの場合、Inventoryキーワードがユーザーに表示されます。また、製品コンポーネントの場合、製品キーワードがユーザーに表示されます。

ステップ5 *-app.module.tsファイルで、次のコードを追加します-

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent }  from './app.component';
import { Appproduct } from './product.component';
import { AppInventory } from './Inventory.component';
import { RouterModule, Routes } from '@angular/router';

const appRoutes: Routes = [
   { path: 'Product', component: Appproduct },
   { path: 'Inventory', component: AppInventory },
];

@NgModule ({
   imports: [ BrowserModule,
   RouterModule.forRoot(appRoutes)],
   declarations: [ AppComponent,Appproduct,AppInventory],
   bootstrap: [ AppComponent ]
})
export class AppModule { }

上記のプログラムについて、次の点に注意する必要があります-

appRoutesには2つのルートが含まれます。1つはAppproductコンポーネントで、もう1つはAppInventoryコンポーネントです。
両方のコンポーネントを宣言してください。
RouterModule.forRootは、アプリケーションへのルートを確実に追加します。

ステップ6 *-app.component.tsファイルに、次のコードを追加します。

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

@Component ({
   selector: 'my-app',
   template: `
   <ul>
      <li><a [routerLink] = "['/Product']">Product</a></li>
      <li><a [routerLink] = "['/Inventory']">Inventory</a></li>
   </ul>
   <router-outlet></router-outlet>`
})
export class AppComponent  { }

上記のプログラムについて、次の点に注意する必要があります-

<router-outlet> </router-outlet>は、ユーザーが選択したオプションに基づいてコンポーネントをレンダリングするプレースホルダーです。

ここで、すべてのコードを保存し、npmを使用してアプリケーションを実行します。ブラウザに移動すると、次の出力が表示されます。

製品

[インベントリ]リンクをクリックすると、次の出力が表示されます。

在庫

エラールートの追加

ルーティングでは、エラールートを追加することもできます。これは、ユーザーがアプリケーションに存在しないページに移動した場合に発生する可能性があります。

これを実装する方法を見てみましょう。

ステップ1 *-以下に示すように、NotFound.component.tsとしてPageNotFoundコンポーネントを追加します-

NotFound

ステップ2 *-新しいファイルに次のコードを追加します。

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

@Component ({
   selector: 'my-app',
   template: 'Not Found',
})
export class PageNotFoundComponent {
}

ステップ3 *-次のコードをapp.module.tsファイルに追加します。

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { Appproduct } from './product.component'
import { AppInventory } from  './Inventory.component'
import { PageNotFoundComponent } from  './NotFound.component'
import { RouterModule, Routes } from '@angular/router';

const appRoutes: Routes = [
   { path: 'Product', component: Appproduct },
   { path: 'Inventory', component: AppInventory },
   { path: '**', component: PageNotFoundComponent }
];

@NgModule ({
   imports: [ BrowserModule,
   RouterModule.forRoot(appRoutes)],
   declarations: [ AppComponent,Appproduct,AppInventory,PageNotFoundComponent],
   bootstrap: [ AppComponent ]
})

export class AppModule {
}

上記のプログラムについて、次の点に注意する必要があります-

これで、パス： 、コンポーネント：PageNotFoundComponentという追加のルートができました。したがって、は、デフォルトルートに適合しないルート用です。これらはPageNotFoundComponentコンポーネントに送られます。

ここで、すべてのコードを保存し、npmを使用してアプリケーションを実行します。ブラウザに移動すると、次の出力が表示されます。これで、間違ったリンクに移動すると、次の出力が得られます。

PageNotFound

Angular 2-ナビゲーション

Angular 2では、手動ナビゲーションを実行することもできます。手順は次のとおりです。

ステップ1 *-次のコードをInventory.component.tsファイルに追加します。

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

@Component ({
   selector: 'my-app',
   template: 'Inventory
   <a class = "button" (click) = "onBack()">Back to Products</a>'
})

export class AppInventory {
   constructor(private _router: Router){}

   onBack(): void {
      this._router.navigate(['/Product']);
   }
}

上記のプログラムについて、次の点に注意する必要があります-

クリックイベントにタグ付けされたonBack関数を持つHTMLタグを宣言します。したがって、ユーザーがこれをクリックすると、製品ページに戻ります。
onBack関数で、router.navigateを使用して必要なページに移動します。

ステップ2 *-次に、すべてのコードを保存し、npmを使用してアプリケーションを実行します。ブラウザに移動すると、次の出力が表示されます。

npmを使用したアプリケーション

ステップ3 *-[インベントリ]リンクをクリックします。

在庫リンク

ステップ4 *-[製品に戻る]リンクをクリックすると、次の出力が表示され、製品ページに戻ります。

製品に戻る

Angular 2-フォーム

Angular 2は、 ngModel ディレクティブを使用して双方向バインディングを使用できるフォームを設計することもできます。これを達成する方法を見てみましょう。

ステップ1 *-製品モデルであるモデルを作成します。 *products.ts ファイルというファイルを作成します。

Products.ts

ステップ2 *-ファイルに次のコードを配置します。

export class Product {
   constructor (
      public productid: number,
      public productname: string
   ) {  }
}

これは、productidとproductnameの2つのプロパティを持つ単純なクラスです。

ステップ3 *-product-form.component.tsコンポーネントと呼ばれる製品フォームコンポーネントを作成し、次のコードを追加します-

import { Component } from '@angular/core';
import { Product } from './products';

@Component ({
   selector: 'product-form',
   templateUrl: './product-form.componentl'
})

export class ProductFormComponent {
   model = new Product(1,'ProductA');
}

上記のプログラムについて、以下の点に注意する必要があります。

Productクラスのオブジェクトを作成し、productidとproductnameに値を追加します。
templateUrlを使用して、コンポーネントをレンダリングするproduct-form.componentlの場所を指定します。

ステップ4 *-実際のフォームを作成します。 product-form.componentlというファイルを作成し、次のコードを配置します。

<div class = "container">
   <h1>Product Form</h1>
   <form>
      <div class = "form-group">
         <label for = "productid">ID</label>
         <input type = "text" class = "form-control" id = "productid" required
            [(ngModel)] = "model.productid" name = "id">
      </div>

      <div class = "form-group">
         <label for = "name">Name</label>
         <input type = "text" class = "form-control" id = "name"
            [(ngModel)] = "model.productname" name = "name">
      </div>
   </form>
</div>

上記のプログラムについて、次の点に注意する必要があります。

ngModel ディレクティブは、製品のオブジェクトをフォーム上の個別の要素にバインドするために使用されます。

ステップ5 *-次のコードをapp.component.tsファイルに配置します。

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

@Component ({
   selector: 'my-app',
   template: '<product-form></product-form>'
})
export class AppComponent { }

ステップ6 *-app.module.tsファイルに以下のコードを配置します

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { FormsModule } from '@angular/forms';
import { ProductFormComponent } from './product-form.component';

@NgModule ({
   imports: [ BrowserModule,FormsModule],
   declarations: [ AppComponent,ProductFormComponent],
   bootstrap: [ AppComponent ]
})
export class AppModule { }

ステップ7 *-すべてのコードを保存し、npmを使用してアプリケーションを実行します。ブラウザに移動すると、次の出力が表示されます。

製品フォーム

角度2-CLI

コマンドラインインターフェイス（CLI）を使用して、Angular JSアプリケーションを作成できます。また、アプリケーションのユニットテストとエンドツーエンドテストの作成にも役立ちます。

Angular CLIの公式サイトはhttps://cli.angular.io/です

angular.io

[開始]オプションをクリックすると、CLI [[1]]

Angular.cli

次に、Angular CLIでできることのいくつかを見てみましょう。

CLIのインストール

注-Pythonがシステムにインストールされていることを確認してください。 Pythonは、サイトhttps://www.python.org/からダウンロードできます。

Python

最初のステップは、CLIをインストールすることです。私たちは次のコマンドでこれを行うことができます-

npm install –g angular-cli

次に、任意のディレクトリにangularCLIという名前の新しいフォルダーを作成し、上記のコマンドを発行します。

Angular.cli Directory

完了すると、CLIがインストールされます。

CLIインストール済み

プロジェクトを作成する

Angular JSプロジェクトは、次のコマンドを使用して作成できます。

構文

ng new Project_name

パラメーター

*Project_name* -これは作成する必要があるプロジェクトの名前です。

出力

無し。

例

次のコマンドを実行して、新しいプロジェクトを作成しましょう。

ng new demo2

ファイルが自動的に作成され、必要なnpmパッケージのダウンロードが開始されます。

npmパッケージ

これで、Visual Studioコードで、新しく作成したプロジェクトを開くことができます。

新しく作成されたプロジェクト

プロジェクトを実行する

プロジェクトを実行するには、次のコマンドを発行する必要があります-

ng server

ngサーバー

実行中のアプリケーションのデフォルトのポート番号は4200です。ポートを参照して、実行中のアプリケーションを確認できます。

APP Works

Angular 2-依存性注入

依存性注入は、実行時にコンポーネントの機能を追加する機能です。依存性注入を実装するために使用される例と手順を見てみましょう。

ステップ1 *-注入可能なデコレータを持つ別のクラスを作成します。注入可能なデコレータにより、このクラスの機能を任意のAngular JSモジュールで注入および使用できます。

@Injectable()
   export class classname {
}

ステップ2 *-次に、appComponentモジュールまたはサービスを使用するモジュールで、@ Componentデコレーターでプロバイダーとして定義する必要があります。

@Component ({
   providers : [classname]
})

これを達成する方法の例を見てみましょう。

ステップ1 *-app.service.tsというサービスの *ts ファイルを作成します。

Tsファイル

ステップ2 *-上記で作成したファイルに次のコードを配置します。

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

@Injectable()
export class appService {
   getApp(): string {
      return "Hello world";
   }
}

上記のプログラムについて、以下の点に注意する必要があります。

Injectableデコレータは、angular/coreモジュールからインポートされます。
Injectableデコレータで装飾されたappServiceというクラスを作成しています。
「Hello world」という単純な文字列を返すgetAppという単純な関数を作成しています。

ステップ3 *-app.component.tsファイルに次のコードを配置します。

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

import {
   appService
} from './app.service';

@Component({
   selector: 'my-app',
   template: '<div>{{value}}</div>',
   providers: [appService]
})

export class AppComponent {
   value: string = "";
   constructor(private _appService: appService) { }
   ngOnInit(): void {
      this.value = this._appService.getApp();
   }
}

上記のプログラムについて、以下の点に注意する必要があります。

まず、appComponentモジュールにappServiceモジュールをインポートします。
次に、このモジュールでサービスをプロバイダーとして登録します。
コンストラクターでは、appServiceモジュールの_appServiceという変数を定義して、appComponentモジュール内のどこからでも呼び出せるようにします。
例として、ngOnInitライフサイクルフックで、サービスのgetApp関数を呼び出し、出力をAppComponentクラスのvalueプロパティに割り当てました。

すべてのコード変更を保存し、ブラウザを更新すると、次の出力が得られます。

Hello World

Angular 2-高度な設定

この章では、Angular 2プロジェクトの一部である他の構成ファイルを見ていきます。

tsconfig.json

このファイルは、Angular JSプロジェクトに使用されるTypeScriptに関するオプションを提供するために使用されます。

{
   "compilerOptions": {
      "target": "es5",
      "module": "commonjs",
      "moduleResolution": "node",
      "sourceMap": true,
      "emitDecoratorMetadata": true,
      "experimentalDecorators": true,
      "lib": [ "es2015", "dom" ],
      "noImplicitAny": true,
      "suppressImplicitAnyIndexErrors": true
   }
}

上記のコードについて注意すべき重要な点を次に示します。

コンパイルのターゲットはes5です。これは、ほとんどのブラウザーがES5タイプスクリプトしか理解できないためです。
sourceMapオプションは、デバッグ時に役立つMapファイルを生成するために使用されます。したがって、開発中は、このオプションをtrueのままにしておくことをお勧めします。
「emitDecoratorMetadata」：trueおよび「experimentalDecorators」：trueは、Angular JSデコレーターに必要です。適切に配置されていない場合、Angular JSアプリケーションはコンパイルされません。

package.json

このファイルには、Angular 2プロジェクトに関する情報が含まれています。ファイルの一般的な設定は次のとおりです。

{
   "name": "angular-quickstart",
   "version": "1.0.0",
   "description": "QuickStart package.json from the documentation,
      supplemented with testing support",

   "scripts": {
      "build": "tsc -p src/",
      "build:watch": "tsc -p src/-w",
      "build:e2e": "tsc -p e2e/",
      "serve": "lite-server -c=bs-config.json",
      "serve:e2e": "lite-server -c=bs-config.e2e.json",
      "prestart": "npm run build",
      "start": "concurrently \"npm run build:watch\" \"npm run serve\"",
      "pree2e": "npm run build:e2e",
      "e2e": "concurrently \"npm run serve:e2e\" \"npm run protractor\"
         --killothers --success first",
      "preprotractor": "webdriver-manager update",
      "protractor": "protractor protractor.config.js",
      "pretest": "npm run build",
      "test": "concurrently \"npm run build:watch\" \"karma start karma.conf.js\"",
      "pretest:once": "npm run build",
      "test:once": "karma start karma.conf.js --single-run",
      "lint": "tslint ./src/**/*.ts -t verbose"
   },

   "keywords": [],
   "author": "",
   "license": "MIT",
   "dependencies": {
      "@angular/common": "~2.4.0",
      "@angular/compiler": "~2.4.0",
      "@angular/core": "~2.4.0",
      "@angular/forms": "~2.4.0",
      "@angular/http": "~2.4.0",
      "@angular/platform-browser": "~2.4.0",
      "@angular/platform-browser-dynamic": "~2.4.0",
      "@angular/router": "~3.4.0",
      "angular-in-memory-web-api": "~0.2.4",
      "systemjs": "0.19.40",
      "core-js": "^2.4.1",
      "rxjs": "5.0.1",
      "zone.js": "^0.7.4"
   },

   "devDependencies": {
      "concurrently": "^3.2.0",
      "lite-server": "^2.2.2",
      "typescript": "~2.0.10",
      "canonical-path": "0.0.2",
      "tslint": "^3.15.1",
      "lodash": "^4.16.4",
      "jasmine-core": "~2.4.1",
      "karma": "^1.3.0",
      "karma-chrome-launcher": "^2.0.0",
      "karma-cli": "^1.0.1",
      "karma-jasmine": "^1.0.2",
      "karma-jasmine-html-reporter": "^0.2.2",
      "protractor": "~4.0.14",
      "rimraf": "^2.5.4",
      "@types/node": "^6.0.46",
      "@types/jasmine": "2.5.36"
   },
   "repository": {}
}

上記のコードについて注意するいくつかのキーポイント-

依存関係には2つのタイプがあります。最初は依存関係で、次にdev依存関係があります。開発プロセスでは開発プロセスが必要になり、アプリケーションを実行するには開発プロセスが必要になります。
"build：watch"： "tsc -p src/-w"コマンドは、typescriptファイルの変更を探すことにより、バックグラウンドでtypescriptをコンパイルするために使用されます。

systemjs.config.json

このファイルには、Angular JSアプリケーションに必要なシステムファイルが含まれています。これにより、htmlページにスクリプトタグを追加する必要なく、必要なすべてのスクリプトファイルがロードされます。典型的なファイルには次のコードが含まれます。

/* *
* System configuration for Angular samples
 * Adjust as necessary for your application needs.
*/
(function (global) {
   System.config ({
      paths: {
        //paths serve as alias
         'npm:': 'node_modules/'
      },

     //map tells the System loader where to look for things
      map: {
        //our app is within the app folder
         app: 'app',

        //angular bundles
         '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
         '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
         '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
         '@angular/platform-browser': 'npm:@angular/platformbrowser/bundles/platform-browser.umd.js',
         '@angular/platform-browser-dynamic':
            'npm:@angular/platform-browserdynamic/bundles/platform-browser-dynamic.umd.js',
         '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
         '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
         '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',

        //other libraries
         'rxjs':  'npm:rxjs',
         'angular-in-memory-web-api':
            'npm:angular-in-memory-web-api/bundles/inmemory-web-api.umd.js'
      },

     //packages tells the System loader how to load when no filename
         and/or no extension
      packages: {
         app: {
            defaultExtension: 'js'
         },

         rxjs: {
            defaultExtension: 'js'
         }
      }

   });
})(this);

上記のコードについて注意するいくつかのキーポイント-

'npm：'： 'node_modules/'は、すべてのnpmモジュールが配置されているプロジェクト内の場所を示します。
app： 'app’のマッピングは、すべてのアプリケーションファイルが読み込まれるフォルダーを示します。

Angular 2-サードパーティコントロール

Angular 2では、サードパーティのコントロールを使用できます。あなたが実装するコントロールを決定したら、次の手順を実行する必要があります-

ステップ1 *-npmコマンドを使用してコンポーネントをインストールします。

たとえば、次のコマンドを使用して、ng2-paginationサードパーティコントロールをインストールします。

npm install ng2-pagination --save

ページネーション

完了すると、コンポーネントが正常にインストールされたことを確認できます。

インストール済みコンポーネント

ステップ2 *-app.module.tsファイルにコンポーネントを含めます。

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent }  from './app.component';
import {Ng2PaginationModule} from 'ng2-pagination';

@NgModule ({
   imports:      [ BrowserModule,Ng2PaginationModule],
   declarations: [ AppComponent],
   bootstrap:    [ AppComponent ]
})
export class AppModule { }

ステップ3 *-最後に、app.component.tsファイルにコンポーネントを実装します。

import { Component } from '@angular/core';
import {PaginatePipe, PaginationService} from 'ng2-pagination';

@Component ({
   selector: 'my-app',
   template: '
      <ul>
         <li *ngFor = "let item of collection | paginate: {
            itemsPerPage: 5, currentPage: p }"> ... </li>
      </ul>
      <pagination-controls (pageChange) = "p = $event"></pagination-controls>

})
export class AppComponent { }

ステップ4 *-すべてのコード変更を保存し、ブラウザを更新すると、次の出力が得られます。

コード変更

APPコード

上の図では、画像がOne.jpgおよびtwo.jpgとしてImagesフォルダーに保存されていることがわかります。

ステップ5 *-app.component.tsファイルのコードを次のように変更します。

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

@Component ({
   selector: 'my-app',
   templateUrl: 'app/app.componentl'
})

export class AppComponent {
   appTitle: string = 'Welcome';

   appList: any[] = [{
      "ID": "1",
      "Name": "One",
      "url": 'app/Images/One.jpg'
   },
   {
      "ID": "2",
      "Name": "Two",
      "url": 'app/Images/two.jpg'
   } ];
}

上記のコードについて、次の点に注意する必要があります。

any型のappListという配列を定義しています。これは、あらゆるタイプの要素を保存できるようにするためです。
2つの要素を定義しています。各要素には、ID、名前、およびURLの3つのプロパティがあります。
各要素のURLは、2つの画像への相対パスです。

ステップ6 *-テンプレートファイルであるapp/app.componentlファイルに次の変更を加えます。

<div *ngFor = 'let lst of appList'>
   <ul>
      <li>{{lst.ID}}</li>
      <li>{{lst.Name}}</li>
      <img [src] = 'lst.url'>
   </ul>
</div>

上記のプログラムについて次の点に注意する必要があります-

ngForディレクティブは、appListプロパティのすべての要素を反復処理するために使用されます。
各プロパティについて、リスト要素を使用して画像を表示しています。
imgタグのsrcプロパティは、クラスのappListのurlプロパティにバインドされます。

ステップ7 *-すべてのコード変更を保存し、ブラウザを更新すると、次の出力が得られます。出力から、画像が取得されて出力に表示されていることがはっきりとわかります。

ピックアップ済み

Angular 2-データ表示

Angular JSでは、クラスのプロパティの値をHTMLフォームで非常に簡単に表示できます。

例を見て、データ表示について詳しく理解しましょう。この例では、クラスのさまざまなプロパティの値をHTMLページに表示します。

ステップ1 *-app.component.tsファイルのコードを次のように変更します。

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

@Component ({
   selector: 'my-app',
   templateUrl: 'app/app.componentl'
})

export class AppComponent {
   TutorialName: string = 'Angular JS2';
   appList: string[] = ["Binding", "Display", "Services"];
}

上記のコードについて、次の点に注意する必要があります。

文字列型のappListという配列を定義しています。
Binding、Display、およびServicesである配列の一部として3つの文字列要素を定義しています。
また、Angular 2の値を持つTutorialNameというプロパティを定義しました。

ステップ2 *-テンプレートファイルであるapp/app.componentlファイルに次の変更を加えます。

<div>
   The name of this Tutorial is {{TutorialName}}<br>
   The first Topic is {{appList[0]}}<br>
   The second Topic is {{appList[1]}}<br>
   The third Topic is {{appList[2]}}<br>
</div>

上記のコードについて、次の点に注意する必要があります。

TutorialNameプロパティを参照して、「HTMLページでのチュートリアルの名前は何か」を伝えています。
配列の3つのトピックのそれぞれを表示するために、配列のインデックス値を使用しています。

ステップ3 *-すべてのコード変更を保存し、ブラウザを更新すると、以下の出力が得られます。出力から、クラスのプロパティの値に従ってデータが表示されていることがはっきりとわかります。

表示

その場でバインドする別の簡単な例は、入力htmlタグの使用です。データがhtmlタグに入力されると、データが表示されるだけです。

テンプレートファイルであるapp/app.componentlファイルに次の変更を加えます。

<div>
   <input [value] = "name" (input) = "name = $event.target.value">
   {{name}}
</div>

上記のコードについて、次の点に注意する必要があります。

[値] =”ユーザー名” -これは、式ユーザー名を入力要素の値プロパティにバインドするために使用されます。
*（input）=” expression” *-これは、入力要素の入力イベントに式をバインドする宣言的な方法です。
username = $ event.target.value -入力イベントが発生したときに実行される式。
$ event -イベントのペイロードの値を持つ、Angularによってイベントバインディングで公開される式。

すべてのコード変更を保存してブラウザを更新すると、次の出力が得られます。

更新

次に、「finddevguides」などの情報を入力ボックスに入力します。出力はそれに応じて変化します。

入力ボックス

Angular 2-イベントの処理

Angular 2では、ボタンクリックなどのイベントやその他の種類のイベントも非常に簡単に処理できます。イベントはhtmlページからトリガーされ、さらに処理するためにAngular JSクラスに送信されます。

イベント処理を実現する方法の例を見てみましょう。この例では、クリックボタンとステータスプロパティの表示を見ていきます。最初は、ステータスプロパティがtrueになります。ボタンがクリックされると、ステータスプロパティがfalseになります。

ステップ1 *-app.component.tsファイルのコードを次のように変更します。

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

@Component ({
   selector: 'my-app',
   templateUrl: 'app/app.componentl'
})

export class AppComponent {
   Status: boolean = true;
   clicked(event) {
      this.Status = false;
   }
}

上記のコードについて、次の点に注意する必要があります。

最初は真であるブール型のステータスと呼ばれる変数を定義しています。
次に、HTMLページでボタンがクリックされるたびに呼び出される、クリックされた関数を定義しています。関数では、Statusプロパティの値をtrueからfalseに変更します。

ステップ2 *-テンプレートファイルであるapp/app.componentlファイルに次の変更を加えます。

<div>
   {{Status}}
   <button (click) = "clicked()">Click</button>
</div>

上記のコードについて、次の点に注意する必要があります。

最初に、クラスのStatusプロパティの値を表示しています。
次に、Clickの値でボタンhtmlタグを定義しています。次に、クラスのclickedイベントに対してボタンのクリックイベントがトリガーされるようにします。

ステップ3 *-すべてのコード変更を保存し、ブラウザを更新すると、次の出力が得られます。

Trueをクリック

ステップ4 *-クリックボタンをクリックすると、次の出力が表示されます。

Falseをクリック

Angular 2-データの変換

Angular 2には、データの変換に使用できる多くのフィルターとパイプがあります。

小文字

これは、入力をすべて小文字に変換するために使用されます。

構文

Propertyvalue | lowercase

パラメーター

None

結果

プロパティ値は小文字に変換されます。

例

まず、app.component.tsファイルに次のコードが存在することを確認します。

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

@Component ({
   selector: 'my-app',
   templateUrl: 'app/app.componentl'
})

export class AppComponent {
   TutorialName: string = 'Angular JS2';
   appList: string[] = ["Binding", "Display", "Services"];
}

次に、app/app.componentlファイルに次のコードが含まれていることを確認します。

<div>
   The name of this Tutorial is {{TutorialName}}<br>
   The first Topic is {{appList[0] | lowercase}}<br>
   The second Topic is {{appList[1] | lowercase}}<br>
   The third Topic is {{appList[2]| lowercase}}<br>
</div>

出力

すべてのコード変更を保存し、ブラウザを更新すると、次の出力が得られます。

小文字

大文字

これは、入力をすべて大文字に変換するために使用されます。

構文

Propertyvalue | uppercase

パラメーター

無し。

結果

プロパティ値は大文字に変換されます。

例

まず、app.component.tsファイルに次のコードが存在することを確認します。

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

@Component ({
   selector: 'my-app',
   templateUrl: 'app/app.componentl'
})

export class AppComponent {
   TutorialName: string = 'Angular JS2';
   appList: string[] = ["Binding", "Display", "Services"];
}

次に、app/app.componentlファイルに次のコードが含まれていることを確認します。

<div>
   The name of this Tutorial is {{TutorialName}}<br>
   The first Topic is {{appList[0] | uppercase }}<br>
   The second Topic is {{appList[1] | uppercase }}<br>
   The third Topic is {{appList[2]| uppercase }}<br>
</div>

出力

すべてのコード変更を保存し、ブラウザを更新すると、次の出力が得られます。

大文字

スライス

これは、入力文字列からデータの一部をスライスするために使用されます。

構文

Propertyvalue | slice:start:end

パラメーター

start -これは、スライスを開始する開始位置です。
終了-これは、スライスが終了する開始位置です。

結果

プロパティ値は、開始位置と終了位置に基づいてスライスされます。

例

最初に、次のコードがapp.component.tsファイルに存在することを確認します

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

@Component ({
   selector: 'my-app',
   templateUrl: 'app/app.componentl'
})

export class AppComponent {
   TutorialName: string = 'Angular JS2';
   appList: string[] = ["Binding", "Display", "Services"];
}

次に、app/app.componentlファイルに次のコードが含まれていることを確認します。

<div>
   The name of this Tutorial is {{TutorialName}}<br>
   The first Topic is {{appList[0] | slice:1:2}}<br>
   The second Topic is {{appList[1] | slice:1:3}}<br>
   The third Topic is {{appList[2]| slice:2:3}}<br>
</div>

出力

すべてのコード変更を保存し、ブラウザを更新すると、次の出力が得られます。

スライス

date

これは、入力文字列を日付形式に変換するために使用されます。

構文

Propertyvalue | date:”dateformat”

パラメーター

*dateformat* -これは、入力文字列が変換される日付形式です。

結果

プロパティ値は日付形式に変換されます。

例

まず、app.component.tsファイルに次のコードが存在することを確認します。

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

@Component ({
   selector: 'my-app',
   templateUrl: 'app/app.componentl'
})

export class AppComponent {
   newdate = new Date(2016, 3, 15);
}

次に、app/app.componentlファイルに次のコードが含まれていることを確認します。

<div>
   The date of this Tutorial is {{newdate | date:"MM/dd/yy"}}<br>
</div>

出力

すべてのコード変更を保存し、ブラウザを更新すると、次の出力が得られます。

日付

通貨

これは、入力文字列を通貨形式に変換するために使用されます。

構文

Propertyvalue | currency

パラメーター

無し。

結果

プロパティ値は通貨形式に変換されます。

例

まず、app.component.tsファイルに次のコードが存在することを確認します。

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

@Component ({
   selector: 'my-app',
   templateUrl: 'app/app.componentl'
})

export class AppComponent {
   newValue: number = 123;
}

次に、app/app.componentlファイルに次のコードが含まれていることを確認します。

<div>
   The currency of this Tutorial is {{newValue | currency}}<br>
</div>

出力

すべてのコード変更を保存し、ブラウザを更新すると、次の出力が得られます。

通貨

割合

これは、入力文字列をパーセント形式に変換するために使用されます。

構文

Propertyvalue | percent

パラメーター

None

結果

プロパティ値はパーセンテージ形式に変換されます。

例

まず、app.component.tsファイルに次のコードが存在することを確認します。

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

@Component ({
   selector: 'my-app',
   templateUrl: 'app/app.componentl'
})

export class AppComponent {
   newValue: number = 30;
}

次に、app/app.componentlファイルに次のコードが含まれていることを確認します。

<div>
   The percentage is {{newValue | percent}}<br>
</div>

出力

すべてのコード変更を保存し、ブラウザを更新すると、次の出力が得られます。

パーセント

次のように、パーセントパイプには別のバリエーションがあります。

構文

Propertyvalue | percent: ‘{minIntegerDigits}.{minFractionDigits}{maxFractionDigits}’

パラメーター

minIntegerDigits -これは整数桁の最小数です。
minFractionDigits -これは、小数桁の最小数です。
maxFractionDigits -これは小数桁の最大数です。

結果

プロパティ値はパーセント形式に変換されます

例

まず、app.component.tsファイルに次のコードが存在することを確認します。

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

@Component ({
   selector: 'my-app',
   templateUrl: 'app/app.componentl'
})

export class AppComponent {
   newValue: number = 0.3;
}

次に、app/app.componentlファイルに次のコードが含まれていることを確認します。

<div>
   The percentage is {{newValue | percent:'2.2-5'}}<br>
</div>

出力

すべてのコード変更を保存し、ブラウザを更新すると、次の出力が得られます。

パーセントパイプ

Angular 2-カスタムパイプ

Angular 2には、カスタムパイプを作成する機能もあります。カスタムパイプを定義する一般的な方法は次のとおりです。

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({name: 'Pipename'})

export class Pipeclass implements PipeTransform {
   transform(parameters): returntype { }
}

どこで、

'パイプ名' -これはパイプの名前です。
Pipeclass -これは、カスタムパイプに割り当てられたクラスの名前です。
変換-これはパイプで動作する関数です。
パラメータ-これは、パイプに渡されるパラメータです。
Returntype -これはパイプの戻り値の型です。

2つの数値を乗算するカスタムパイプを作成しましょう。次に、コンポーネントクラスでそのパイプを使用します。

ステップ1 *-最初に、multiplier.pipe.tsというファイルを作成します。

Multiplier

ステップ2 *-上記で作成したファイルに次のコードを配置します。

import {
   Pipe,
   PipeTransform
} from '@angular/core';

@Pipe ({
   name: 'Multiplier'
})

export class MultiplierPipe implements PipeTransform {
   transform(value: number, multiply: string): number {
      let mul = parseFloat(multiply);
      return mul * value
   }
}

上記のコードについて、次の点に注意する必要があります。

最初にPipeおよびPipeTransformモジュールをインポートします。
次に、「Multiplier」という名前のパイプを作成します。
PipeTransformモジュールを実装するMultiplierPipeというクラスを作成します。
変換関数は、値と複数のパラメーターを受け取り、両方の数値の乗算を出力します。

ステップ3 *-app.component.tsファイルに、次のコードを配置します。

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

@Component ({
   selector: 'my-app',
   template: '<p>Multiplier: {{2 | Multiplier: 10}}</p>'
})
export class AppComponent {  }

注-テンプレートでは、新しいカスタムパイプを使用します。

ステップ4 *-次のコードがapp.module.tsファイルに配置されていることを確認します。

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

import {
   BrowserModule
} from '@angular/platform-browser';

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

import {
   MultiplierPipe
} from './multiplier.pipe'

@NgModule ({
   imports: [BrowserModule],
   declarations: [AppComponent, MultiplierPipe],
   bootstrap: [AppComponent]
})

export class AppModule {}

上記のコードについては、次のことに注意する必要があります。

MultiplierPipeモジュールを含める必要があります。
また、宣言セクションに含まれるようにする必要があります。

すべてのコード変更を保存し、ブラウザを更新すると、次の出力が得られます。

乗算器出力

Angular 2-ユーザー入力

Angular 2では、HTMLのDOM要素構造を使用して、実行時に要素の値を変更できます。詳細を見てみましょう。

入力タグ

app.component.tsファイルに次のコードを配置します。

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

@Component ({
   selector: 'my-app',
   template: '
      <div>
         <input [value] = "name" (input) = "name = $event.target.value">
         {{name}}
      </div>

})
export class AppComponent { }

上記のコードについては、次のことに注意する必要があります。

[値] =”ユーザー名” -これは、式ユーザー名を入力要素の値プロパティにバインドするために使用されます。
*（input）=” expression” *-これは、入力要素の入力イベントに式をバインドする宣言的な方法です。
username = $ event.target.value -入力イベントが発生したときに実行される式。
$ event -Angularによるイベントバインディングで公開される式で、イベントのペイロードの値を持ちます。

すべてのコード変更を保存し、ブラウザを更新すると、次の出力が得られます。

これで何でも入力でき、同じ入力が入力コントロールの横のテキストに反映されます。

入力タグ

入力をクリック

app.component.tsファイルに次のコードを配置します。

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

@Component ({
   selector: 'my-app',
   template: '<button (click) = "onClickMe()"> Click Me </button> {{clickMessage}}'
})

export class AppComponent {
   clickMessage = 'Hello';
   onClickMe() {
      this.clickMessage = 'This tutorial!';
   }
}

すべてのコード変更を保存し、ブラウザを更新すると、次の出力が得られます。

クリックして

Click Meボタンをクリックすると、次の出力が表示されます。

Click me Button

Angular 2-ライフサイクルフック

Angular 2アプリケーションは、プロセスセット全体を通過するか、アプリケーションの開始から終了までライフサイクルを持っています。

次の図は、Angular 2アプリケーションのライフサイクルにおけるプロセス全体を示しています。

ライフサイクル

以下は、各ライフサイクルフックの説明です。

ngOnChanges -データバインドプロパティの値が変更されると、このメソッドが呼び出されます。
ngOnInit -これは、Angularがデータバインドプロパティを最初に表示した後、ディレクティブ/コンポーネントの初期化が行われるたびに呼び出されます。
ngDoCheck -これは、Angularが単独で検出できない、または検出できない変更を検出および処理するためのものです。
ngAfterContentInit -これは、Angularが外部コンテンツをコンポーネントのビューに投影した後に応答して呼び出されます。
ngAfterContentChecked -これは、Angularがコンポーネントに投影されたコンテンツをチェックした後に応答して呼び出されます。
ngAfterViewInit -これは、Angularがコンポーネントのビューと子ビューを初期化した後に応答して呼び出されます。
ngAfterViewChecked -これは、Angularがコンポーネントのビューと子ビューをチェックした後に応答して呼び出されます。
ngOnDestroy -これは、Angularがディレクティブ/コンポーネントを破棄する直前のクリーンアップフェーズです。

次に、1つのライフサイクルフックを実装する例を示します。 app.component.ts ファイルに、次のコードを配置します。

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

@Component ({
   selector: 'my-app',
   template: '<div> {{values}} </div> '
})

export class AppComponent {
   values = '';
   ngOnInit() {
      this.values = "Hello";
   }
}

上記のプログラムでは、 ngOnInit ライフサイクルフックを呼び出して、 this.values パラメーターの値を「Hello」に設定する必要があることを具体的に示しています。

すべてのコード変更を保存し、ブラウザを更新すると、次の出力が得られます。

こんにちは

Angular 2-入れ子になったコンテナ

Angular JSでは、コンテナーを相互にネストできます。外側のコンテナは親コンテナと呼ばれ、内側のコンテナは子コンテナと呼ばれます。これを達成する方法の例を見てみましょう。手順は次のとおりです。

ステップ1 *- *child.component.ts という子コンテナの ts ファイルを作成します。

Child.components

ステップ2 *-上記のステップで作成されたファイルに、次のコードを配置します。

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

@Component ({
   selector: 'child-app',
   template: '<div> {{values}} </div> '
})

export class ChildComponent {
   values = '';
   ngOnInit() {
      this.values = "Hello";
   }
}

上記のコードは、パラメーターthis.valuesの値を「Hello」に設定します。

ステップ3 *-app.component.tsファイルに、次のコードを配置します。

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

import {
   ChildComponent
} from './child.component';

@Component ({
   selector: 'my-app',
   template: '<child-app></child-app> '
})

export class AppComponent { }

上記のコードでは、 child.component モジュールをインポートするためにimportステートメントを呼び出していることに注意してください。また、子コンポーネントからメインコンポーネントに<child-app>セレクターを呼び出しています。

ステップ4 *-次に、子コンポーネントもapp.module.tsファイルに含まれていることを確認する必要があります。

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

import {
   BrowserModule
} from '@angular/platform-browser';

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

import {
   MultiplierPipe
} from './multiplier.pipe'

import {
   ChildComponent
} from './child.component';

@NgModule ({
   imports: [BrowserModule],
   declarations: [AppComponent, MultiplierPipe, ChildComponent],
   bootstrap: [AppComponent]
})

export class AppModule {}

すべてのコード変更を保存し、ブラウザを更新すると、次の出力が得られます。

ネストされたコンテナ

Angular 2-サービス

サービスは、さまざまなモジュールに共通の機能を提供する必要がある場合に使用されます。たとえば、さまざまなモジュール間で再利用できるデータベース機能を使用できます。したがって、データベース機能を備えたサービスを作成できます。

モジュール

サービスを作成するときは、次の重要な手順を実行する必要があります。

ステップ1 *-注入可能なデコレータを持つ別のクラスを作成します。注入可能なデコレータにより、このクラスの機能を任意のAngular JSモジュールで注入および使用できます。

@Injectable()
   export class classname {
}

ステップ2 *-次に、appComponentモジュールまたはサービスを使用するモジュールで、@ Componentデコレーターでプロバイダーとして定義する必要があります。

@Component ({
   providers : [classname]
})

これを実現する方法の例を見てみましょう。以下は関連する手順です。

ステップ1 *-app.service.tsというサービスの *ts ファイルを作成します。

デモts

ステップ2 *-上記で作成したファイルに次のコードを配置します。

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

@Injectable()
export class appService {
   getApp(): string {
      return "Hello world";
   }
}

上記のプログラムについて、次の点に注意する必要があります。

Injectableデコレータは、angular/coreモジュールからインポートされます。
Injectableデコレータで装飾されたappServiceというクラスを作成しています。
Hello Worldという単純な文字列を返すgetAppという単純な関数を作成しています。

ステップ3 *-app.component.tsファイルに、次のコードを配置します。

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

import {
   appService
} from './app.service';

@Component ({
   selector: 'demo-app',
   template: '<div>{{value}}</div>',
   providers: [appService]
})

export class AppComponent {
   value: string = "";
   constructor(private _appService: appService) { }

   ngOnInit(): void {
      this.value = this._appService.getApp();
   }
}

上記のプログラムについて、次の点に注意する必要があります。

まず、appServiceモジュールをappComponentモジュールにインポートします。
次に、このモジュールでサービスをプロバイダーとして登録します。
コンストラクターでは、appServiceモジュールの_appServiceという変数を定義して、appComponentモジュール内のどこからでも呼び出せるようにします。
例として、ngOnInitライフサイクルフックで、サービスのgetApp関数を呼び出し、出力をAppComponentクラスのvalueプロパティに割り当てます。

すべてのコード変更を保存し、ブラウザを更新すると、次の出力が得られます。

サービス Angular2-questions-answers

Angular2-quick-guide

Angular 2-概要

Angular 2の機能

Angular 2のコンポーネント

Angular 2-環境

npmインストール

Visual Studio Codeのインストール

Gitのインストール

Angular 2-Hello World

展開

Windows上のNGNIXサーバーでの展開

Ubuntuでのセットアップ

Ubuntuでのnginxの展開

Angular 2-モジュール

Angular 2-アーキテクチャ

Angular 2-コンポーネント

クラス

構文

パラメーター

例

テンプレート

構文

パラメーター

例

メタデータ

例

出力

Angular 2-テンプレート

構文

パラメーター

Angular 2-ディレクティブ

ngIf

構文

出力

ngFor

構文

出力

Angular 2-メタデータ

Angular 2-データバインディング

出力

Angular 2-HTTPを使用したCRUD操作

例

Angular 2-エラー処理

Angular 2-ルーティング

エラールートの追加

Angular 2-ナビゲーション

Angular 2-フォーム

角度2-CLI

CLIのインストール

プロジェクトを作成する

構文

パラメーター

出力

例

プロジェクトを実行する

Angular 2-依存性注入

Angular 2-高度な設定

tsconfig.json

package.json

systemjs.config.json

Angular 2-サードパーティコントロール

Angular 2-データ表示

Angular 2-イベントの処理

Angular 2-データの変換

小文字

構文

パラメーター

結果

例

出力

大文字

構文

パラメーター

結果

例

出力

スライス

構文

パラメーター

結果