Angular 4-概要

Angularには3つのメジャーリリースがあります。リリースされた最初のバージョンはAngular1で、AngularJSとも呼ばれます。 Angular1に続いてAngular2があり、Angular1と比較すると多くの変更が加えられています。

Angularの構造は、コンポーネント/サービスアーキテクチャに基づいています。 AngularJSは、モデルビューコントローラーに基づいていました。 2017年3月にリリースされた Angular 4 は大きなブレークスルーとなり、Angular2の後のAngularチームからの最新リリースです。

Angular 4は、Angular 2とほぼ同じです。 Angular 2との後方互換性があります。 Angular 2で開発されたプロジェクトは、Angular 4で問題なく動作します。

Angular 4で行われた新機能と変更点を見てみましょう。

なぜAngular4でありAngular3ではないのですか？

Angularチームは、モジュールの内部でバージョン管理の問題に直面しました。競合のため、Angularの次のバージョンであるAngular4をリリースしてリリースする必要がありました。

Angular 4に追加された新機能を見てみましょう-

ngIf

Angular2は if 条件のみをサポートしていました。ただし、Angular 4は if else 条件もサポートしています。 ng-templateを使用してどのように機能するかを見てみましょう。

<span *ngIf="isavailable; else condition1">Condition is valid.</span>
<ng-template #condition1>Condition is invalid</ng-template>

forループのキーワードとして

*as* キーワードを使用すると、以下に示すように値を保存できます-

<div *ngFor="let i of months | slice:0:5 as total">
   Months: {{i}} Total: {{total.length}}
</div>

変数totalは、 as キーワードを使用してスライスの出力を保存します。

アニメーションパッケージ

Angular 4のアニメーションは個別のパッケージとして利用でき、@ angular/animationsからインポートする必要があります。 Angular2では、@ angular/core で使用できました。下位互換性の面では、同じままです。

テンプレート

*Angular 4* は、タグとして *<template>;* の代わりに *<ng-template>* を使用します。後者はAngular2で使用されました。 Angular 4が *<template>* を *<ng-template>* に変更した理由は、 *<template>* タグとhtml *<template>* 標準タグの名前の競合のためです。 これは完全に廃止される予定です。 これはAngular 4の主要な変更点の1つです。

TypeScript 2.2

Angular 4は、TypeScriptの最新バージョンである2.2に更新されています。これにより、プロジェクトの速度が向上し、型チェックが改善されます。

パイプタイトルケース

Angular 4では、各単語の最初の文字を大文字に変更する新しいパイプタイトルケースが追加されました。

<div>
   <h2>{{ 'Angular 4 titlecase' | titlecase }}</h2>
</div>

上記のコード行では、次の出力が生成されます- Angular 4 Titlecase 。

HTTP検索パラメーター

http get apiの検索パラメーターが簡素化されました。 Angular2で行われていたのと同じために URLSearchParams を呼び出す必要はありません。

小さくて速いアプリ

Angular 4アプリケーションは、Angular2に比べて小さくて高速です。 TypeScriptバージョン2.2を使用します。これは、最終コンパイルのサイズを小さくする最新バージョンです。

Angular 4-環境のセットアップ

この章では、Angular 4に必要な環境設定について説明します。 Angular 4をインストールするには、次のものが必要です-

ノード番号
Npm
角度CLI
コードを書くためのIDE

Nodejsは4より大きく、npmは3より大きくなければなりません。

ノード番号

nodejsがシステムにインストールされているかどうかを確認するには、ターミナルで node –v と入力します。これは、現在システムにインストールされているnodejsのバージョンを確認するのに役立ちます。

C:\>node –v
v6.11.0

何も印刷されない場合は、システムにnodejsをインストールします。 nodejsをインストールするには、nodejsのホームページhttps://nodejs.org/en/download/にアクセスし、OSに基づいてパッケージをインストールします。

nodejsのホームページは次のようになります-

NodeJSホームページ

OSに基づいて、必要なパッケージをインストールします。 nodejsがインストールされると、npmも一緒にインストールされます。 npmがインストールされているかどうかを確認するには、ターミナルでnpm –vと入力します。 npmのバージョンが表示されます。

C:\>npm –v
5.3.0

Angular 4のインストールは、angular CLIを使用して非常に簡単です。コマンドのリファレンスを取得するには、angularのホームページhttps://cli.angular.io/にアクセスしてください。

Angular CLI

*npm install –g @ angular/cli* と入力して、システムにangle cliをインストールします。

Angular CLIのインストール

Angular CLIをインストールすると、ターミナルに上記のインストールが取得されます。任意のIDE、つまりWebStorm、Atom、Visual Studio Codeなどを使用できます。

プロジェクトのセットアップの詳細については、次の章で説明します。

Angular 4-プロジェクトのセットアップ

AngularJSはモデルビューコントローラーに基づいていますが、Angular 2はコンポーネント構造に基づいています。 Angular 4は、Angular2と同じ構造で動作しますが、Angular2と比較すると高速です。

Angular4はTypeScript 2.2バージョンを使用しますが、Angular 2はTypeScriptバージョン1.8を使用します。これにより、パフォーマンスに大きな違いが生じます。

Angular 4をインストールするために、Angularチームはインストールを簡単にするAngular CLIを考案しました。 Angular 4をインストールするには、いくつかのコマンドを実行する必要があります。

このサイトhttps://cli.angular.ioにアクセスして、Angular CLIをインストールします。

Angular CLI

インストールを開始するには、まず、nodejsとnpmが最新バージョンでインストールされていることを確認する必要があります。 npmパッケージは、nodejsとともにインストールされます。

nodejsサイトhttps://nodejs.org/en/にアクセスします。

NodeJのダウンロード

Nodejs v6.11.0の最新バージョンがユーザーに推奨されます。 4つ以上のnodejsを既に持っているユーザーは、上記のプロセスをスキップできます。 nodejsがインストールされると、以下に示すように、コマンドnode –v を使用してコマンドラインでnodeのバージョンを確認できます-

コマンドプロンプトショーv6.11.0

コマンドプロンプトにv6.11.0が表示されます。 nodejsがインストールされると、npmも一緒にインストールされます。

npmのバージョンを確認するには、ターミナルでコマンド npm –v を入力します。以下に示すように、npmのバージョンが表示されます。

npm-v-3.10.10

npmのバージョンは3.10.10です。 nodejsとnpmがインストールされたので、angular cliコマンドを実行して、Angular 4をインストールします。あなたはウェブページに次のコマンドが表示されます-

npm install -g @angular/cli//command to install angular 4

ng new Angular 4-app//name of the project

cd my-dream-app

ng serve

コマンドラインの最初のコマンドから始めて、それがどのように機能するかを見てみましょう。

まず、Angular CLIコマンドを実行する空のディレクトリを作成します。

Angular CLI Installation Step1

上記のコマンドを入力して、Angular 4をインストールします。インストールプロセスが開始され、完了するまでに数分かかります。

Angular CLI Installation Step2

インストールする上記のコマンドが完了すると、次のコマンドプロンプトが表示されます-

Angular CLI Installation Step3

空のフォルダー ProjectA4 を作成し、Angular CLIコマンドをインストールしました。また、*-g *を使用して、Angular CLIをグローバルにインストールしました。これで、Angular 4プロジェクトを任意のディレクトリまたはフォルダーに作成できます。AngularCLIプロジェクトはシステムにグローバルにインストールされ、任意のディレクトリから使用できるため、賢明にインストールする必要はありません。

Angular CLIがインストールされているかどうかを確認しましょう。インストールを確認するには、ターミナルで次のコマンドを実行します-

ng -v

Angular CLI Installation Step4

現在1.2.0である@ angular/cliバージョンを取得します。実行中のノードバージョンは6.11.0で、OSの詳細も含まれています。上記の詳細から、angular cliが正常にインストールされ、プロジェクトを開始する準備ができたことがわかります。

これでAngular 4がインストールされました。 Angular 4で最初のプロジェクトを作成しましょう。 Angular 4でプロジェクトを作成するには、次のコマンドを使用します-

ng new projectname

プロジェクトに ng new Angular 4-app という名前を付けます。

コマンドラインで上記のコマンドを実行します。

Angular CLI Installation Step5

プロジェクト Angular 4-app が正常に作成されました。プロジェクトがAngular 4で実行するために必要なすべての必要なパッケージをインストールします。ディレクトリ Angular 4-app にある作成されたプロジェクトに切り替えましょう。コマンドラインでディレクトリを変更します- cd Angular 4-app 。

Angular 4の操作にはVisual Studio Code IDEを使用します。 IDE、つまりAtom、WebStormなどを使用できます。

Visual Studio Codeをダウンロードするには、https://code.visualstudio.com/にアクセスし、* Windows用にダウンロード*をクリックします。

Visual Studio Code

IDEをインストールするために* Windows用にダウンロード*をクリックし、セットアップを実行してIDEの使用を開始します。

エディタは次のように見えます-

Angular CLI Editor

まだプロジェクトを開始していません。次に、angle-cliを使用して作成したプロジェクトを取り上げます。

Angular 4-app Project

*Angular 4-app* プロジェクトを検討します。 Angular 4-appを開いて、フォルダー構造がどのように見えるかを見てみましょう。

フォルダー構造

プロジェクトのファイル構造ができたので、次のコマンドでプロジェクトをコンパイルしましょう-

ng serve

*ng serve* コマンドは、アプリケーションをビルドし、Webサーバーを起動します。

ng serve Command

ng serve Command Starts Server

Webサーバーはポート4200で起動します。ブラウザーにURL http：//localhost：4200/ を入力して、出力を確認します。プロジェクトがコンパイルされると、次の出力が表示されます-

サーバーはポート4200で起動します

ブラウザで http：//localhost：4200/ を実行すると、次の画面が表示されます-

Angular App

私たちは今、次のコンテンツを表示するためにいくつかの変更を加えましょう-

「Angular 4プロジェクトへようこそ」

Angular 4プロジェクト

*app.componentl* および *app.component.ts* ファイルに変更を加えました。 これについては、以降の章で詳しく説明します。

プロジェクトのセットアップを完了しましょう。ご覧のように、ポート4200を使用しています。これは、コンパイル中にangle-cliが使用するデフォルトのポートです。次のコマンドを使用して、必要に応じてポートを変更できます-

ng serve --host 0.0.0.0 –port 4205

Angular 4アプリフォルダーには、次の*フォルダー構造*があります-

e2e -エンドツーエンドのテストフォルダー。主にe2eは統合テストに使用され、アプリケーションが正常に動作することを保証します。
node_modules -インストールされているnpmパッケージはnode_modulesです。フォルダを開いて、利用可能なパッケージを確認できます。
src -このフォルダーは、Angular 4を使用してプロジェクトで作業する場所です。

Angular 4アプリフォルダーには、次の*ファイル構造*があります-

.angular-cli.json -基本的にプロジェクト名、cliのバージョンなどを保持します。
.editorconfig -これはエディターの構成ファイルです。
.gitignore -リポジトリを複製する他のユーザーと無視ルールを共有するには、リポジトリに.gitignoreファイルをコミットする必要があります。
karma.conf.js -これは、分度器を介した単体テストに使用されます。プロジェクトに必要なすべての情報は、karma.conf.jsファイルで提供されます。
package.json -package.jsonファイルは、npm installを実行したときにnode_modulesにインストールされるライブラリを示します。

現在、エディターでファイルを開くと、次のモジュールが追加されます。

"@angular/animations": "^4.0.0",
"@angular/common": "^4.0.0",
"@angular/compiler": "^4.0.0",
"@angular/core": "^4.0.0",
"@angular/forms": "^4.0.0",
"@angular/http": "^4.0.0",
"@angular/platform-browser": "^4.0.0",
"@angular/platform-browser-dynamic": "^4.0.0",
"@angular/router": "^4.0.0",

ライブラリをさらに追加する必要がある場合は、それらをここに追加してnpm installコマンドを実行できます。

protractor.conf.js -これは、アプリケーションに必要なテスト構成です。
tsconfig.json -これには基本的に、コンパイル時に必要なコンパイラオプションが含まれています。
tslint.json -これは、コンパイル中に考慮されるルールを含む構成ファイルです。
srcフォルダー*はメインフォルダーで、*内部的には異なるファイル構造*を持っています。

app

以下に説明するファイルが含まれています。これらのファイルは、デフォルトでangle-cliによってインストールされます。

app.module.ts -ファイルを開くと、コードがインポートされた異なるライブラリへの参照を持っていることがわかります。 Angular-cliは、インポートにこれらのデフォルトライブラリ（angular/core、platform-browser）を使用しています。名前自体は、ライブラリの使用法を説明しています。

それらはインポートされ、宣言、インポート、プロバイダー、*ブートストラップ*などの変数に保存されます。

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

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

export class AppModule { }

宣言-宣言では、コンポーネントへの参照が保存されます。 Appcomponentは、新しいプロジェクトが開始されるたびに作成されるデフォルトのコンポーネントです。別のセクションで新しいコンポーネントの作成について学習します。

*imports* -これにより、上記のようにモジュールがインポートされます。 現在、BrowserModuleは@ angular/platform-browserからインポートされるインポートの一部です。

*providers* -これには、作成されたサービスへの参照が含まれます。 サービスについては、後続の章で説明します。

*bootstrap* -これには、作成されたデフォルトコンポーネント、つまりAppComponentへの参照が含まれます。

app.component.css -あなたはここでCSS構造を書くことができます。以下に示すように、今、divに背景色を追加しました。

.divdetails{
   background-color: #ccc;
}

app.componentl -HTMLコードはこのファイルで使用できます。

