Angular6-quick-guide

提供:Dev Guides
移動先:案内検索

Angular 6-概要

Angularには5つのメジャーリリースがあります。 リリースされた最初のバージョンはAngular 1で、AngularJSとも呼ばれます。 Angular 1の後にAngular 2が続き、Angular 1と​​比較すると多くの変更が加えられました。

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

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

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

Angular 5とその機能

Angular 5は2017年11月にリリースされました。 速度とサイズの目標に従って、Angular 4よりも高速でサイズが小さくなりました。 以下は、Angular 5で導入された機能です。

  • HTTPClient API -HTTPライブラリを非推奨にするためにHTTPClient APIが導入されました。 HTTPClient APIは、HTTPライブラリよりもはるかに速く、安全で、効率的です。
  • 複数のエクスポートエイリアス-移行プロセスを容易にするために、複数のエイリアスを使用してコンポーネントをエクスポートできます。
  • 数値、日付、通貨用の国際化されたパイプ-より良い標準化のために新しいパイプが導入されました。
  • ラムダのサポート-関数の代わりに適切な名前のラムダ式を使用できます。
  • ビルドオプティマイザー-ビルドオプティマイザーが導入されました。 ビルドサイズを最適化し、アプリケーションの速度を向上させます。 Angular CLIはBuild Optimizerを自動的に使用します。
  • 改善されたコンパイラ-Angular 5以降のコンパイラは、コンパイルを高速化するためのインクリメンタルコンパイルをサポートしています。 コンパイラは、TypeScript 2.3以降の新機能であるTypeScriptトランスフォームを使用します。

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

  • 更新されたAngular CLI、コマンドラインインターフェース-以前のバージョンから現在のバージョンに移行するng-updateなどの新しいコマンドが追加されました。 アプリケーションをプログレッシブWebアプリにするためのアプリケーション機能をすばやく追加するng-add。
  • アップデートされたCDK、コンポーネント開発キット-角材ライブラリを必要としないカスタムUI要素の作成をサポートします。 レスポンシブWebデザインレイアウトをサポートします。 ポップアップを作成するためのオーバーレイパッケージをサポートします。
  • *更新されたAngular Material *-ツリーのような階層構造を表すために、新しいツリーコンポーネント、スタイル付きバージョンのmat-treeおよびスタイルなしバージョンのcdk-treeが追加されました。
  • リアクティブJSライブラリであるRxJSの使用
  • Angular Element -Angular ComponentsをWebコンポーネントとして公開し、任意のHTMLページで使用できるようにします。 Angular Elementパッケージを使用すると、ネイティブのカスタム要素を簡単に作成できます。
  • 複数のバリデーター-複数のバリデーターをフォームビルダーに適用できます。
  • サービスのツリーシェーキング-デッドコードを削除するために、サービスにもツリーシェーキングを適用できるようになりました。

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

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

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

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

ノード番号

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

C:\>node -v
v8.11.3

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

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

NodeJSホームページ

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

C:\>npm -v
5.6.0

Angular 6のインストールは、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 6-プロジェクトのセットアップ

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

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

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

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

Angular CLI

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

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

NodeJのダウンロード

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

node -v
v8.11.3

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

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

npm -v
v5.6.0

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

npm install -g @angular/cli//command to install angular 6
ng new Angular 6-app//name of the project
cd my-dream-app
ng serve

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

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

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

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

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

ng -v
     _                      _                 ____ _     ___
   /\   _ __   __ _ _   _| | __ _ _ __    /___| |   |_ _|
  /? \ | '_ \/_` | | | | |/_` | '__|   | |   | |    | |
 /___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
/_/  \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 6.1.3
Node: 8.11.3
OS: win32 x64
Angular:
...

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.7.3
@angular-devkit/core         0.7.3
@angular-devkit/schematics   0.7.3
@schematics/angular          0.7.3
@schematics/update           0.7.3
rxjs                         6.2.2
typescript                   2.9.2

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

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

ng new projectname

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

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