<!--The content below is only a placeholder and can be replaced.-->
<div class = "divdetails">
   <div style = "text-align:center">
      <h1>
         Welcome to {{title}}!
      </h1>
      <img width = "300" src = "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNv
      ZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4xLjAsIFNWRyBFe
      HBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4
      xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaH
      R0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAyNTAg
      MjUwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyNTAgMjUwOyIgeG1sOnNwYWNlPSJwcmVzZXJ2
      ZSI+DQo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPg0KCS5zdDB7ZmlsbDojREQwMDMxO30NCgkuc3Qxe2ZpbGw6I0M
      zMDAyRjt9DQoJLnN0MntmaWxsOiNGRkZGRkY7fQ0KPC9zdHlsZT4NCjxnPg0KCTxwb2x5Z29uIGNsYXNzPSJzdD
      AiIHBvaW50cz0iMTI1LDMwIDEyNSwzMCAxMjUsMzAgMzEuOSw2My4yIDQ2LjEsMTg2LjMgMTI1LDIzMCAxMjUsMj
      MwIDEyNSwyMzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMiAJIi8+DQoJPHBvbHlnb24gY2xhc3M9InN0MSIgcG9pbn
      RzPSIxMjUsMzAgMTI1LDUyLjIgMTI1LDUyLjEgMTI1LDE1My40IDEyNSwxNTMuNCAxMjUsMjMwIDEyNSwyMzAgMj
      AzLjksMTg2LjMgMjE4LjEsNjMuMiAxMjUsMzAgCSIvPg0KCTxwYXRoIGNsYXNzPSJzdDIiIGQ9Ik0xMjUsNTIuMU
      w2Ni44LDE4Mi42aDBoMjEuN2gwbDExLjctMjkuMmg0OS40bDExLjcsMjkuMmgwaDIxLjdoMEwxMjUsNTIuMUwxMj
      UsNTIuMUwxMjUsNTIuMUwxMjUsNTIuMQ0KCQlMMTI1LDUyLjF6IE0xNDIsMTM1LjRIMTA4bDE3LTQwLjlMMTQyLD
      EzNS40eiIvPg0KPC9nPg0KPC9zdmc+DQo=">
   </div>
   <h2>Here are some links to help you start: </h2>
   <ul>
      <li>
         <h2>
            <a target = "_blank" href="https://angular.io/tutorial">Tour of Heroes</a>
         </h2>
      </li>
      <li>
         <h2>
            <a target = "_blank" href = "https://github.com/angular/angular-cli/wiki">
               CLI Documentation
            </a>
         </h2>
      </li>
      <li>
         <h2>
            <a target="_blank" href="http://angularjs.blogspot.ca/">Angular blog</a>
         </h2>
      </li>
   </ul>
</div>

これは、プロジェクト作成で現在利用可能なデフォルトのHTMLコードです。

app.component.spec.ts -これらは、ソースコンポーネントの単体テストを含む自動生成されたファイルです。
app.component.ts -コンポーネントのクラスはここで定義されています。 .tsファイル内のhtml構造の処理を行うことができます。処理には、データベースへの接続、他のコンポーネントとの対話、ルーティング、サービスなどのアクティビティが含まれます。

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

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

@Component({
   selector: 'app-root',
   templateUrl: './app.componentl',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   title = 'app';
}

資産

このフォルダーに画像、jsファイルを保存できます。

環境

このフォルダーには、実稼働環境または開発環境の詳細が含まれています。フォルダーには2つのファイルが含まれています。

environment.prod.ts
environment.ts

両方のファイルには、最終ファイルを実稼働環境でコンパイルするか、開発環境でコンパイルするかについての詳細が含まれています。

Angular 4アプリフォルダーの追加のファイル構造には、次のものが含まれます-

favicon.ico

これは通常、Webサイトのルートディレクトリにあるファイルです。

インデックス

これはブラウザに表示されるファイルです。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>HTTP Search Param</title>
      <base href = "/">
      <link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
      <link href = "https://fonts.googleapis.com/css?family=Roboto|Roboto+Mono" rel="stylesheet">
      <link href = "styles.c7c7b8bf22964ff954d3.bundle.css" rel="stylesheet">
      <meta name = "viewport" content="width=device-width, initial-scale=1">
      <link rel = "icon" type="image/x-icon" href="favicon.ico">
   </head>

   <body>
      <app-root></app-root>
   </body>
</html>

本体には <app-root> </app-root> があります。これは app.component.ts ファイルで使用されるセレクターであり、app.componentlファイルの詳細を表示します。

main.ts

main.tsは、プロジェクト開発を開始するファイルです。まず、必要な基本モジュールをインポートします。現在、angular/core、angular/platform-browser-dynamicが表示されている場合、angular-cliのインストールおよびプロジェクトのセットアップ中にapp.moduleおよび環境がデフォルトでインポートされます。

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
   enableProdMode();
}
platformBrowserDynamic().bootstrapModule(AppModule);

platformBrowserDynamic（）。bootstrapModule（AppModule）には、親モジュール参照 *AppModule があります。したがって、ブラウザで実行すると、呼び出されるファイルはindexlになります。 Indexlは、次のコードの実行時に親モジュール、つまりAppModuleを呼び出すmain.tsを内部的に参照します-

platformBrowserDynamic().bootstrapModule(AppModule);

AppModuleが呼び出されると、app.module.tsが呼び出され、さらに次のようにboostrapに基づいてAppComponentが呼び出されます-

bootstrap: [AppComponent]

app.component.tsには、indexlファイルで使用される selector：app-root があります。これにより、app.componentlに存在するコンテンツが表示されます。

次は、ブラウザに表示されます-

App Module

polyfill.ts

これは主に下位互換性のために使用されます。

styles.css

これは、プロジェクトに必要なスタイルファイルです。

test.ts

ここでは、プロジェクトをテストするためのユニットテストケースが処理されます。

tsconfig.app.json

これはコンパイル中に使用され、アプリケーションを実行するために使用する必要がある設定の詳細が含まれています。

tsconfig.spec.json

これにより、テストの詳細を維持できます。

typings.d.ts

TypeScript定義を管理するために使用されます。

最終的なファイル構造は次のようになります-

最終的なファイル構造

Angular 4-コンポーネント

Angular 4での開発の大部分は、コンポーネントで行われます。コンポーネントは基本的に、ブラウザに表示されるコンポーネントのlファイルとやり取りするクラスです。前の章の1つでファイル構造を見てきました。ファイル構造にはアプリコンポーネントがあり、次のファイルで構成されています-

app.component.css
app.componentl
app.component.spec.ts
app.component.ts
app.module.ts

上記のファイルは、angular-cliコマンドを使用して新しいプロジェクトを作成したときにデフォルトで作成されました。

あなたが app.module.ts ファイルを開いた場合、それはインポートされたいくつかのライブラリと次のようにappcomponentに割り当てられている宣言を持っています-

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

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

export class AppModule { }

宣言には、既にインポートしたAppComponent変数が含まれています。これが親コンポーネントになります。

現在、angle-cliには、独自のコンポーネントを作成するコマンドがあります。ただし、デフォルトで作成されるアプリコンポーネントは常に親のままであり、次に作成されるコンポーネントが子コンポーネントを形成します。

コマンドを実行してコンポーネントを作成しましょう。

ng g component new-cmp

コマンドラインで上記のコマンドを実行すると、次の出力が表示されます-

C:\projectA4\Angular 4-app>ng g component new-cmp
installing component
   create src\app\new-cmp\new-cmp.component.css
   create src\app\new-cmp\new-cmp.componentl
   create src\app\new-cmp\new-cmp.component.spec.ts
   create src\app\new-cmp\new-cmp.component.ts
   update src\app\app.module.ts

次に、ファイル構造を確認してみると、src/appフォルダーの下にnew-cmp新しいフォルダーが作成されます。

次のファイルがnew-cmpフォルダに作成されます-

new-cmp.component.css-新しいコンポーネントのcssファイルが作成されます。
new-cmp.componentl-htmlファイルが作成されます。
new-cmp.component.spec.ts-これは単体テストに使用できます。
new-cmp.component.ts-ここでは、モジュール、プロパティなどを定義できます。

次のように変更がapp.module.tsファイルに追加されます-

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { NewCmpComponent } from './new-cmp/new-cmp.component';
//includes the new-cmp component we created

@NgModule({
   declarations: [
      AppComponent,
      NewCmpComponent//here it is added in declarations and will behave as a child component
   ],
   imports: [
      BrowserModule
   ],
   providers: [],
   bootstrap: [AppComponent]//for bootstrap the AppComponent the main app component is given.
})

export class AppModule { }

*new-cmp.component.ts* ファイルは次のように生成されます-

import { Component, OnInit } from '@angular/core';//here angular/core is imported .

@Component({
  //this is a declarator which starts with @ sign. The component word marked in bold needs to be the same.
   selector: 'app-new-cmp',//
   templateUrl: './new-cmp.componentl',
  //reference to the html file created in the new component.
   styleUrls: ['./new-cmp.component.css']//reference to the style file.
})

export class NewCmpComponent implements OnInit {
   constructor() { }
   ngOnInit() {}
}

上記のnew-cmp.component.tsファイルを見ると、コンストラクターとngOnInit（）というメソッドを持つOnInit.Inを実装するNewCmpComponentという新しいクラスが作成されます。 ngOnInitは、クラスが実行されるときにデフォルトで呼び出されます。

フローの仕組みを確認しましょう。これで、デフォルトで作成されるアプリコンポーネントが親コンポーネントになります。後で追加されたコンポーネントはすべて子コンポーネントになります。

*http：//localhost：4200/* ブラウザでURLにヒットすると、最初に以下に示すindexlファイルが実行されます-

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>Angular 4App</title>
      <base href = "/">
      <meta name="viewport" content="width = device-width, initial-scale = 1">
      <link rel = "icon" type = "image/x-icon" href = "favicon.ico">
   </head>

   <body>
      <app-root></app-root>
   </body>
</html>

上記は通常のhtmlファイルであり、ブラウザには何も印刷されていません。 bodyセクションのタグを見てください。

<app-root></app-root>

これはデフォルトでAngularによって作成されたルートタグです。このタグには、 main.ts ファイルに参照があります。

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
   enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule);

AppModuleはメインの親モジュールのアプリからインポートされ、同じことがブートストラップモジュールにも与えられ、appmoduleがロードされます。

*app.module.ts* ファイルを見てみましょう-

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

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

export class AppModule { }

ここで、AppComponentは指定された名前、つまり appの参照を保存する変数です。 Component.ts と同じものがブートストラップに与えられます。 app.component.ts ファイルを見てみましょう。

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

@Component({
   selector: 'app-root',
   templateUrl: './app.componentl',
   styleUrls: ['./app.component.css']
})

export class AppComponent {
   title = 'Angular 4 Project!';
}

角のコアがインポートされ、コンポーネントと呼ばれ、宣言子で同じものが使用されます-

@Component({
   selector: 'app-root',
   templateUrl: './app.componentl',
   styleUrls: ['./app.component.css']
})

セレクターへの宣言子参照では、 templateUrl および styleUrl が指定されています。ここでのセレクタは、上記のindexlファイルに配置されたタグにすぎません。

クラスAppComponentには、ブラウザに表示されるtitleという変数があります。

*@ Component* はapp.componentlと呼ばれるtemplateUrlを使用します。これは次のとおりです-

<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
   <h1>
      Welcome to {{title}}.
   </h1>
</div>

HTMLコードと変数タイトルのみが中括弧で囲まれています。 app.component.ts ファイルに存在する値で置き換えられます。これはバインディングと呼ばれます。バインディングの概念については、後続の章で説明します。

これで、 new-cmp という新しいコンポーネントが作成されました。新しいコンポーネントを作成するためにコマンドが実行されると、同じことが app.module.ts ファイルに含まれます。

*app.module.ts* には、作成された新しいコンポーネントへの参照があります。

new-cmpで作成された新しいファイルを確認しましょう。

new-cmp.component.ts

import { Component, OnInit } from '@angular/core';
@Component({
   selector: 'app-new-cmp',
   templateUrl: './new-cmp.componentl',
   styleUrls: ['./new-cmp.component.css']
})

export class NewCmpComponent implements OnInit {
   constructor() { }
   ngOnInit() {}
}

ここでは、コアもインポートする必要があります。コンポーネントの参照は、宣言子で使用されます。

宣言子には、 app-new-cmp および templateUrl および styleUrl というセレクターがあります。

*new-cmp.componentl* と呼ばれるlは次のとおりです-

<p>
   new-cmp works!
</p>

上記のように、htmlコード、つまりpタグがあります。現在スタイルは必要ないため、スタイルファイルは空です。しかし、プロジェクトを実行すると、新しいコンポーネントに関連するものはブラウザに表示されません。ここで何かを追加してみましょう。これは後でブラウザで見ることができます。

セレクター、つまり app-new-cmp は次のように app.component l ファイルに追加する必要があります-

<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
   <h1>
      Welcome to {{title}}.
   </h1>
</div>

<app-new-cmp></app-new-cmp>

*<app-new-cmp> </app-new-cmp>* タグが追加されると、作成された新しいコンポーネントのlファイルに存在するものすべてが、親コンポーネントデータとともにブラウザに表示されます。

新しいコンポーネントl *ファイルと *new-cmp.component.ts ファイルを見てみましょう。

new-cmp.component.ts

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

@Component({
   selector: 'app-new-cmp',
   templateUrl: './new-cmp.componentl',
   styleUrls: ['./new-cmp.component.css']
})

export class NewCmpComponent implements OnInit {
   newcomponent = "Entered in new component created";
   constructor() {}
   ngOnInit() { }
}

このクラスでは、new componentという変数を1つ追加しました。値は「 Entered in new component created 」です。

上記の変数は次のように .new-cmp.componentl ファイルにバインドされています-

<p>
   {{newcomponent}}
</p>

<p>
   new-cmp works!
</p>

appに <app-new-cmp> </app-new-cmp> セレクターを含めたので。親コンポーネントのlであるコンポーネントl *、新しいコンポーネントlファイル（new-cmp.componentl）に存在するコンテンツは、次のようにブラウザーに表示されます-

セレクターブラウザー出力の使用

同様に、要件に従って、 app.componentl ファイルのセレクターを使用してコンポーネントを作成し、リンクすることができます。

Angular 4-モジュール

Angularの Module は、アプリケーションに関連するコンポーネント、ディレクティブ、パイプ、およびサービスをグループ化できる場所を指します。

Webサイトを開発している場合、ヘッダー、フッター、左、中央、および右のセクションがモジュールの一部になります。

モジュールを定義するには、 NgModule を使用できます。 Angular –cliコマンドを使用して新しいプロジェクトを作成すると、ngmoduleはデフォルトでapp.module.tsファイルに作成され、次のようになります-

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

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

export class AppModule { }

NgModuleは次のようにインポートする必要があります-

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

ngmoduleの構造は以下に示すとおりです-

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

*@ NgModule* で始まり、宣言、インポート、プロバイダー、およびブートストラップを持つオブジェクトが含まれています。

宣言

作成されたコンポーネントの配列です。新しいコンポーネントが作成された場合、最初にインポートされ、以下に示すように参照が宣言に含まれます-

declarations: [
   AppComponent,
   NewCmpComponent
]

インポート

これは、アプリケーションで使用する必要があるモジュールの配列です。また、宣言配列内のコンポーネントで使用することもできます。たとえば、現在@NgModuleには、インポートされたブラウザモジュールがあります。アプリケーションにフォームが必要な場合は、次のようにモジュールを含めることができます-

import { FormsModule } from '@angular/forms';

*@ NgModule* でのインポートは次のようになります-

imports: [
   BrowserModule,
   FormsModule
]

プロバイダ

これには、作成されたサービスが含まれます。

ブートストラップ

これには、実行を開始するためのメインアプリコンポーネントが含まれます。

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

データバインディングは、AngularJS、Angular 2から直接利用でき、Angular 4でも利用できるようになりました。データバインディングには中括弧を使用します-\ {\ {}};このプロセスは補間と呼ばれます。前の例で、変数titleに値を宣言する方法を既に見てきました。同じ値がブラウザーに出力されます。

*app.componentl* ファイルの変数は\ {\ {title}}として参照され、titleの値は *app.component.ts* ファイルで初期化され、 *app.componentl* では値が表示されます。

ここで、ブラウザで数ヶ月のドロップダウンを作成しましょう。それを行うには、次のように app.component.ts に月の配列を作成しました-

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