ng new Angular6App
CREATE Angular6App/angular.json (3593 bytes)
CREATE Angular6App/package.json (1317 bytes)
CREATE Angular6App/README.md (1028 bytes)
CREATE Angular6App/tsconfig.json (408 bytes)
CREATE Angular6App/tslint.json (2805 bytes)
CREATE Angular6App/.editorconfig (245 bytes)
CREATE Angular6App/.gitignore (503 bytes)
CREATE Angular6App/src/favicon.ico (5430 bytes)
CREATE Angular6App/src/indexl (298 bytes)
CREATE Angular6App/src/main.ts (370 bytes)
CREATE Angular6App/src/polyfills.ts (3194 bytes)
CREATE Angular6App/src/test.ts (642 bytes)
CREATE Angular6App/src/styles.css (80 bytes)
CREATE Angular6App/src/browserslist (375 bytes)
CREATE Angular6App/src/karma.conf.js (964 bytes)
CREATE Angular6App/src/tsconfig.app.json (170 bytes)
CREATE Angular6App/src/tsconfig.spec.json (256 bytes)
CREATE Angular6App/src/tslint.json (314 bytes)
CREATE Angular6App/src/assets/.gitkeep (0 bytes)
CREATE Angular6App/src/environments/environment.prod.ts (51 bytes)
CREATE Angular6App/src/environments/environment.ts (642 bytes)
CREATE Angular6App/src/app/app.module.ts (314 bytes)
CREATE Angular6App/src/app/app.componentl (1141 bytes)
CREATE Angular6App/src/app/app.component.spec.ts (1010 bytes)
CREATE Angular6App/src/app/app.component.ts (215 bytes)
CREATE Angular6App/src/app/app.component.css (0 bytes)
CREATE Angular6App/e2e/protractor.conf.js (752 bytes)
CREATE Angular6App/e2e/tsconfig.e2e.json (213 bytes)
CREATE Angular6App/e2e/src/app.e2e-spec.ts (307 bytes)
CREATE Angular6App/e2e/src/app.po.ts (208 bytes)

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

Angular 6の操作には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を使用して作成したプロジェクトを取り上げます。

Angular6Appプロジェクト

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