@Component({
   selector: 'app-root',
   templateUrl: './app.componentl',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   title = 'Angular 4 Project!';
  //declared array of months.
   months = ["January", "Feburary", "March", "April", "May",
            "June", "July", "August", "September",
            "October", "November", "December"];
}

上記の月の配列は、ブラウザのドロップダウンに表示されます。このために、次のコード行を使用します-

<!--The content below is only a placeholder and can be replaced. -->
<div style="text-align:center">
   <h1>
      Welcome to {{title}}.
   </h1>
</div>

<div> Months :
   <select>
      <option *ngFor="let i of months">{{i}}</option>
   </select>
</div>

オプション付きの通常の選択タグを作成しました。オプションでは、* forループ*を使用しました。 * forループ*は、月の配列を反復処理するために使用されます。これにより、月に存在する値でオプションタグが作成されます。

Angularの for 構文は* ngFor =“ let I of months” であり、月の値を取得するために\ {\ {i}}に表示しています。

2つの中括弧は、データバインディングに役立ちます。 app.component.ts ファイルで変数を宣言すると、中括弧を使用して同じ変数が置き換えられます。

上記の月の配列の出力をブラウザで見てみましょう

ブラウザで月の配列を出力

*app.component.ts* で設定される変数は、中括弧を使用して *app.componentl* とバインドできます。例えば、 *\{\{}}*。

条件に基づいてブラウザにデータを表示してみましょう。ここでは、変数を追加し、値をtrueに割り当てています。 ifステートメントを使用して、表示するコンテンツを非表示/表示できます。

例

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

@Component({
   selector: 'app-root',
   templateUrl: './app.componentl',
   styleUrls: ['./app.component.css']
})

export class AppComponent {
   title = 'Angular 4 Project!';
  //array of months.
   months = ["January", "February", "March", "April",
            "May", "June", "July", "August", "September",
            "October", "November", "December"];
   isavailable = true;  //variable is set to true
}

<!--The content below is only a placeholder and can be replaced.-->
<div style = "text-align:center">
   <h1>
      Welcome to {{title}}.
   </h1>
</div>

<div> Months :
   <select>
      <option *ngFor = "let i of months">{{i}}</option>
   </select>
</div>
<br/>

<div>
   <span *ngIf = "isavailable">Condition is valid.</span>
  //over here based on if condition the text condition is valid is displayed.
   If the value of isavailable is set to false it will not display the text.
</div>

出力

IFステートメントを使用した出力

*IF THEN ELSE* 条件を使用して上記の例を試してみましょう。

例

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

@Component({
   selector: 'app-root',
   templateUrl: './app.componentl',
   styleUrls: ['./app.component.css']
})

export class AppComponent {
   title = 'Angular 4 Project!';
  //array of months.
   months = ["January", "February", "March", "April",
            "May", "June", "July", "August", "September",
            "October", "November", "December"];
   isavailable = false;
}

この場合、 isavailable 変数をfalseにしました。 else 条件を印刷するには、次のように ng-template を作成する必要があります-

<ng-template #condition1>Condition is invalid</ng-template>

完全なコードは次のようになります-

<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
   <h1>
      Welcome to {{title}}.
   </h1>
</div>

<div> Months :
   <select>
      <option *ngFor="let i of months">{{i}}</option>
   </select>
</div>
<br/>

<div>
   <span *ngIf="isavailable; else condition1">Condition is valid.</span>
   <ng-template #condition1>Condition is invalid</ng-template>
</div>

*If* はelse条件で使用され、使用される変数は *condition1* です。 同じものが *id* として *ng-template* に割り当てられ、利用可能な変数がfalseに設定されると、テキスト *Condition is invalid* が表示されます。

次のスクリーンショットは、ブラウザーでの表示を示しています。

If-Else条件を使用した出力

*if then else* 条件を使用してみましょう。

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

@Component({
   selector: 'app-root',
   templateUrl: './app.componentl',
   styleUrls: ['./app.component.css']
})

export class AppComponent {
   title = 'Angular 4 Project!';
  //array of months.
   months = ["January", "February", "March", "April",
            "May", "June", "July", "August", "September",
            "October", "November", "December"];
   isavailable = true;
}

ここで、変数を isavailable としてtrueにします。 HTMLでは、条件は次のように書かれています-

<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
   <h1>
   Welcome to {{title}}.
   </h1>
</div>

<div> Months :
   <select>
      <option *ngFor="let i of months">{{i}}</option>
   </select>
</div>
<br/>

<div>
   <span *ngIf="isavailable; then condition1 else condition2">Condition is valid.</span>
   <ng-template #condition1>Condition is valid</ng-template>
   <ng-template #condition2>Condition is invalid</ng-template>
</div>

変数がtrueの場合、 condition1 、そうでない場合は condition2 。これで、2つのテンプレートがID ＃condition1 *および＃condition2 *で作成されます。

ブラウザでの表示は次のとおりです-

If-Then-Else条件を使用した出力

Angular 4-イベントバインディング

この章では、Angular 4でイベントバインディングがどのように機能するかについて説明します。ユーザーがキーボードの動き、マウスのクリック、またはマウスオーバーの形でアプリケーションを操作すると、イベントが生成されます。これらのイベントは、何らかのアクションを実行するために処理する必要があります。これは、イベントバインディングが登場する場所です。

これをよりよく理解するための例を考えてみましょう。

app.componentl

<!--The content below is only a placeholder and can be replaced.-->
<div style = "text-align:center">
   <h1>
      Welcome to {{title}}.
   </h1>
</div>

<div> Months :
   <select>
      <option *ngFor = "let i of months">{{i}}</option>
   </select>
</div>
<br/>

<div>
   <span *ngIf = "isavailable; then condition1 else condition2">
      Condition is valid.
   </span>
   <ng-template #condition1>Condition is valid</ng-template>
   <ng-template #condition2>Condition is invalid</ng-template>
</div>
<button (click)="myClickFunction($event)">
   Click Me
</button>

*app.componentl* ファイルで、ボタンを定義し、クリックイベントを使用してボタンに関数を追加しました。

以下は、ボタンを定義し、ボタンに機能を追加する構文です。

(click)="myClickFunction($event)"

関数は .ts ファイルで定義されています： app.component.ts

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

@Component({
   selector: 'app-root',
   templateUrl: './app.componentl',
   styleUrls: ['./app.component.css']
})

export class AppComponent {
   title = 'Angular 4 Project!';
  //array of months.
   months = ["January", "Feburary", "March", "April",
            "May", "June", "July", "August", "September",
            "October", "November", "December"];
   isavailable = true;
   myClickFunction(event) {
     //just added console.log which will display the event details in browser on click of the button.
      alert("Button is clicked");
      console.log(event);
   }
}

ボタンをクリックすると、コントロールは関数 myClickFunction に移動し、次のスクリーンショットに示すように、ボタンがクリックされたことを示すダイアログボックスが表示されます-

myClickFunctionを使用した出力

変更イベントをドロップダウンに追加しましょう。

次のコード行は、ドロップダウンに変更イベントを追加するのに役立ちます-

<!--The content below is only a placeholder and can be replaced.-->
<div style = "text-align:center">
   <h1>
      Welcome to {{title}}.
   </h1>
</div>

<div> Months :
   <select (change) = "changemonths($event)">
      <option *ngFor = "let i of months">{{i}}</option>
   </select>
</div>
<br/>

<div>
   <span *ngIf = "isavailable; then condition1 else condition2">
      Condition is valid.
   </span>
   <ng-template #condition1>Condition is valid</ng-template>
   <ng-template #condition2>Condition is invalid</ng-template>
</div>

<button (click) = "myClickFunction($event)">Click Me</button>

関数は、 app.component.ts ファイルで宣言されています-

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

@Component({
   selector: 'app-root',
   templateUrl: './app.componentl',
   styleUrls: ['./app.component.css']
})

export class AppComponent {
   title = 'Angular 4 Project!';
  //array of months.
   months = ["January", "Feburary", "March", "April",
            "May", "June", "July", "August", "September",
            "October", "November", "December"];
   isavailable = true;
   myClickFunction(event) {
      alert("Button is clicked");
      console.log(event);
   }
   changemonths(event) {
      console.log("Changed month from the Dropdown");
      console.log(event);
   }
}

コンソールメッセージ「 Changed month from the Dropdown 」がイベントとともにコンソールに表示されます。

ドロップダウンから月を変更

以下に示すように、ドロップダウンからの値が変更されたときに、 app.component.ts にアラートメッセージを追加しましょう-

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

@Component({
   selector: 'app-root',
   templateUrl: './app.componentl',
   styleUrls: ['./app.component.css']
})

export class AppComponent {
   title = 'Angular 4 Project!';
  //array of months.
   months = ["January", "February", "March", "April",
            "May", "June", "July", "August", "September",
            "October", "November", "December"];

   isavailable = true;
   myClickFunction(event) {
     //just added console.log which will display the event details in browser
      on click of the button.
      alert("Button is clicked");
      console.log(event);
   }
   changemonths(event) {
      alert("Changed month from the Dropdown");
   }
}

ドロップダウンの値が変更されると、ダイアログボックスが表示され、次のメッセージが表示されます-「ドロップダウンから月を変更しました」。

Dropdown2から月を変更

Angular 4-テンプレート

*Angular 4* は、Angular2で使用される *<template>* の代わりに、タグとして *<ng-template>* を使用します。 Angular 4が *<template>* を *<ng-template>* に変更した理由は、 *<template>* タグとhtml *<template>* 標準タグの間に名前の競合があるためです。 これは完全に廃止される予定です。 これはAngular 4の主要な変更点の1つです。

*if else* 条件とともにテンプレートを使用して、出力を確認します。

app.componentl

<!--The content below is only a placeholder and can be replaced.-->
<div style = "text-align:center">
   <h1>
      Welcome to {{title}}.
   </h1>
</div>

<div> Months :
   <select (change) = "changemonths($event)" name = "month">
      <option *ngFor = "let i of months">{{i}}</option>
   </select>
</div>
<br/>

<div>
   <span *ngIf = "isavailable;then condition1 else condition2">Condition is valid.</span>
   <ng-template #condition1>Condition is valid from template</ng-template>
   <ng-template #condition2>Condition is invalid from template</ng-template>
</div>
<button (click) = "myClickFunction($event)">Click Me</button>

Spanタグの場合、 else 条件を含む if ステートメントを追加し、テンプレートcondition1またはelse condition2を呼び出します。

テンプレートは次のように呼び出されます-

<ng-template #condition1>Condition is valid from template</ng-template>
<ng-template #condition2>Condition is invalid from template</ng-template>

条件が真の場合、condition1テンプレートが呼び出され、そうでない場合はcondition2が呼び出されます。

app.component.ts

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

@Component({
   selector: 'app-root',
   templateUrl: './app.componentl',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   title = 'Angular 4 Project!';
  //array of months.
   months = ["January", "February", "March", "April",
            "May", "June", "July", "August", "September",
            "October", "November", "December"];
   isavailable = false;
   myClickFunction(event) {
      this.isavailable = false;
   }
   changemonths(event) {
      alert("Changed month from the Dropdown");
      console.log(event);
   }
}

ブラウザでの出力は次のとおりです-

App Component.ts出力

変数 isavailable はfalseなので、condition2テンプレートが出力されます。ボタンをクリックすると、それぞれのテンプレートが呼び出されます。ブラウザを調べると、domでspanタグを取得できないことがわかります。次の例は、同じことを理解するのに役立ちます。

ブラウザの検査

ブラウザを調べると、domにspanタグがないことがわかります。 domの Condition is invalid from template があります。

htmlの次のコード行は、domでspanタグを取得するのに役立ちます。

<!--The content below is only a placeholder and can be replaced.-->
<div style = "text-align:center">
   <h1>
      Welcome to {{title}}.
   </h1>
</div>

<div> Months :
   <select (change) = "changemonths($event)" name = "month">
      <option *ngFor = "let i of months">{{i}}</option>
   </select>
</div>
<br/>

<div>
   <span *ngIf = "isavailable; else condition2">Condition is valid.</span>
   <ng-template #condition1>Condition is valid from template</ng-template>
   <ng-template #condition2>Condition is invalid from template</ng-template>
</div>

<button (click)="myClickFunction($event)">Click Me</button>

then条件を削除すると、ブラウザーに*「Condition is valid」メッセージが表示され、domでもspanタグを使用できます。たとえば、 *app.component.ts では、 isavailable 変数をtrueにしています。

app.component.tsは利用可能

Angular 4-ディレクティブ

Angularの Directives は js クラスで、 @ directive として宣言されています。 Angularには3つのディレクティブがあります。ディレクティブは以下のとおりです-

コンポーネント指令

これらは、実行時にコンポーネントを処理、インスタンス化、および使用する方法の詳細を含むメインクラスを形成します。

構造指令

構造ディレクティブは、基本的にdom要素の操作を扱います。構造ディレクティブには、ディレクティブの前に*記号があります。たとえば、* ngIf および* ngFor 。

属性ディレクティブ

属性ディレクティブは、dom要素の外観と動作の変更を処理します。以下に示すように、独自のディレクティブを作成できます。

カスタムディレクティブを作成する方法は？

このセクションでは、コンポーネントで使用されるカスタムディレクティブについて説明します。カスタムディレクティブは当社が作成したもので、標準ではありません。

カスタムディレクティブの作成方法を見てみましょう。コマンドラインを使用してディレクティブを作成します。コマンドラインを使用してディレクティブを作成するコマンドは-

ng g directive nameofthedirective

e.g

ng g directive changeText

これがコマンドラインでの表示方法です

C:\projectA4\Angular 4-app>ng g directive changeText
installing directive
   create src\app\change-text.directive.spec.ts
   create src\app\change-text.directive.ts
   update src\app\app.module.ts

上記のファイル、つまり change-text.directive.spec.ts および change-text.directive.ts が作成され、 app.module.ts ファイルが更新されます。

app.module.ts

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

import { NewCmpComponent } from './new-cmp/new-cmp.component';
import { ChangeTextDirective } from './change-text.directive';

@NgModule({
   declarations: [
      AppComponent,
      NewCmpComponent,
      ChangeTextDirective
   ],

   imports: [
      BrowserModule
   ],

   providers: [],
   bootstrap: [AppComponent]
})

export class AppModule { }

*ChangeTextDirective* クラスは、上記のファイルの宣言に含まれています。 クラスは、以下のファイルからもインポートされます。

テキストを変更します。指令

import { Directive } from '@angular/core';
@Directive({
   selector: '[changeText]'
})

export class ChangeTextDirective {
   constructor() { }
}

上記のファイルにはディレクティブがあり、セレクタープロパティもあります。セレクターで定義するものは何でも、ビューで一致する必要があり、カスタムディレクティブを割り当てます。

*app.componentl* ビューで、次のようにディレクティブを追加しましょう-

<div style="text-align:center">
   <span changeText >Welcome to {{title}}.</span>
</div>

次のように変更を change-text.directive.ts ファイルに書き込みます-

change-text.directive.ts

import { Directive, ElementRef} from '@angular/core';
@Directive({
   selector: '[changeText]'
})

export class ChangeTextDirective {
   constructor(Element: ElementRef) {
      console.log(Element);
      Element.nativeElement.innerText="Text is changed by changeText Directive. ";
   }
}

上記のファイルには、 ChangeTextDirective というクラスと、必須の ElementRef 型の要素を受け取るコンストラクターがあります。要素には、 Change Text ディレクティブが適用されるすべての詳細が含まれます。

*console.log* 要素を追加しました。 同じの出力は、ブラウザコンソールで確認できます。 要素のテキストも上記のように変更されます。

これで、ブラウザには次のように表示されます。

ChangeTextディレクティブ

角度4-パイプ

この章では、Angular 4のパイプとは何かを説明します。パイプは以前、Angular1ではフィルターと呼ばれ、Angular 2および4ではパイプと呼ばれていました。

|文字はデータの変換に使用されます。以下は同じものの構文です

{{ Welcome to Angular 4 | lowercase}}

整数、文字列、配列、日付を入力として受け取り、 | で区切って、必要に応じて形式に変換し、ブラウザに表示します。

パイプを使用したいくつかの例を考えてみましょう。

ここでは、大文字で指定されたテキストを表示します。これは、次のようにパイプを使用して行うことができます-

*app.component.ts* ファイルで、タイトル変数を定義しました-

app.component.ts

import { Component } from '@angular/core';
@Component({
   selector: 'app-root',
   templateUrl: './app.componentl',
   styleUrls: ['./app.component.css']
})

export class AppComponent {
   title = 'Angular 4 Project!';
}

次のコード行は、 app.componentl ファイルに入ります。

<b>{{title | uppercase}}</b><br/>
<b>{{title | lowercase}}</b>

次のスクリーンショットに示すようにブラウザが表示されます-

大文字小文字

Angular 4はいくつかの組み込みパイプを提供します。パイプは以下のとおりです-

小文字パイプ
大文字パイプ
デートパイプ
通貨パイプ
ジョンソンパイプ
パーセントパイプ
デシマルパイプ
スライスパイプ

小文字と大文字のパイプはすでに見ました。他のパイプがどのように機能するかを見てみましょう。

次のコード行は、 app.component.ts ファイルで必要な変数を定義するのに役立ちます-

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

@Component({
   selector: 'app-root',
   templateUrl: './app.componentl',
   styleUrls: ['./app.component.css']
})

export class AppComponent {
   title = 'Angular 4 Project!';
   todaydate = new Date();
   jsonval = {name:'Rox', age:'25', address:{a1:'Mumbai', a2:'Karnataka'}};
   months = ["Jan", "Feb", "Mar", "April", "May", "Jun",
             "July", "Aug", "Sept", "Oct", "Nov", "Dec"];
}

*app.componentl* ファイルでパイプを使用します。

<!--The content below is only a placeholder and can be replaced.-->
<div style = "width:100%;">
   <div style = "width:40%;float:left;border:solid 1px black;">
      <h1>Uppercase Pipe</h1>
      <b>{{title | uppercase}}</b><br/>

      <h1>Lowercase Pipe</h1>
      <b>{{title | lowercase}}</b>

      <h1>Currency Pipe</h1>
      <b>{{6589.23 | currency:"USD"}}</b><br/>
      <b>{{6589.23 | currency:"USD":true}}</b>//Boolean true is used to get the sign of the currency.

      <h1>Date pipe</h1>
      <b>{{todaydate | date:'d/M/y'}}</b><br/>
      <b>{{todaydate | date:'shortTime'}}</b>

      <h1>Decimal Pipe</h1>
      <b>{{ 454.78787814 | number: '3.4-4' }}</b>//3 is for main integer, 4 -4 are for integers to be displayed.
   </div>

   <div style = "width:40%;float:left;border:solid 1px black;">
      <h1>Json Pipe</h1>
      <b>{{ jsonval | json }}</b>
      <h1>Percent Pipe</h1>
      <b>{{00.54565 | percent}}</b>
      <h1>Slice Pipe</h1>
      <b>{{months | slice:2:6}}</b>
     //here 2 and 6 refers to the start and the end index
   </div>
</div>

次のスクリーンショットは、各パイプの出力を示しています-

各パイプの出力

各パイプの出力-2

カスタムパイプを作成する方法？

カスタムパイプを作成するために、新しい ts ファイルを作成しました。ここでは、 sqrt カスタムパイプを作成します。私たちはファイルに同じ名前を付けており、次のように見えます-

app.sqrt.ts

import {Pipe, PipeTransform} from '@angular/core';
@Pipe ({
   name : 'sqrt'
})
export class SqrtPipe implements PipeTransform {
   transform(val : number) : number {
      return Math.sqrt(val);
   }
}

カスタムパイプを作成するには、Angular/coreからPipe and Pipe Transformをインポートする必要があります。 @Pipeディレクティブで、パイプに名前を付ける必要があります。これは、lファイルで使用されます。 sqrtパイプを作成しているので、sqrtという名前を付けます。

さらに進むと、クラスを作成する必要があり、クラス名は SqrtPipe です。このクラスは PipeTransform を実装します。

クラスで定義された変換メソッドは、引数として数値を取り、平方根を取った後に数値を返します。

新しいファイルを作成したので、同じものを* app.module.ts。*に追加する必要があります。これは次のように行われます-

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

import { NewCmpComponent } from './new-cmp/new-cmp.component';
import { ChangeTextDirective } from './change-text.directive';
import { SqrtPipe } from './app.sqrt';

@NgModule({
   declarations: [
      SqrtPipe,
      AppComponent,
      NewCmpComponent,
      ChangeTextDirective
   ],

   imports: [
      BrowserModule
   ],
   providers: [],
   bootstrap: [AppComponent]
})
export class AppModule { }

*app.sqrt.ts* クラスを作成しました。 *app.module.ts* に同じものをインポートし、ファイルのパスを指定する必要があります。 また、上記のように宣言に含める必要があります。

*app.componentl* ファイルでsqrtパイプに対して行われた呼び出しを見てみましょう。

<h1>Custom Pipe</h1>
<b>Square root of 25 is: {{25 | sqrt}}</b>
<br/>
<b>Square root of 729 is: {{729 | sqrt}}</b>

出力は次のようになります-

Custome Pipe

Angular 4-ルーティング

ルーティングとは、基本的にページ間を移動することを意味します。新しいページへのリンクを含む多くのサイトを見てきました。これはルーティングを使用して実現できます。ここで参照しているページは、コンポーネントの形式になります。コンポーネントの作成方法はすでに説明しました。コンポーネントを作成して、ルーティングを使用する方法を見てみましょう。

メインの親コンポーネント app.module.ts では、次に示すようにルーターモジュールを含める必要があります-

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule} from '@angular/router';

import { AppComponent } from './app.component';
import { NewCmpComponent } from './new-cmp/new-cmp.component';
import { ChangeTextDirective } from './change-text.directive';
import { SqrtPipe } from './app.sqrt';
@NgModule({
   declarations: [
      SqrtPipe,
      AppComponent,
      NewCmpComponent,
      ChangeTextDirective
   ],
   imports: [
      BrowserModule,
      RouterModule.forRoot([
         {
            path: 'new-cmp',
            component: NewCmpComponent
         }
      ])
   ],
   providers: [],
   bootstrap: [AppComponent]
})
export class AppModule { }

「@ angular/router」から\ {RouterModule}をインポートします

ここでは、RouterModuleはangular/routerからインポートされます。モジュールは以下に示すようにインポートに含まれています-

RouterModule.forRoot([
   {
      path: 'new-cmp',
      component: NewCmpComponent
   }
])

RouterModuleは forRoot を参照します。これは入力を配列として受け取り、その配列にはパスとコンポーネントのオブジェクトが含まれます。パスはルーターの名前、コンポーネントはクラスの名前、つまり作成されたコンポーネントです。

コンポーネント作成ファイルを見てみましょう-

New-cmp.component.ts

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

@Component({
   selector: 'app-new-cmp',
   templateUrl: './new-cmp.componentl',
   styleUrls: ['./new-cmp.component.css']
})

export class NewCmpComponent implements OnInit {
   newcomponent = "Entered in new component created";
   constructor() {}
   ngOnInit() { }
}

強調表示されたクラスは、メインモジュールのインポートで言及されています。

新しいcmp.componentl

<p>
   {{newcomponent}}
</p>

<p>
   new-cmp works!
</p>

ここで、必要なときに表示される、またはメインモジュールからクリックされるHTMLファイルの上記のコンテンツが必要です。このため、 app.componentl にルーターの詳細を追加する必要があります。

<h1>Custom Pipe</h1>
<b>Square root of 25 is: {{25 | sqrt}}</b><br/>
<b>Square root of 729 is: {{729 | sqrt}}</b>

<br/>
<br/>
<br/>
<a routerLink = "new-cmp">New component</a>

<br/>
<br/>
<router-outlet></router-outlet>

上記のコードでは、アンカーリンクタグを作成し、routerLinkに*“ new-cmp” を指定しています。これは、 *app.module.ts でパスと呼ばれます。

ユーザーが[新しいコンポーネント]をクリックすると、ページにコンテンツが表示されます。このために、次のタグが必要です- <router-outlet> </router-outlet> 。

上記のタグにより、ユーザーが*新しいコンポーネント*をクリックすると、 new-cmp.componentl のコンテンツがページに表示されます。

出力がブラウザにどのように表示されるかを見てみましょう。

Custome Pipe-1

ユーザーが[新しいコンポーネント]をクリックすると、ブラウザーに次のように表示されます。

Custom Pipe-2

URLには http：//localhost：4200/new-cmp が含まれています。ここで、new-cmpは、 app.module.ts および app.componentl のルーターリンクで指定されたパスである元のURLに追加されます。

ユーザーが[新しいコンポーネント]をクリックしても、ページは更新されず、コンテンツは再読み込みなしでユーザーに表示されます。クリックすると、サイトコードの特定の部分のみがリロードされます。この機能は、ページに重いコンテンツがあり、ユーザーの操作に基づいてロードする必要がある場合に役立ちます。この機能は、ページがリロードされないため、優れたユーザーエクスペリエンスも提供します。

Angular 4-サービス

この章では、Angular 4のサービスについて説明します。

ページのどこでもコードを使用する必要がある場合があります。コンポーネント間で共有する必要があるデータ接続などに使用できます。サービスはそれを達成するのに役立ちます。サービスを使用すると、プロジェクト全体の他のコンポーネントのメソッドとプロパティにアクセスできます。

サービスを作成するには、コマンドラインを使用する必要があります。同じためのコマンドは-

C:\projectA4\Angular 4-app>ng g service myservice
installing service
   create src\app\myservice.service.spec.ts
   create src\app\myservice.service.ts
   WARNING Service is generated but not provided, it must be provided to be used

   C:\projectA4\Angular 4-app>

ファイルは次のようにアプリフォルダに作成されます-

アプリフォルダ内のファイル

以下は、下部に作成されたファイル- myservice.service.specs.ts および myservice.service.ts です。

myservice.service.ts

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

@Injectable()
export class MyserviceService {
   constructor() { }
}

ここでは、Injectableモジュールが @ angular/core からインポートされます。 @ Injectable メソッドと MyserviceService というクラスが含まれています。このクラスでサービス関数を作成します。

新しいサービスを作成する前に、メインの親 app.module.ts で作成されたサービスを含める必要があります。

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

import { MyserviceService } from './myservice.service';
import { NewCmpComponent } from './new-cmp/new-cmp.component';
import { ChangeTextDirective } from './change-text.directive';
import { SqrtPipe } from './app.sqrt';

@NgModule({
   declarations: [
      SqrtPipe,
      AppComponent,
      NewCmpComponent,
      ChangeTextDirective
   ],
   imports: [
      BrowserModule,
      RouterModule.forRoot([
         {
            path: 'new-cmp',
            component: NewCmpComponent
         }
      ])
   ],
   providers: [MyserviceService],
   bootstrap: [AppComponent]
})

export class AppModule { }

クラス名を使用してサービスをインポートし、同じクラスがプロバイダーで使用されています。ここで、サービスクラスに戻り、サービス関数を作成しましょう。

サービスクラスでは、今日の日付を表示する関数を作成します。メインの親コンポーネント app.component.ts と、前の章で作成した新しいコンポーネント new-cmp.component.ts で同じ関数を使用できます。

ここで、関数がサービスでどのように見えるか、コンポーネントでどのように使用するかを見てみましょう。

import { Injectable } from '@angular/core';
@Injectable()
export class MyserviceService {
   constructor() { }
   showTodayDate() {
      let ndate = new Date();
      return ndate;
   }
}

上記のサービスファイルでは、関数 showTodayDate を作成しました。次に、作成された新しいDate（）を返します。コンポーネントクラスでこの関数にアクセスする方法を見てみましょう。

app.component.ts

import { Component } from '@angular/core';
import { MyserviceService } from './myservice.service';

@Component({
   selector: 'app-root',
   templateUrl: './app.componentl',
   styleUrls: ['./app.component.css']
})

export class AppComponent {
   title = 'Angular 4 Project!';
   todaydate;
   constructor(private myservice: MyserviceService) {}
   ngOnInit() {
      this.todaydate = this.myservice.showTodayDate();
   }
}

*ngOnInit* 関数は、作成されたコンポーネントでデフォルトで呼び出されます。 上記のように、サービスから日付が取得されます。 サービスの詳細を取得するには、最初にコンポーネント *ts* ファイルにサービスを含める必要があります。

以下に示すように、 l ファイルに日付を表示します-

{{todaydate}}
<app-new-cmp></app-new-cmp>
//data to be displayed to user from the new component class.

作成された新しいコンポーネントでサービスを使用する方法を見てみましょう。

import { Component, OnInit } from '@angular/core';
import { MyserviceService } from './../myservice.service';

@Component({
   selector: 'app-new-cmp',
   templateUrl: './new-cmp.componentl',
   styleUrls: ['./new-cmp.component.css']
})

export class NewCmpComponent implements OnInit {
   todaydate;
   newcomponent = "Entered in new component created";
   constructor(private myservice: MyserviceService) {}

   ngOnInit() {
      this.todaydate = this.myservice.showTodayDate();
   }
}

作成した新しいコンポーネントでは、最初に必要なサービスをインポートし、そのサービスのメソッドとプロパティにアクセスする必要があります。ハイライトされたコードをご覧ください。今日の日付は、次のようにコンポーネントのHTMLに表示されます-

<p>
   {{newcomponent}}
</p>
<p>
   Today's Date : {{todaydate}}
</p>

新しいコンポーネントのセレクターは app.componentl ファイルで使用されます。上記のHTMLファイルの内容は、以下に示すようにブラウザに表示されます-

作成された新しいコンポーネントの出力

コンポーネントのサービスのプロパティを変更すると、他のコンポーネントでも同じことが変更されます。これがどのように機能するかを見てみましょう。

サービスで1つの変数を定義し、それを親および新しいコンポーネントで使用します。親コンポーネントのプロパティを再度変更し、新しいコンポーネントで同じプロパティが変更されたかどうかを確認します。

*myservice.service.ts* では、プロパティを作成し、他の親および新しいコンポーネントで同じプロパティを使用しています。

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

@Injectable()
export class MyserviceService {
   serviceproperty = "Service Created";
   constructor() { }
   showTodayDate() {
      let ndate = new Date();
      return ndate;
   }
}

他のコンポーネントで serviceproperty 変数を使用してみましょう。 app.component.ts では、次のように変数にアクセスしています-

import { Component } from '@angular/core';
import { MyserviceService } from './myservice.service';
@Component({
   selector: 'app-root',
   templateUrl: './app.componentl',
   styleUrls: ['./app.component.css']
})

export class AppComponent {
   title = 'Angular 4 Project!';
   todaydate;
   componentproperty;
   constructor(private myservice: MyserviceService) {}
   ngOnInit() {
      this.todaydate = this.myservice.showTodayDate();
      console.log(this.myservice.serviceproperty);
      this.myservice.serviceproperty = "component created";//value is changed.
      this.componentproperty = this.myservice.serviceproperty;
   }
}

変数を取得して、console.logを操作します。次の行では、変数の値を「 component created 」に変更します。 new-cmp.component.ts でも同じことを行います。

import { Component, OnInit } from '@angular/core';
import { MyserviceService } from './../myservice.service';

@Component({
   selector: 'app-new-cmp',
   templateUrl: './new-cmp.componentl',
   styleUrls: ['./new-cmp.component.css']
})

export class NewCmpComponent implements OnInit {
   todaydate;
   newcomponentproperty;
   newcomponent = "Entered in newcomponent";
   constructor(private myservice: MyserviceService) {}
   ngOnInit() {
      this.todaydate = this.myservice.showTodayDate();
      this.newcomponentproperty = this.myservice.serviceproperty;
   }
}

上記のコンポーネントでは、何も変更せず、プロパティをコンポーネントプロパティに直接割り当てています。

ブラウザで実行すると、 app.component.ts で値が変更され、 new-cmp.component.ts でも同じ値が表示されるため、サービスプロパティが変更されます。

また、変更する前にコンソールで値を確認してください。

コンソール出力

Angular 4-Httpサービス

Httpサービスは、外部データの取得、投稿などに役立ちます。 httpサービスを利用するには、httpモジュールをインポートする必要があります。 httpサービスを利用する方法を理解するための例を考えてみましょう。

httpサービスの使用を開始するには、以下に示すように app.module.ts にモジュールをインポートする必要があります-

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

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

強調表示されたコードが表示されている場合、@ angular/httpからHttpModuleをインポートしました。インポート配列にも同じものが追加されています。

*app.component.ts* でhttpサービスを使用してみましょう。

import { Component } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';

@Component({
   selector: 'app-root',
   templateUrl: './app.componentl',
   styleUrls: ['./app.component.css']
})

export class AppComponent {
   constructor(private http: Http) { }
   ngOnInit() {
      this.http.get("http://jsonplaceholder.typicode.com/users").
      map((response) ⇒ response.json()).
      subscribe((data) ⇒ console.log(data))
   }
}

上で強調表示されているコードを理解しましょう。次のように行われているサービスを利用するためにhttpをインポートする必要があります-

import { Http } from '@angular/http';

クラス AppComponent では、コンストラクターが作成され、Http型のプライベート変数httpが作成されます。データを取得するには、httpで利用可能な get API を次のように使用する必要があります

this.http.get();

コードに示されているように、パラメーターとしてURLを取得する必要があります。

テストURL-https://jsonplaceholder.typicode.com/usersを使用して、jsonデータを取得します。フェッチされたurlデータマップで2つの操作が実行され、サブスクライブされます。 Mapメソッドは、データをJSON形式に変換するのに役立ちます。マップを使用するには、以下に示すように同じものをインポートする必要があります-

import 'rxjs/add/operator/map';

マップが完了すると、サブスクライブはブラウザに表示されるようにコンソールに出力を記録します-

マップのコンソール出力

表示される場合、jsonオブジェクトがコンソールに表示されます。オブジェクトはブラウザにも表示できます。

ブラウザに表示されるオブジェクトについて、 app.componentl と app.component.ts のコードを次のように更新します-

import { Component } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';

@Component({
   selector: 'app-root',
   templateUrl: './app.componentl',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   constructor(private http: Http) { }
   httpdata;
   ngOnInit() {
      this.http.get("http://jsonplaceholder.typicode.com/users").
      map(
         (response) ⇒ response.json()
      ).
      subscribe(
         (data) ⇒ {this.displaydata(data);}
      )
   }
   displaydata(data) {this.httpdata = data;}
}

*app.component.ts* では、subscribeメソッドを使用して、表示データメソッドを呼び出し、取得したデータをパラメーターとして渡します。

表示データメソッドでは、データを変数httpdataに格納します。データは、このhttpdata変数に対して for を使用してブラウザに表示されます。これは app.componentl ファイルで行われます。

<ul *ngFor = "let data of httpdata">
   <li>Name : {{data.name}} Address: {{data.address.city}}</li>
</ul>

jsonオブジェクトは次のとおりです-

{
   "id": 1,
   "name": "Leanne Graham",
   "username": "Bret",
   "email": "Sincere@april.biz",

   "address": {
      "street": "Kulas Light",
      "suite": "Apt. 556",
      "city": "Gwenborough",
      "zipcode": "92998-3874",
      "geo": {
         "lat": "-37.3159",
         "lng": "81.1496"
      }
   },

   "phone": "1-770-736-8031 x56442",
   "website": "hildegard.org",
   "company": {
      "name": "Romaguera-Crona",
      "catchPhrase": "Multi-layered client-server neural-net",
      "bs": "harness real-time e-markets"
   }
}

オブジェクトには、id、name、username、email、addressなどのプロパティがあり、内部にはstreet、cityなどがあります。電話、ウェブサイト、会社に関するその他の詳細。 for ループを使用して、 app.componentl ファイルに示すように、名前と都市の詳細をブラウザーに表示します。

これは、ディスプレイがブラウザに表示される方法です-

For-Loop Name City Detailsの使用

ここで、特定のデータに基づいてフィルタリングする検索パラメーターを追加しましょう。渡された検索パラメーターに基づいてデータを取得する必要があります。

*app.componentl* および *app.component.ts* ファイルで行われた変更は次のとおりです-

app.component.ts

import { Component } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';

@Component({
   selector: 'app-root',
   templateUrl: './app.componentl',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   title = 'app';
   searchparam = 2;
   jsondata;
   name;
   constructor(private http: Http) { }
   ngOnInit() {
      this.http.get("http://jsonplaceholder.typicode.com/users?id="+this.searchparam).
      map(
         (response) ⇒ response.json()
      ).
      subscribe((data) ⇒ this.converttoarray(data))
   }
   converttoarray(data) {
      console.log(data);
      this.name = data[0].name;
   }
}

*get api* の場合、検索パラメーターid = this.searchparamを追加します。 searchparamは2です。 jsonファイルの *id = 2* の詳細が必要です。

app.componentl

{{name}}

これは、ブラウザが表示される方法です-

エルヴィン・ハウエル

httpから受信したデータをブラウザでコンソールしました。同じことがブラウザコンソールに表示されます。 id = 2 のjsonからの名前がブラウザーに表示されます。

Angular 4-フォーム

この章では、Angular 4でフォームがどのように使用されるかを見ていきます。フォームを操作する2つの方法-テンプレート駆動型とモデル駆動型について説明します。

テンプレート駆動型フォーム

テンプレート駆動フォームでは、ほとんどの作業はテンプレートで行われます。モデル駆動型のフォームでは、ほとんどの作業はコンポーネントクラスで行われます。

次に、テンプレート駆動型フォームでの作業を検討してみましょう。簡単なログインフォームを作成し、メールID、パスワードを追加して、フォームにボタンを送信します。開始するには、次のように app.module.ts で行われる @ angular/core からFormsModuleにインポートする必要があります-

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule} from '@angular/router';

import { HttpModule } from '@angular/http';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';

import { MyserviceService } from './myservice.service';
import { NewCmpComponent } from './new-cmp/new-cmp.component';
import { ChangeTextDirective } from './change-text.directive';
import { SqrtPipe } from './app.sqrt';

@NgModule({
   declarations: [
      SqrtPipe,
      AppComponent,
      NewCmpComponent,
      ChangeTextDirective
   ],
   imports: [
      BrowserModule,
      HttpModule,
      FormsModule,
      RouterModule.forRoot([
         {path: 'new-cmp',component: NewCmpComponent}
      ])
   ],
   providers: [MyserviceService],
   bootstrap: [AppComponent]
})

export class AppModule { }

したがって、 app.module.ts でFormsModuleをインポートし、強調表示されたコードに示すように、インポート配列に同じものが追加されます。

*app.componentl* ファイルにフォームを作成しましょう。

<form #userlogin = "ngForm" (ngSubmit) = "onClickSubmit(userlogin.value)" >
   <input type = "text" name = "emailid" placeholder = "emailid" ngModel>
   <br/>
   <input type = "password" name = "passwd" placeholder = "passwd" ngModel>
   <br/>
   <input type = "submit" value = "submit">
</form>

電子メールID、パスワード、および送信ボタンを持つ入力タグを持つ単純なフォームを作成しました。タイプ、名前、プレースホルダーを割り当てました。

テンプレート駆動フォームでは、 ngModel ディレクティブと name 属性を追加して、モデルフォームコントロールを作成する必要があります。したがって、Angularにフォームのデータにアクセスさせたい場合は、上記のようにそのタグにngModelを追加します。ここで、emailidとpasswdを読み取る必要がある場合は、ngModelを追加する必要があります。

ご覧の場合、ngFormも*＃userlogin に追加しています。 *ngForm ディレクティブは、作成したフォームテンプレートに追加する必要があります。また、関数 onClickSubmit を追加し、それに userlogin.value を割り当てました。

*app.component.ts* に関数を作成し、フォームに入力された値を取得しましょう。

import { Component } from '@angular/core';
import { MyserviceService } from './myservice.service';

@Component({
   selector: 'app-root',
   templateUrl: './app.componentl',
   styleUrls: ['./app.component.css']
})

export class AppComponent {
   title = 'Angular 4 Project!';
   todaydate;
   componentproperty;
   constructor(private myservice: MyserviceService) { }
   ngOnInit() {
      this.todaydate = this.myservice.showTodayDate();
   }
   onClickSubmit(data) {
      alert("Entered Email id : " + data.emailid);
   }
}

上記の app.component.ts ファイルでは、onClickSubmit関数を定義しています。フォーム送信ボタンをクリックすると、コントロールは上記の機能になります。

これは、ブラウザが表示される方法です-

onClickSubmit Login

フォームは次のようになります。データを入力して、submit関数に電子メールIDがすでに入力されています。

入力されたログインメール

上のスクリーンショットに示すように、メールIDが下部に表示されます。

モデル駆動型

モデル駆動型フォームでは、@ angular/formsからReactiveFormsModuleをインポートし、インポート配列で同じものを使用する必要があります。

app.module.ts。*に変更があります

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule} from '@angular/router';

import { HttpModule } from '@angular/http';
import { ReactiveFormsModule } from '@angular/forms';
import { AppComponent } from './app.component';

import { MyserviceService } from './myservice.service';
import { NewCmpComponent } from './new-cmp/new-cmp.component';
import { ChangeTextDirective } from './change-text.directive';
import { SqrtPipe } from './app.sqrt';

@NgModule({
   declarations: [
      SqrtPipe,
      AppComponent,
      NewCmpComponent,
      ChangeTextDirective
   ],
   imports: [
      BrowserModule,
      HttpModule,
      ReactiveFormsModule,
      RouterModule.forRoot([
         {
            path: 'new-cmp',
            component: NewCmpComponent
         }
      ])
   ],
   providers: [MyserviceService],
   bootstrap: [AppComponent]
})
export class AppModule { }

*app.component.ts* では、モデル駆動型フォームのいくつかのモジュールをインポートする必要があります。 たとえば、 *import \ {FormGroup、FormControl} from '@ angular/forms'* 。

import { Component } from '@angular/core';
import { MyserviceService } from './myservice.service';
import { FormGroup, FormControl } from '@angular/forms';

@Component({
   selector: 'app-root',
   templateUrl: './app.componentl',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   title = 'Angular 4 Project!';
   todaydate;
   componentproperty;
   emailid;
   formdata;
   constructor(private myservice: MyserviceService) { }
   ngOnInit() {
      this.todaydate = this.myservice.showTodayDate();
      this.formdata = new FormGroup({
         emailid: new FormControl("angular@gmail.com"),
         passwd: new FormControl("abcd1234")
      });
   }
   onClickSubmit(data) {this.emailid = data.emailid;}
}

変数formdataはクラスの開始時に初期化され、上記のようにFormGroupで初期化されます。変数emailidおよびpasswdは、フォームに表示されるデフォルト値で初期化されます。必要に応じて空白にしておくことができます。

これにより、フォームUIで値が表示されます。

フォームUI

formdataを使用してフォームの値を初期化しました。これをUI app.componentl の形式で使用する必要があります。

<div>
   <form [formGroup]="formdata" (ngSubmit) = "onClickSubmit(formdata.value)" >
      <input type="text" class="fortextbox" name="emailid" placeholder="emailid"
         formControlName="emailid">
      <br/>

      <input type="password" class="fortextbox" name="passwd"
         placeholder="passwd" formControlName="passwd">
      <br/>

      <input type="submit" class="forsubmit" value="Log In">
   </form>
</div>
<p>
   Email entered is : {{emailid}}
</p>

lファイルでは、フォームの角括弧でformGroupを使用しています。たとえば、[formGroup] =” formdata”などです。送信時に、関数は onClickSubmit と呼ばれ、 formdata.value が渡されます。

入力タグ formControlName が使用されます。 app.component.ts ファイルで使用した値が与えられます。

[送信]をクリックすると、コントロールは app.component.ts ファイルで定義されている関数 onClickSubmit に渡されます。

スクリーンショットonClickSubmitイベント

[ログイン]をクリックすると、上記のスクリーンショットに示すように値が表示されます。

フォーム検証

次に、モデル駆動型フォームを使用したフォーム検証について説明します。組み込みのフォーム検証を使用することも、カスタム検証アプローチを使用することもできます。フォームで両方のアプローチを使用します。前のセクションで作成したのと同じ例を続けます。 Angular 4では、以下に示すように @ angular/forms からバリデーターをインポートする必要があります-

import { FormGroup, FormControl, Validators} from '@angular/forms'

Angularには、必須フィールド、minlength、maxlength *、 *pattern などのバリデーターが組み込まれています。これらはValidatorsモジュールを使用してアクセスします。

特定のフィールドが必須かどうかをAngularに伝えるために必要なバリデータまたはバリデータの配列を追加するだけです。

入力テキストボックスの1つ、つまり電子メールIDで同じことを試してみましょう。電子メールIDについては、次の検証パラメータを追加しました-

必須
パターンマッチング

これは、コードが app.component.ts で検証を受ける方法です。

import { Component } from '@angular/core';
import { FormGroup, FormControl, Validators} from '@angular/forms';

@Component({
   selector: 'app-root',
   templateUrl: './app.componentl',
   styleUrls: ['./app.component.css']
})

export class AppComponent {
   title = 'Angular 4 Project!';
   todaydate;
   componentproperty;
   emailid;
   formdata;
   ngOnInit() {
      this.formdata = new FormGroup({
         emailid: new FormControl("", Validators.compose([
            Validators.required,
            Validators.pattern("[^ @]*@[^ @]*")
         ])),
         passwd: new FormControl("")
      });
   }
   onClickSubmit(data) {this.emailid = data.emailid;}
}

*Validators.compose* では、入力フィールドで検証するもののリストを追加できます。 現在、有効なメールのみを取得するために *required* および *pattern matching* パラメーターを追加しました。

*app.componentl* では、フォーム入力のいずれかが無効な場合、送信ボタンは無効になります。 これは次のように行われます-

<div>
   <form [formGroup] = "formdata" (ngSubmit) = "onClickSubmit(formdata.value)" >
      <input type = "text" class = "fortextbox" name = "emailid" placeholder = "emailid"
         formControlName = "emailid">
      <br/>
      <input type = "password" class = "fortextbox" name = "passwd"
         placeholder = "passwd" formControlName = "passwd">
      <br/>
      <input type = "submit" [disabled] = "!formdata.valid" class = "forsubmit"
         value = "Log In">
   </form>
</div>

<p>
   Email entered is : {{emailid}}
</p>

送信ボタンについては、角括弧内に無効化された値を追加しました-*！formdata.valid *です。したがって、formdata.validが有効でない場合、ボタンは無効のままになり、ユーザーは送信できません。

ブラウザでこれがどのように機能するかを見てみましょう-

！formdata.validイベント出力

上記の場合、入力したメールIDは無効であるため、ログインボタンは無効になっています。有効なメールIDを入力して、違いを確認してみましょう。

無効なログインボタン

これで、入力したメールIDは有効です。したがって、ログインボタンが有効になっていることがわかり、ユーザーはそれを送信できるようになります。これにより、入力したメールIDが下部に表示されます。

同じフォームでカスタム検証を試してみましょう。カスタム検証では、独自のカスタム関数を定義し、必要な詳細を追加できます。同じ例が表示されます。

import { Component } from '@angular/core';
import { FormGroup, FormControl, Validators} from '@angular/forms';

@Component({
   selector: 'app-root',
   templateUrl: './app.componentl',
   styleUrls: ['./app.component.css']
})

export class AppComponent {
   title = 'Angular 4 Project!';
   todaydate;
   componentproperty;
   emailid;
   formdata;
   ngOnInit() {
      this.formdata = new FormGroup({
         emailid: new FormControl("", Validators.compose([
            Validators.required,
            Validators.pattern("[^ @]*@[^ @]*")
         ])),
         passwd: new FormControl("", this.passwordvalidation)
      });
   }
   passwordvalidation(formcontrol) {
      if (formcontrol.value.length &lt'; 5) {
         return {"passwd" : true};
      }
   }
   onClickSubmit(data) {this.emailid = data.emailid;}
}

上記の例では、関数 password validation を作成しました。これはformcontrolの前のセクションで使用されています-* passwd：new FormControl（ ""、this.passwordvalidation）*。

作成した関数では、入力した文字の長さが適切かどうかを確認します。文字が5未満の場合、上記のようにpasswdをtrueにして戻ります- return \ {"passwd"：true}; 。文字が5文字以上の場合、有効と見なされ、ログインが有効になります。

これがブラウザでどのように表示されるか見てみましょう-

パスワードに入力された3文字

パスワードに3文字しか入力していないため、ログインは無効になっています。ログインを有効にするには、5文字以上が必要です。有効な文字の長さを入力して確認しましょう。

有効なIDパスワードによりログインが可能

メールIDとパスワードの両方が有効であるため、ログインが有効になります。ログインすると、メールが下部に表示されます。

Angular 4-アニメーション

アニメーションは、html要素間に多くの相互作用を追加します。 Angular2ではアニメーションも利用できました。 Angular 4との違いは、アニメーションはもはや @ angular/core ライブラリの一部ではなく、 app.module.ts にインポートする必要がある別個のパッケージであるということです。

開始するには、次のようにライブラリをインポートする必要があります-

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

以下に示すように、 BrowserAnimationsModule を app.module.ts のインポート配列に追加する必要があります-

app.module.ts

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

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';

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

*app.componentl* に、アニメーション化されるhtml要素を追加しました。

<div>
   <button (click)="animate()">Click Me</button>
   <div [@myanimation] = "state" class="rotate">
      <img src="assets/images/img.png" width="100" height="100">
   </div>
</div>

メインdivには、ボタンと画像を含むdivを追加しました。 animate関数が呼び出されるクリックイベントがあります。 divには、 @ myanimation ディレクティブが追加され、状態として値が指定されます。

アニメーションが定義されている app.component.ts を見てみましょう。

import { Component } from '@angular/core';
import { trigger, state, style, transition, animate } from '@angular/animations';

@Component({
   selector: 'app-root',
   templateUrl: './app.componentl',
   styleUrls: ['./app.component.css'],
   styles:[`
      div{
         margin: 0 auto;
         text-align: center;
         width:200px;
      }
      .rotate{
         width:100px;
         height:100px;
         border:solid 1px red;
      }
   `],
   animations: [
      trigger('myanimation',[
         state('smaller',style({
            transform : 'translateY(100px)'
         })),
         state('larger',style({
            transform : 'translateY(0px)'
         })),
         transition('smaller <=> larger',animate('300ms ease-in'))
      ])
   ]
})

export class AppComponent {
   state: string = "smaller";
   animate() {
      this.state= this.state == 'larger' ? 'smaller' : 'larger';
   }
}

上記のように、.tsファイルで使用されるアニメーション関数をインポートする必要があります。

import { trigger, state, style, transition, animate } from '@angular/animations';

ここでは、@ angular/animationsからトリガー、状態、スタイル、遷移、およびアニメーションをインポートしました。

ここで、アニメーションコンポーネントを@Component（）デコレータに追加します-

animations: [
   trigger('myanimation',[
      state('smaller',style({
         transform : 'translateY(100px)'
      })),
      state('larger',style({
         transform : 'translateY(0px)'
      })),
      transition('smaller <=> larger',animate('300ms ease-in'))
   ])
]

トリガーは、アニメーションの開始を定義します。最初のパラメータは、アニメーションを適用する必要のあるhtmlタグに与えられるアニメーションの名前です。 2番目のパラメーターは、インポートした関数（状態、遷移など）です。

*state* 関数には、要素が遷移するアニメーションステップが含まれます。 現在、2つの状態、より小さいものと大きいものを定義しています。 小さい状態の場合、スタイル* transform：translateY（100px）*および* transform：translateY（100px）*を指定しました。

遷移関数は、アニメーションをhtml要素に追加します。最初の引数は、状態、つまり開始と終了を取ります。 2番目の引数は、アニメーション関数を受け入れます。アニメート機能を使用すると、トランジションの長さ、遅延、および緩和を定義できます。

lファイルを見て、遷移関数がどのように機能するかを見てみましょう

<div>
   <button (click)="animate()">Click Me</button>
   <div [@myanimation] = "state" class="rotate">
      <img src="assets/images/img.png" width="100" height="100">
   </div>
</div>

*@ component* ディレクティブには、divを中央に揃えるスタイルプロパティが追加されています。 同じことを理解するために、次の例を考えてみましょう-

styles:[`
   div{
      margin: 0 auto;
      text-align: center;
      width:200px;
   }
   .rotate{
      width:100px;
      height:100px;
      border:solid 1px red;
   }
`],

ここでは、特殊文字[``]を使用して、html要素にスタイルを追加します（存在する場合）。 divには、app.component.tsファイルで定義されたアニメーション名を指定しました。

ボタンをクリックすると、次のようにapp.component.tsファイルで定義されているアニメーション機能を呼び出します-

export class AppComponent {
   state: string = "smaller";
   animate() {
      this.state= this.state == ‘larger’? 'smaller' : 'larger';
   }
}

状態変数が定義され、デフォルト値が小さくなります。アニメーション機能は、クリック時に状態を変更します。状態が大きい場合、小さい状態に変換されます。小さい場合は、より大きな値に変換されます。

これは、ブラウザ（ http：//localhost：4200/ ）の出力がどのように見えるかです-

Click Me Button

*Click Me* ボタンをクリックすると、次のスクリーンショットに示すように画像の位置が変更されます-

Click Meボタンの画像の位置が変更されました

変換関数は y 方向に適用され、Click Meボタンをクリックすると0から100pxに変更されます。画像は assets/images フォルダーに保存されます。

Angular 4-マテリアル

*Materials* は、プロジェクト用の多くの組み込みモジュールを提供します。 オートコンプリート、日付ピッカー、スライダー、メニュー、グリッド、ツールバーなどの機能は、Angular 4のマテリアルで使用できます。

マテリアルを使用するには、パッケージをインポートする必要があります。 Angular 2にも上記のすべての機能がありますが、@ angular/coreモジュールの一部として利用できます。 Angular 4は、個別のモジュール*@angular/materials.*を作成しました。これにより、ユーザーは必要な材料をインポートできます。

マテリアルの使用を開始するには、マテリアルとcdkの2つのパッケージをインストールする必要があります。マテリアルコンポーネントは、高度な機能のためにアニメーションモジュールに依存しているため、同じためのアニメーションパッケージ、つまり@ angular/animationsが必要です。パッケージは前の章ですでに更新されています。

npm install --save @angular/material @angular/cdk

package.jsonを見てみましょう。 @ angular/material および @ angular/cdk がインストールされます。

{
   "name": "angularstart",
   "version": "0.0.0",
   "license": "MIT",
   "scripts": {
      "ng": "ng",
      "start": "ng serve",
      "build": "ng build",
      "test": "ng test",
      "lint": "ng lint",
      "e2e": "ng e2e"
   },

   "private": true,

   "dependencies": {
      "@angular/animations": "^4.0.0",
      "@angular/cdk": "^2.0.0-beta.8",
      "@angular/common": "^4.0.0",
      "@angular/compiler": "^4.0.0",
      "@angular/core": "^4.0.0",
      "@angular/forms": "^4.0.0",

      "@angular/http": "^4.0.0",
      "@angular/material": "^2.0.0-beta.8",
      "@angular/platform-browser": "^4.0.0",
      "@angular/platform-browser-dynamic": "^4.0.0",
      "@angular/router": "^4.0.0",
      "core-js": "^2.4.1",
      "rxjs": "^5.1.0",
      "zone.js": "^0.8.4"
   },

   "devDependencies": {
      "@angular/cli": "1.2.0",
      "@angular/compiler-cli": "^4.0.0",
      "@angular/language-service": "^4.0.0",
      "@types/jasmine": "~2.5.53",
      "@types/jasminewd2": "~2.0.2",
      "@types/node": "~6.0.60",
      "codelyzer": "~3.0.1",
      "jasmine-core": "~2.6.2",
      "jasmine-spec-reporter": "~4.1.0",

      "karma": "~1.7.0",
      "karma-chrome-launcher": "~2.1.1",
      "karma-cli": "~1.0.1",
      "karma-coverage-istanbul-reporter": "^1.2.1",
      "karma-jasmine": "~1.1.0",
      "karma-jasmine-html-reporter": "^0.2.2",

      "protractor": "~5.1.2",
      "ts-node": "~3.0.4",
      "tslint": "~5.3.2",
      "typescript": "~2.3.3"
   }
}

マテリアルを操作するためにインストールされるパッケージを強調表示しました。

以下に示すように、親モジュール- app.module.ts にモジュールをインポートします。

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

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MdButtonModule, MdMenuModule, MdSidenavModule } from '@angular/material';

import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';

@NgModule({
   declarations: [
      AppComponent
   ],
   imports: [
      BrowserModule,
      BrowserAnimationsModule,
      MdButtonModule,
      MdMenuModule,
      FormsModule,
      MdSidenavModule
   ],
   providers: [],
   bootstrap: [AppComponent]
})
export class AppModule { }

上記のファイルでは、@ angular/materialsから次のモジュールをインポートしました。

import { MdButtonModule, MdMenuModule, MdSidenavModule } from '@angular/material';

そして、以下に示すように、インポート配列でも同じことが使用されます-

imports: [
   BrowserModule,
   BrowserAnimationsModule,
   MdButtonModule,
   MdMenuModule,
   FormsModule,
   MdSidenavModule
]

*app.component.ts* は以下に示すとおりです-

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

@Component({
   selector: 'app-root',
   templateUrl: './app.componentl',
   styleUrls: ['./app.component.css']
})

export class AppComponent {
   myData: Array<any>;
   constructor() {}
}

*app.componentl* にマテリアルを追加してみましょう。

<button md-button [mdMenuTriggerFor]="menu">Menu</button>
<md-menu #menu="mdMenu">
   <button md-menu-item>
      File
   </button>
   <button md-menu-item>
      Save As
   </button>
</md-menu>

<md-sidenav-container class="example-container">
   <md-sidenav #sidenav class="example-sidenav">
      Angular 4
   </md-sidenav>

   <div class="example-sidenav-content">
      <button type="button" md-button  (click)="sidenav.open()">
         Open sidenav
      </button>
   </div>
</md-sidenav-container>

上記のファイルに、MenuとSideNavを追加しました。

メニューを追加するには、 <md-menu> </md-menu> が使用されます。 ファイル*および*名前を付けて保存*アイテムが *md-menu の下のボタンに追加されます。 メニュー*が追加されたメインボタンがあります。同じ参照は、 *[mdMenuTriggerFor] =” menu” を使用し、<md-menu> の＃でメニューを使用することにより、<md-menu>に与えられます。

SideNav

sidenavを追加するには、 <md-sidenav-container> </md-sidenav-container> が必要です。 <md-sidenav> </md-sidenav> は、コンテナに子として追加されます。 *（click）=” sidenav.open（）” *を使用してsidenavをトリガーする別のdivが追加されています。以下は、ブラウザのメニューとサイドナブの表示です-

Sidenavメニューを開く

*opensidenav* をクリックすると、以下に示すようにサイドバーが表示されます-

Open Sidenav Side Bar

メニューをクリックすると、以下に示すように、*ファイル*と*名前を付けて保存*という2つのアイテムが表示されます-

Sidenavショーのアイテムを開くをクリック

材料を使用して日付ピッカーを追加しましょう。日付ピッカーを追加するには、日付ピッカーを表示するために必要なモジュールをインポートする必要があります。

*app.module.ts* では、datepickerについて以下に示すように、次のモジュールをインポートしました。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { MdDatepickerModule, MdInputModule, MdNativeDateModule } from '@angular/material';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';

@NgModule({
   declarations: [
      AppComponent
   ],
   imports: [
      BrowserModule,
      BrowserAnimationsModule,
      FormsModule,
      MdDatepickerModule,
      MdInputModule,
      MdNativeDateModule
   ],
   providers: [],
   bootstrap: [AppComponent]
})
export class AppModule { }

ここでは、* MdDatepickerModule、MdInputModule、および *MdNativeDateModule などのモジュールをインポートしました。

さて、 app.component.ts は次のようになります-

import { Component } from '@angular/core';
@Component({
   selector: 'app-root',
   templateUrl: './app.componentl',
   styleUrls: ['./app.component.css']
})

export class AppComponent {
   myData: Array<any>;
   constructor() {}
}

*app.componentl* は以下のとおりです-

<md-input-container>
   <input mdInput [mdDatepicker]="picker" placeholder="Choose a date">
   <button mdSuffix [mdDatepickerToggle]="picker"></button>
</md-input-container>

<md-datepicker #picker></md-datepicker>

これは、ブラウザで日付ピッカーが表示される方法です-

日付ピッカーが表示されます

角度4-CLI

Angular CLIを使用すると、Angularプロジェクトを簡単に開始できます。 Angular CLIには、プロジェクトを非常に高速に作成して開始するのに役立つコマンドが付属しています。ここで、プロジェクト、コンポーネント、サービスの作成、ポートの変更などに使用できるコマンドを見てみましょう。

Angular CLIを使用するには、システムにインストールする必要があります。同じために次のコマンドを使用してみましょう-

npm install -g @angular/cli

新しいプロジェクトを作成するには、コマンドラインで次のコマンドを実行すると、プロジェクトが作成されます。

ng new PROJECT-NAME
cd PROJECT-NAME
ng serve//

ng serve//はコンパイルされ、ブラウザでプロジェクトの出力を確認できます-

http://localhost:4200/

4200は、新しいプロジェクトの作成時に使用されるデフォルトのポートです。次のコマンドでポートを変更できます-

ng serve --host 0.0.0.0 --port 4201

次の表に、Angular 4プロジェクトでの作業中に必要ないくつかの重要なコマンドを示します。

Component	ng g component new-component
Directive	ng g directive new-directive
Pipe	ng g pipe new-pipe
Service	ng g service new-service
Module	ng g module my-module

新しいモジュール、コンポーネント、またはサービスが作成されるたびに、同じ参照が親モジュール app.module.ts で更新されます。

角度4-例

この章では、Angular 4に関連するいくつかの例を説明します。

まず、 username および password として入力するログインフォームを示す例を作成しました。正しい値を入力すると、内部に入力され、顧客の詳細を入力できる別のフォームが表示されます。さらに、ヘッダー、フッター、ユーザーログイン、メインページの4つのコンポーネントを作成しました。

コンポーネントは、次のコマンドを使用して作成されます-

ng gコンポーネントヘッダー

C:\ngexamples\aexamples>ng g component header
installing component
   create src\app\header\header.component.css
   create src\app\header\header.componentl
   create src\app\header\header.component.spec.ts
   create src\app\header\header.component.ts
   update src\app\app.module.ts

ng gコンポーネントフッター

C:\ngexamples\aexamples>ng g component footer
installing component
   create src\app\footer\footer.component.css
   create src\app\footer\footer.componentl
   create src\app\footer\footer.component.spec.ts
   create src\app\footer\footer.component.ts
   update src\app\app.module.ts

ng gコンポーネントのユーザーログイン

C:\ngexamples\aexamples>ng g component userlogin
installing component
   create src\app\userlogin\userlogin.component.css
   create src\app\userlogin\userlogin.componentl
   create src\app\userlogin\userlogin.component.spec.ts
   create src\app\userlogin\userlogin.component.ts
   update src\app\app.module.ts

ng gコンポーネントのメインページ

C:\ngexamples\aexamples>ng g component mainpage
installing component
   create src\app\mainpage\mainpage.component.css
   create src\app\mainpage\mainpage.componentl
   create src\app\mainpage\mainpage.component.spec.ts
   create src\app\mainpage\mainpage.component.ts
   update src\app\app.module.ts

*app.module.ts* では、親モジュールには作成時に追加されたすべてのコンポーネントがあります。 ファイルは次のようになります-

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';

import { RouterModule, Routes} froms '@angular/router';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import {MdTableModule} from '@angular/material';

import {HttpModule} from "@angular/http";
import {MdInputModule} from '@angular/material';
import { AppComponent } from './app.component';

import { HeaderComponent } from './header/header.component';
import { FooterComponent } from './footer/footer.component';
import { UserloginComponent } from './userlogin/userlogin.component';
import { MainpageComponent } from './mainpage/mainpage.component';

const appRoutes: Routes = [
   {
      path: '',
      component: UserloginComponent
   },
   {
      path: 'app-mainpage',
      component: MainpageComponent
   }
];

@NgModule({
   declarations: [
      AppComponent,
      HeaderComponent,
      FooterComponent,
      UserloginComponent,
      MainpageComponent
   ],

   imports: [
      BrowserModule,
      ReactiveFormsModule,
      RouterModule.forRoot(appRoutes),
      BrowserAnimationsModule,
      HttpModule,
      MdTableModule,
      MdInputModule
   ],

   providers: [],
   bootstrap: [AppComponent]
})
export class AppModule { }

上記で作成したコンポーネントが追加されます-

import { HeaderComponent } from './header/header.component';
import { FooterComponent } from './footer/footer.component';
import { UserloginComponent } from './userlogin/userlogin.component';
import { MainpageComponent } from './mainpage/mainpage.component';

コンポーネントも宣言に追加されます-

declarations: [
   AppComponent,
   HeaderComponent,
   FooterComponent,
   UserloginComponent,
   MainpageComponent
],

親の app.componentl に、ユーザーに表示されるファイルの主要な構造を追加しました。

<div class="mainpage">
   <app-header></app-header>
   <router-outlet></router-outlet>
   <app-footer></app-footer>
</div>

divを作成し、 <app-header> </app-header> 、 <router-outlet> </router-outlet> および <app-footer> </app-footer> を追加しました。

*<router-outlet> </router-outlet>* は、あるページから別のページへのナビゲーションに使用されます。 ここでは、ページはログインフォームであり、成功すると、メインページ、つまり顧客フォームにリダイレクトされます。

最初にログインフォームを取得し、後でmainpage.componentlを取得するには、以下に示すように app.module.ts で変更を行います-

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';

import { RouterModule, Routes} from '@angular/router';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import {MdTableModule} from '@angular/material';

import {HttpModule} from "@angular/http";
import {MdInputModule} from '@angular/material';
import { AppComponent } from './app.component';

import { HeaderComponent } from './header/header.component';
import { FooterComponent } from './footer/footer.component';
import { UserloginComponent } from './userlogin/userlogin.component';
import { MainpageComponent } from './mainpage/mainpage.component';

const appRoutes: Routes = [
   {
      path: '',
      component: UserloginComponent
   },
   {
      path: 'app-mainpage',
      component: MainpageComponent
   }
];

@NgModule({
   declarations: [
      AppComponent,
      HeaderComponent,
      FooterComponent,
      UserloginComponent,
      MainpageComponent
   ],

   imports: [
      BrowserModule,
      ReactiveFormsModule,
      RouterModule.forRoot(appRoutes),
      BrowserAnimationsModule,
      HttpModule,
      MdTableModule,
      MdInputModule
   ],
   providers: [],
   bootstrap: [AppComponent]
})
export class AppModule { }

*RouterModule* と *Routes* を *@ anuglar/router* からインポートしました。 インポートでは、RouterModulesはappRoutesを上記のように定義されたパラメーターとして受け取ります-

const appRoutes: Routes = [
   {
      path: '',
      component: UserloginComponent
   },
   {
      path: 'app-mainpage',
      component: MainpageComponent
   }
];

ルートはコンポーネントの配列を受け取り、デフォルトでuserloginComponentが呼び出されます。

*userlogin.component.ts* で、ルーターをインポートし、次のように条件に基づいてmainpage.componentlに移動しました-

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators} from '@angular/forms';
import { Router} from '@angular/router';

@Component({
   selector: 'app-userlogin',
   templateUrl: './userlogin.componentl',
   styleUrls: ['./userlogin.component.css']
})

export class UserloginComponent implements OnInit {
   formdata;
   constructor(private router: Router) { }
   ngOnInit() {
      this.formdata = new FormGroup({
         uname: new FormControl("", Validators.compose([
            Validators.required,
            Validators.minLength(6)
         ])),
         passwd: new FormControl("", this.passwordvalidation)
      });
   }

   passwordvalidation(formcontrol) {
      if (formcontrol.value.length < 5) {
         return {"passwd" : true};
      }
   }

   onClickSubmit(data) {
      console.log(data.uname);
      if (data.uname=="systemadmin" && data.passwd=="admin123") {
         alert("Login Successful");
         this.router.navigate(['app-mainpage'])
      } else {
         alert("Invalid Login");
         return false;
      }
   }
}

以下は app.component.ts の.tsファイルです。デフォルトの詳細のみが存在します。

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

@Component({
   selector: 'app-root',
   templateUrl: './app.componentl',
   styleUrls: ['./app.component.css']
})
export class AppComponent {title = 'app';}

次に、各コンポーネントファイルの詳細を表示します。まず、ヘッダーコンポーネントを取得します。新しいコンポーネントでは、4つのファイルが作成されます header.component.ts、header.componentl、header.component.css、およびheader.component.spec.ts 。