ng serve
*ng serve* コマンドは、アプリケーションをビルドし、Webサーバーを起動します。
* *Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/* *
...
Date: 2018-08-18T11:17:54.745Z
Hash: 0ace6c8a055c58d1734c
Time: 20490ms
chunk {main} main.js, main.js.map (main) 10.7 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 227 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 5.22 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 15.6 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 3.27 MB [initial] [rendered]
i ?wdm?: Compiled successfully.

Webサーバーはポート4200で起動します。 ブラウザーにURL http://localhost:4200/ を入力して、出力を確認します。 次の画面に移動します-

Angular App

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

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

Angular 6プロジェクト

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

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

ng serve --host 0.0.0.0 -port 4205

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

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

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

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

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

"@angular/animations": "^6.1.0",
"@angular/common": "^6.1.0",
"@angular/compiler": "^6.1.0",
"@angular/core": "^6.1.0",
"@angular/forms": "^6.1.0",
"@angular/http": "^6.1.0",
"@angular/platform-browser": "^6.1.0",
"@angular/platform-browser-dynamic": "^6.1.0",
"@angular/router": "^6.1.0",
"core-js": "^2.5.4",
"rxjs": "^6.0.0",
"zone.js": "~0.8.26"

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

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

app

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

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

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

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-b​​rowserからインポートされるインポートの一部です。
*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
         ZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3Ry
         YXRvciAxOS4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9
         uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0i
         TGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4b
         Wxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB
         4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAyNTAgMjUwIiBzdHlsZT0iZW5hY
         mxlLWJhY2tncm91bmQ6bmV3IDAgMCAyNTAgMjUwOyIgeG1sOnNwYWNlPSJwcmV
         zZXJ2ZSI+DQo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPg0KCS5zdDB7ZmlsbDojR
         EQwMDMxO30NCgkuc3Qxe2ZpbGw6I0MzMDAyRjt9DQoJLnN0MntmaWxsOiNGRkZ
         GRkY7fQ0KPC9zdHlsZT4NCjxnPg0KCTxwb2x5Z29uIGNsYXNzPSJzdDAiIHBva
         W50cz0iMTI1LDMwIDEyNSwzMCAxMjUsMzAgMzEuOSw2My4yIDQ2LjEsMTg2LjM
         gMTI1LDIzMCAxMjUsMjMwIDEyNSwyMzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMi
         AJIi8+DQoJPHBvbHlnb24gY2xhc3M9InN0MSIgcG9pbnRzPSIxMjUsMzAgMTI1L
         DUyLjIgMTI1LDUyLjEgMTI1LDE1My40IDEyNSwxNTMuNCAxMjUsMjMwIDEyNSwy
         MzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMiAxMjUsMzAgCSIvPg0KCTxwYXRoIGN
         sYXNzPSJzdDIiIGQ9Ik0xMjUsNTIuMUw2Ni44LDE4Mi42aDBoMjEuN2gwbDExLj
         ctMjkuMmg0OS40bDExLjcsMjkuMmgwaDIxLjdoMEwxMjUsNTIuMUwxMjUsNTIuM
         UwxMjUsNTIuMUwxMjUsNTIuMQ0KCQlMMTI1LDUyLjF6IE0xNDIsMTM1LjRIMTA4b
         DE3LTQwLjlMMTQyLDEzNS40eiIvPg0KPC9nPg0KPC9zdmc+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-b​​rowser-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 6-コンポーネント

Angular 6での開発の大部分は、コンポーネントで行われます。 コンポーネントは基本的に、ブラウザに表示されるコンポーネントの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 generate component new-cmp

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

D:\Node\Angular6App>ng generate component new-cmp
CREATE src/app/new-cmp/new-cmp.componentl (26 bytes)
CREATE src/app/new-cmp/new-cmp.component.spec.ts (629 bytes)
CREATE src/app/new-cmp/new-cmp.component.ts (272 bytes)
CREATE src/app/new-cmp/new-cmp.component.css (0 bytes)
UPDATE src/app/app.module.ts (398 bytes)

次に、ファイル構造を確認してみると、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 6 Application</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 6 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 6-モジュール

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 6-データバインディング

データバインディングは、AngularJS、Angular 2,4から直接利用でき、Angular 6でも利用できるようになりました。 データバインディングには中括弧を使用します-\ {\ {}};このプロセスは補間と呼ばれます。 前の例で、変数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 6 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ステートメントを使用した出力

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

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

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

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 6 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 6 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);
   }
}

コンソールメッセージ「ドロップダウンから月を変更しました」がイベントとともにコンソールに表示されます。

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

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

import { Component } from '@angular/core';
@Component({
   selector: 'app-root',
   templateUrl: './app.componentl',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   title = 'Angular 6 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 6-テンプレート

*Angular 6* は、Angular2で使用される *<template>* の代わりに、Angular 4と同様のタグとして *<ng-template>* を使用します。 Angular 4が *<template>* を *<ng-template>* に変更した理由は、 *<template>* タグとhtml *<template>* 標準タグの間に名前の競合があるためです。 これは完全に廃止される予定です。
*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 6 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 isavailable link:/cgi-bin/printpage.cgi [__ Print]

Angular 6-ディレクティブ

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

コンポーネント指令

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

構造指令

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

属性ディレクティブ

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

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

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

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

ng g directive nameofthedirective
e.g
ng g directive changeText

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

C:\projectA6\Angular6App>ng g directive changeText
CREATE src/app/change-text.directive.spec.ts (241 bytes)
CREATE src/app/change-text.directive.ts (149 bytes)
UPDATE src/app/app.module.ts (486 bytes)

上記のファイル、つまり 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: '[appChangeText]'
})
export class ChangeTextDirective {
   constructor() { }
}

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

*app.componentl* ビューで、次のようにディレクティブを追加しましょう-
<div style = "text-align:center">
   <span appChangeText >Welcome to {{title}}.</span>
</div>

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

change-text.directive.ts

import { Directive, ElementRef} from '@angular/core';
@Directive({
   selector: '[appChangeText]'
})
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ディレクティブ

Angular 6-パイプ

この章では、Angular 6のパイプとは何かについて説明します。 パイプは以前、Angular1ではフィルターと呼ばれ、Angular 2以降ではパイプと呼ばれていました。

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

{{ Welcome to Angular 6 | 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 6 Project!';
}

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

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

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

大文字小文字

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

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

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

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

import { Component } from '@angular/core';
@Component({
   selector: 'app-root',
   templateUrl: './app.componentl',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   title = 'Angular 6 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 6-ルーティング

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

メインの親コンポーネント 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

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

Custome Pipe-2

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

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

Angular 6-サービス

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

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

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

C:\projectA6\Angular6App>ng g service myservice
CREATE src/app/myservice.service.spec.ts (392 bytes)
CREATE src/app/myservice.service.ts (138 bytes)

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

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

以下は、下部に作成されたファイル- 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 6 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 6-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 {map} from 'rxjs/operators';

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

マップのコンソール出力

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

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

import { Component } from '@angular/core';
import { Http } from '@angular/http';
import { map} from 'rxjs/operators';
@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")
      .pipe(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": "[email protected]",

   "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 { map} from 'rxjs/operators';
@Component({
   selector: 'app-root',
   templateUrl: './app.componentl',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   constructor(private http: Http) { }
   httpdata;
   name;
   searchparam = 2;
   ngOnInit() {
      this.http.get("http://jsonplaceholder.typicode.com/users?id="+this.searchparam)
      .pipe(map((response) => response.json()))
      .subscribe((data) => this.displaydata(data));
   }
   displaydata(data) {this.httpdata = data;}
}
*get api* の場合、検索パラメーターid = this.searchparamを追加します。 searchparamは2です。 jsonファイルの *id = 2* の詳細が必要です。

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

エルヴィン・ハウエル

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

Angular 6-Httpクライアント

HttpClientはAngular 6で導入され、外部データの取得、投稿などに役立ちます。 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 { HttpClientModule } from '@angular/common/http';
import { AppComponent } from './app.component';
@NgModule({
   declarations: [
      AppComponent
   ],
   imports: [
      BrowserModule,
      BrowserAnimationsModule,
      HttpClientModule
   ],
   providers: [],
   bootstrap: [AppComponent]
})
export class AppModule { }

強調表示されたコードが表示されている場合、@ angular/common/httpからHttpClientModuleをインポートしており、これもimports配列に追加されています。

*app.component.ts* でhttpクライアントを使用してみましょう。
import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Component({
   selector: 'app-root',
   templateUrl: './app.componentl',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   constructor(private http: HttpClient) { }
   ngOnInit() {
      this.http.get("http://jsonplaceholder.typicode.com/users").
      subscribe((data) ⇒ console.log(data))
   }
}

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

import { HttpClient } from '@angular/common/http';

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

this.http.get();

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

テストURL-https://jsonplaceholder.typicode.com/usersを使用してJSONデータを取得します。 サブスクライブは、ブラウザに表示されるようにコンソールに出力を記録します-

マップのコンソール出力

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

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

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Component({
   selector: 'app-root',
   templateUrl: './app.componentl',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   constructor(private http: HttpClient) { }
   httpdata;
   ngOnInit() {
      this.http.get("http://jsonplaceholder.typicode.com/users")
      .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": "[email protected]",

   "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 { HttpClient } from '@angular/common/http';
@Component({
   selector: 'app-root',
   templateUrl: './app.componentl',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   constructor(private http: HttpClient) { }
   httpdata;
   name;
   searchparam = 2;
   ngOnInit() {
      this.http.get("http://jsonplaceholder.typicode.com/users?id="+this.searchparam)
      .subscribe((data) => this.displaydata(data));
   }
   displaydata(data) {this.httpdata = data;}
}
*get api* の場合、検索パラメーターid = this.searchparamを追加します。 searchparamは2です。 jsonファイルの *id = 2* の詳細が必要です。

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

エルヴィン・ハウエル

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

Angular 6-フォーム

この章では、Angular 6でフォームがどのように使用されるかを見ていきます。 フォームを操作する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 6 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 6 Project!';
   todaydate;
   componentproperty;
   emailid;
   formdata;
   constructor(private myservice: MyserviceService) { }
   ngOnInit() {
      this.todaydate = this.myservice.showTodayDate();
      this.formdata = new FormGroup({
         emailid: new FormControl("[email protected]"),
         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 6 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 6 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 < 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 6-アニメーション

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

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

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

以下に示すように、 BrowserAnimationsModuleapp.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 6-マテリアル

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

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

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

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

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

{
  "name": "angular6-app",
  "version": "0.0.0",
  "scripts": {
      "ng": "ng",
      "start": "ng serve",
      "build": "ng build",
      "test": "ng test",
      "lint": "ng lint",
      "e2e": "ng e2e"
   },
   "private": true, "dependencies": {
      "@angular/animations": "^6.1.0",
      "@angular/cdk": "^6.4.7",
      "@angular/common": "^6.1.0",
      "@angular/compiler": "^6.1.0",
      "@angular/core": "^6.1.0",
      "@angular/forms": "^6.1.0",
      "@angular/http": "^6.1.0",
      "@angular/material": "^6.4.7",
      "@angular/platform-browser": "^6.1.0",
      "@angular/platform-browser-dynamic": "^6.1.0",
      "@angular/router": "^6.1.0",
      "core-js": "^2.5.4",
      "rxjs": "^6.0.0",
      "zone.js": "~0.8.26"
   },
   "devDependencies": {
      "@angular-devkit/build-angular": "~0.7.0",
      "@angular/cli": "~6.1.3",
      "@angular/compiler-cli": "^6.1.0",
      "@angular/language-service": "^6.1.0",
      "@types/jasmine": "~2.8.6",
      "@types/jasminewd2": "~2.0.3",
      "@types/node": "~8.9.4",
      "codelyzer": "~4.2.1",
      "jasmine-core": "~2.99.1",
      "jasmine-spec-reporter": "~4.2.1",
      "karma": "~1.7.1",
      "karma-chrome-launcher": "~2.2.0",
      "karma-coverage-istanbul-reporter": "~2.0.0",
      "karma-jasmine": "~1.1.1",
      "karma-jasmine-html-reporter": "^0.2.2",
      "protractor": "~5.3.0",
      "ts-node": "~5.0.1",
      "tslint": "~5.9.1",
      "typescript": "~2.7.2"
   }
}

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

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

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatButtonModule, MatMenuModule, MatSidenavModule } from '@angular/material';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
@NgModule({
   declarations: [
      AppComponent
   ],
   imports: [
      BrowserModule,
      BrowserAnimationsModule,
      MatButtonModule,
      MatMenuModule,
      FormsModule,
      MatSidenavModule
   ],
   providers: [],
   bootstrap: [AppComponent]
})
export class AppModule { }

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

import { MatButtonModule, MatMenuModule, MatSidenavModule } from '@angular/material';

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

imports: [
   BrowserModule,
   BrowserAnimationsModule,
   MatButtonModule,
   MatMenuModule,
   FormsModule,
   MatSidenavModule
]
*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() {}
}
*styles.css* にmaterial-cssサポートを追加しましょう。
@import "~@angular/material/prebuilt-themes/indigo-pink.css";
*app.componentl* にマテリアルを追加してみましょう。
<button mat-button [matMenuTriggerFor] = "menu">Menu</button>
<mat-menu #menu = "matMenu">
   <button mat-menu-item>
      File
   </button>
   <button mat-menu-item>
      Save As
   </button>
</mat-menu>
<mat-sidenav-container class = "example-container">
   <mat-sidenav #sidenav class = "example-sidenav">
      Angular 6
   </mat-sidenav>
   <div class = "example-sidenav-content">
      <button type = "button" mat-button  (click) = "sidenav.open()">
         Open sidenav
      </button>
   </div>
</mat-sidenav-container>

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

Menu

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

SideNav

sidenavを追加するには、 <mat-sidenav-container> </mat-sidenav-container> が必要です。 <mat-sidenav> </mat-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 { MatDatepickerModule, MatInputModule, MatNativeDateModule } from '@angular/material';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
@NgModule({
   declarations: [
      AppComponent
   ],
   imports: [
      BrowserModule,
      BrowserAnimationsModule,
      FormsModule,
      MatDatepickerModule,
      MatInputModule,
      MatNativeDateModule
   ],
   providers: [],
   bootstrap: [AppComponent]
})
export class AppModule { }

ここでは、* MatDatepickerModule、MatInputModule、、 *MatNativeDateModule などのモジュールをインポートしました。

さて、 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* は以下のとおりです-
<mat-form-field>
   <input matInput [matDatepicker] = "picker" placeholder = "Choose a date">
   <mat-datepicker-toggle matSuffix [for] = "picker"></mat-datepicker-toggle>
   <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

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

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

角度6-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 で更新されます。