header.component.ts

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

@Component({
   selector: 'app-header',
   templateUrl: './header.componentl',
   styleUrls: ['./header.component.css']
})

export class HeaderComponent implements OnInit {
   constructor() { }
   ngOnInit() {}
}

header.componentl

<div>
   <hr/>
</div>

cssは追加していません。これにより、header.component.cssファイルが空になります。また、テストケースはここでは考慮されないため、 header.compoent.spec.ts ファイルは空です。

ヘッダーには、水平線を描画します。ロゴやその他の詳細を追加して、ヘッダーをよりクリエイティブに見せることができます。

ここで、フッターコンポーネントの作成を検討しましょう。

フッターコンポーネントの場合、 footer.component.ts、footer.componentl、footer.component.spec.ts、footer.component.css ファイルが作成されます。

footer.component.ts

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

@Component({
   selector: 'app-footer',
   templateUrl: './footer.componentl',
   styleUrls: ['./footer.component.css']
})

export class FooterComponent implements OnInit {
   constructor() { }
   ngOnInit() { }
}

footer.componentl

<hr/>

cssを追加していないため、 footer.component.css ファイルは空です。また、テストケースはここでは考慮されないため、 footer.compoent.spec.ts ファイルは空です。

フッターについては、lファイルに示すように、水平線を描画します。

ここで、userloginコンポーネントがどのように機能するかを見てみましょう。作成されるuserloginコンポーネントの次のファイルは、* userlogin.component.css、userlogin.componentl、userlogin.component.ts、および userlogin.component.spec.ts。*です。

ファイルの詳細は次のとおりです-

userlogin.componentl

<div class="form_container">
   <form [formGroup]="formdata" (ngSubmit) = "onClickSubmit(formdata.value)" >
      <header>Login</header>
      <label>Username <span>*</span></label>
      <input type="text" name="uname" formControlName="uname"/>

      <div class="help">At least 6 character</div>
      <label>Password <span>*</span></label>
      <input type="password" class="fortextbox" name="passwd" formControlName="passwd"/>

      <div class="help">Use upper and lowercase lettes as well</div>
      <button [disabled]="!formdata.valid" value="Login">Login</button>
   </form>
</div>

ここでは、 Username と Password の2つの入力コントロールを持つフォームを作成しました。これはモデル駆動型のフォームアプローチであり、その詳細は第14章-フォームで説明されています。

ユーザー名とパスワードは必須であると考えているため、同じものに対する検証がtsに追加されます。送信ボタンをクリックすると、コントロールはtsファイルで定義されている onClickSubmit に渡されます。

userlogin.component.ts

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators} from '@angular/forms';
import { Router} from '@angular/router';

@Component({
   selector: 'app-userlogin',
   templateUrl: './userlogin.componentl',
   styleUrls: ['./userlogin.component.css']
})

export class UserloginComponent implements OnInit {
   formdata;
   constructor(private router: Router) { }
   ngOnInit() {
      this.formdata = new FormGroup({
         uname: new FormControl("", Validators.compose([
            Validators.required,
            Validators.minLength(6)
         ])),
         passwd: new FormControl("", this.passwordvalidation)
      });
   }
   passwordvalidation(formcontrol) {
      if (formcontrol.value.length < 5) {
         return {"passwd" : true};
      }
   }
   onClickSubmit(data) {
      console.log(data.uname);
      if (data.uname == "systemadmin" && data.passwd == "admin123") {
         alert("Login Successful");
         this.router.navigate(['app-mainpage'])
      }
   }
}

フォーム制御と検証の場合、モジュールは次のようにインポートされます

import { FormGroup, FormControl, Validators} from '@angular/forms';

ユーザーとパスワードが正しい場合、別のコンポーネントに移動するためのルーターが必要です。このため、ルータは以下に示すようにインポートされます-

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

*ngOnInit* では、フォームの検証が行われます。 ユーザー名は6文字を超える必要があり、フィールドは必須です。 同じ条件がパスワードにも適用されます。

[送信]をクリックすると、ユーザー名が systemadmin で、パスワードが admin123 であるかどうかを確認できます。「はい」の場合、「ログイン成功」を示すダイアログボックスが表示され、ルーターはメインページコンポーネントのセレクターであるアプリメインページに移動します。

*userlogin.component.css* ファイルのフォームにCSSが追加されています-

.form_container{
   margin : 0 auto;
   width:600px;
}

form {
   background: white;
   width: 500px;
   box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.7);
   font-family: lato;
   position: relative;
   color: #333;
   border-radius: 10px;
}

form header {
   background: #FF3838;
   padding: 30px 20px;
   color: white;
   font-size: 1.2em;
   font-weight: 600;
   border-radius: 10px 10px 0 0;
}

form label {
   margin-left: 20px;
   display: inline-block;
   margin-top: 30px;
   margin-bottom: 5px;
   position: relative;
}

form label span {
   color: #FF3838;
   font-size: 2em;
   position: absolute;
   left: 2.3em;
   top: -10px;
}
form input {
   display: block;
   width: 50%;
   margin-left: 20px;
   padding: 5px 20px;
   font-size: 1em;
   border-radius: 3px;
   outline: none;
   border: 1px solid #ccc;
}

form .help {
   margin-left: 20px;
   font-size: 0.8em;
   color: #777;
}

form button {
   position: relative;
   margin-top: 30px;
   margin-bottom: 30px;
   left: 50%;
   transform: translate(-50%, 0);
   font-family: inherit;
   color: white;
   background: #FF3838;
   outline: none;
   border: none;
   padding: 5px 15px;
   font-size: 1.3em;
   font-weight: 400;
   border-radius: 3px;
   box-shadow: 0px 0px 10px rgba(51, 51, 51, 0.4);
   cursor: pointer;
   transition: all 0.15s ease-in-out;
}
form button:hover {
   background: #ff5252;
}

現在、 userlogin.component.spec.ts ファイルは空です。テストケースがないためです。

ここで、メインページコンポーネントの機能について説明します。 mainpageコンポーネント用に作成されるファイルは、* mainpage.component.ts、mainpage.componentl、mainpage.component.css、および *mainpage.component.spect.ts です。

mainpage.component.ts

import { Component, OnInit, ViewChild} from '@angular/core';
import { FormGroup, FormControl, Validators} from '@angular/forms';

import {Http, Response, Headers, RequestOptions } from "@angular/http";
import 'rxjs/add/operator/map';

@Component({
   selector: 'app-mainpage',
   templateUrl: './mainpage.componentl',
   styleUrls: ['./mainpage.component.css']
})

export class MainpageComponent implements OnInit {
   formdata;
   cutomerdata;
   constructor(private http: Http) { }
   stateCtrl: FormControl;
   ngOnInit() {
      this.formdata = new FormGroup({
         fname: new FormControl("", Validators.compose([
            Validators.required,
            Validators.minLength(3)
         ])),
         lname: new FormControl("", Validators.compose([
            Validators.required,
            Validators.minLength(3)
         ])),
         address:new FormControl(""),
         phoneno:new FormControl("")
      });
   }
   onClickSubmit(data) {
      document.getElementById("custtable").style.display="";
      this.cutomerdata = [];
      for (var prop in data) {
         this.cutomerdata.push(data[prop]);
      }
      console.log(this.cutomerdata);
   }
}

名、姓、住所、電話番号を含む顧客フォームを作成しました。同じ検証は、 ngOnInit 関数を使用して行われます。 [送信]をクリックすると、コントロールは onClickSubmit 関数に移動します。ここでは、入力された詳細を表示するために使用されるテーブルが表示されます。

customerdataはjsonから配列に変換されるため、テーブルのngForで同じように使用できます。これは、以下に示すようにlファイルで行われます。

mainpage.componentl

<div class="form_container">
   <form [formGroup]="formdata" (ngSubmit) = "onClickSubmit(formdata.value)" >
      <header>Customer Details</header>
      <label>FirstName <span>*</span></label>
      <input type="text" name="fname" formControlName="fname"/>
      <label>LastName <span>*</span></label>

      <input type="text" name="lname" formControlName="lname"/>
      <label>Address <span></span></label>
      <input type="text" name="address" formControlName="address"/>
      <label>Phone No <span></span></label>
      <input type="text" name="phoneno" formControlName="phoneno"/>
      <button [disabled]="!formdata.valid" value="Submit">Submit</button>
   </form>
</div>
<br/>

<div id="custtable" style="display:none;margin:0 auto;">
   <table>
      <tr>
         <td>FirstName</td>
         <td>LastName</td>
         <td>Address</td>
         <td>Phone No</td>
      </tr>
      <tr>
         <td *ngFor="let data of cutomerdata">
            <h5>{{data}}</h5>
         </td>
      </tr>
   </table>
</div>

ここでは、最初のdivに顧客の詳細があり、2番目のdivにテーブルがあり、入力した詳細が表示されます。ユーザーログインと顧客の詳細の表示は以下のとおりです。これは、ログインフォームとヘッダーとフッターのあるページです。

ログインメインページ

詳細を入力すると、表示は次のようになります

ログインメインページ-2

[送信]をクリックすると、ログイン成功を示すダイアログボックスが表示されます。

成功したログインのメインページ

詳細が無効な場合、以下に示すように無効なログインを示すダイアログボックスが表示されます-

無効なログインメインページ

ログインが成功した場合、以下に示すように、顧客の詳細の次のフォームに進みます-

顧客詳細ログインメインページ

詳細を入力して送信すると、下のスクリーンショットに示すように、顧客の詳細が追加されたことを示すダイアログボックスが表示されます-

追加された顧客の詳細

上記のスクリーンショットで[OK]をクリックすると、以下のスクリーンショットに示すように詳細が表示されます-

サブミット後に表示される顧客の詳細

Angular4-quick-guide

Angular 4-概要

なぜAngular4でありAngular3ではないのですか？

ngIf

forループのキーワードとして

アニメーションパッケージ

テンプレート

TypeScript 2.2

パイプタイトルケース

HTTP検索パラメーター

小さくて速いアプリ

Angular 4-環境のセットアップ

ノード番号

Angular 4-プロジェクトのセットアップ

app

資産

環境

favicon.ico

インデックス

main.ts

polyfill.ts

styles.css

test.ts

tsconfig.app.json

tsconfig.spec.json

typings.d.ts

Angular 4-コンポーネント

new-cmp.component.ts

new-cmp.component.ts

Angular 4-モジュール

宣言

インポート

プロバイダ

ブートストラップ

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

例

出力

例

Angular 4-イベントバインディング

app.componentl

Angular 4-テンプレート

app.componentl

app.component.ts

Angular 4-ディレクティブ

コンポーネント指令

構造指令

属性ディレクティブ

カスタムディレクティブを作成する方法は？

app.module.ts

テキストを変更します。 指令

change-text.directive.ts

角度4-パイプ

app.component.ts

カスタムパイプを作成する方法？

app.sqrt.ts

Angular 4-ルーティング

「@ angular/router」から\ {RouterModule}をインポートします

New-cmp.component.ts

新しいcmp.componentl

Angular 4-サービス

myservice.service.ts

app.component.ts

Angular 4-Httpサービス

app.component.ts

app.componentl

Angular 4-フォーム

テンプレート駆動型フォーム

モデル駆動型

フォーム検証

Angular 4-アニメーション

app.module.ts

Angular 4-マテリアル

Menu

SideNav

角度4-CLI

角度4-例

ng gコンポーネントヘッダー

ng gコンポーネントフッター

ng gコンポーネントのユーザーログイン

ng gコンポーネントのメインページ

テキストを変更します。指令