Angular7-概要

*Angular 7* はGoogleが所有しており、安定リリースは2018年10月18日に行われました。 これはAngularの最新バージョンです。

以下は、これまでにリリースされたAngularバージョンのリストです-

Version	Released Date
Angular JS	October 2010
Angular 2.0	Sept 2016
Angular 4.0	March 2017
Angular 5.0	November 2017
Angular 6.0	May 2018
Angular 7.0	October 2018

Angularの次の2つの主要なバージョンのリリース日は以下のとおりです-

Version	Released Date
Angular 8.0	March/April 2019
Angular 9.0	September/October 2019

Googleは、Angularのメジャーバージョンを6か月ごとにリリースする予定です。これまでにリリースされたバージョンは後方互換性があり、非常に簡単に新しいバージョンに更新できます。

Angular 7に追加された新機能について説明しましょう。

V7への角度更新

Angular 7は、AngularコアフレームワークであるAngular CLI、Angular Materialsが更新されたメジャーリリースです。あなたがAngular 5または6を使用していて、Angular 7に更新したい場合、以下はAngularの最新バージョンにアプリを更新するコマンドです-

ng update @angular/cli @angular/core

角度CLI

角度CLIを使用してプロジェクトのセットアップを行っている間、それは利用可能な組み込み機能、すなわち、以下に示すようにルーティングとスタイルシートのサポートについてのプロンプトが表示されます-

Angular CLI

アプリケーションのパフォーマンス

Angular 7では、以下に示すようにangle.jsonにバンドル予算が追加されています-

予算

予算*は、Angular CLIに追加された機能で、構成内に制限を設定して、アプリケーションのサイズが制限セット内に収まるようにすることができます。サイズを設定して、制限を超えたときにアプリに警告できるようにすることができます。

角材とCDK

Angular Material/CDKのバージョンは、Angular 7で更新されています。また、CDKには2つの機能が追加されています-仮想スクロール、およびドラッグアンドドロップ。

仮想スクロール

仮想スクロール機能は、ユーザーがスクロールすると次のリストが表示されるように、目に見えるdom要素をユーザーに表示します。これにより、完全なリストが一度にロードされるのではなく、画面上の表示に従ってのみロードされるため、より高速なエクスペリエンスが得られます。

ドラッグアンドドロップ

リストから要素をドラッグアンドドロップして、リスト内の必要な場所に配置できます。新しい機能は非常にスムーズで高速です。

Angular7-環境のセットアップ

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

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

ノード番号

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

Nodejsは8.xまたは10.xより大きく、npmは5.6または6.4より大きくなければなりません。

C:\>node
–v v10.15.1

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

nodejsのホームページは次のとおりです-

Nodejs

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

C:\>npm
–v 6.4.1

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

CLI Angular

コマンドプロンプトに npm install –g @ angular/cli と入力して、システムにangle cliをインストールします。インストールにはしばらく時間がかかりますが、完了したら、以下のコマンドを使用してバージョンを確認できます-

ng version

以下に示すように、それは角度のバージョンの詳細を表示します-cliと他のパッケージのバージョン-

バージョンCLI

Angular 7のインストールが完了しました。任意のIDE、つまりWebStorm、Atom、Visual Studio Codeを使用して、Angular 7で作業を開始できます。

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

Angular7-プロジェクトのセットアップ

この章では、Angular 7のプロジェクト設定について説明します。

プロジェクトのセットアップを開始するには、nodejsがインストールされていることを確認してください。 *以下に示すように、コマンド、ノード–v *を使用して、コマンドラインでノードのバージョンを確認できます-

ノード

バージョンを取得できない場合は、公式サイト（https://nodejs.org/en/）からnodejsをインストールします。

バージョン

nodejsをインストールすると、npmも一緒にインストールされます。 npmのバージョンを確認するには、次のようにコマンドラインでnpm -vを実行します-

Npmバージョン

したがって、ノードバージョン10とnpmバージョン6.4.1があります。

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

Angular CLIのインストール

あなたはウェブページに次のコマンドが表示されます-

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

上記のコマンドは、Angular 7でプロジェクトをセットアップするのに役立ちます。

以下に示すように、 projectA7 というフォルダーを作成し、 angular/cli をインストールします-

プロジェクトA7

インストールが完了したら、以下に示すようにコマンドng versionを使用して、インストールされたパッケージの詳細を確認します-

Command Ng Version

Angular CLIのバージョン、typescriptバージョン、Angular 7で利用可能なその他のパッケージを提供します。

Angular 7のインストールは完了しました。プロジェクトのセットアップから始めましょう。

Angular 7でプロジェクトを作成するには、次のコマンドを使用します-

ng new projectname

選択した_projectname_を使用できます。コマンドラインで上記のコマンドを実行します。

ここでは、_projectnameをangular7-app_として使用します。コマンドを実行すると、以下に示すようにルーティングについて尋ねられます-

Angular7アプリルーティング

yを入力して、ルーティングをプロジェクトのセットアップに追加します。

次の質問はスタイルシートについてです-

StyleSheet

利用可能なオプションは、CSS、Sass、Less、およびStylusです。上記のスクリーンショットでは、矢印はCSS上にあります。変更するには、矢印キーを使用して、プロジェクトのセットアップに必要なキーを選択します。現時点では、プロジェクトのセットアップのためのCSSについて説明します。

CSS

プロジェクト_angular7-app_が正常に作成されました。プロジェクトがAngular7で実行するために必要なすべての必要なパッケージをインストールします。ここで、作成されたプロジェクト（ angular7-app ディレクトリ内）に切り替えましょう。

コードの指定された行を使用して、コマンドラインでディレクトリを変更します-

cd angular7-app

Angular 7での作業にはVisual Studio Code IDEを使用します。Atom、WebStormなど、あらゆるIDEを使用できます。

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

コードIDE

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

以下はエディタです-

Visual Studio

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

プロジェクト

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

Angular7アプリ

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

ng serve

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

Angular7 Ng Serve

コマンドが実行を開始すると、以下が表示されます-

Ng Serve

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

Ng Serve2

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

ようこそ

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

「Angular 7へようこそ！」

Welcome Angular7

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

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

ng serve --host 0.0.0.0 –port 4205

angular7-app/フォルダーには、次のフォルダー構造-があります

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

angular7-app/フォルダーには、次の*ファイル構造*があります-

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

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

"@angular/animations": "~7.2.0",
"@angular/common": "~7.2.0",
"@angular/compiler": "~7.2.0",
"@angular/core": "~7.2.0",
"@angular/forms": "~7.2.0",
"@angular/platform-browser": "~7.2.0",
"@angular/platform-browser-dynamic": "~7.2.0",
"@angular/router": "~7.2.0",
"core-js": "^2.5.4",
"rxjs": "~6.3.3",
"tslib": "^1.9.0",
"zone.js": "~0.8.26"

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

tsconfig.json -これには基本的に、コンパイル時に必要なコンパイラオプションが含まれています。

tslint.json -これは、コンパイル中に考慮されるルールを含む構成ファイルです。

*src/* フォルダーはメインフォルダーで、内部では異なるファイル構造を持っています。

app

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

app.module.ts

ファイルを開くと、コードがインポートされたさまざまなライブラリへの参照を持っていることがわかります。 Angular-cliは、インポートにこれらのデフォルトライブラリを使用しました：angle/core、platform-browser。

名前自体は、ライブラリの使用法を説明しています。それらはインポートされ、宣言、インポート、プロバイダー、ブートストラップなどの変数に保存されます。

*app-routing.module* も追加されていることがわかります。 これは、インストールの開始時にルーティングを選択したためです。 モジュールは@ angular/cliによって追加されます。

以下は、ファイルの構造です-

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

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

@NgModuleは@ angular/coreからインポートされ、次のプロパティを持つオブジェクトがあります-

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

インポート-これにより、上記のようにモジュールがインポートされます。現在、BrowserModuleは@ angular/platform-browserからインポートされるインポートの一部です。 AppRoutingModuleが追加されたルーティングモジュールもあります。

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

*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 style = "text-align:center">
   <h1>Welcome to {{ title }}!</h1>
   <img width = "300" alt = "Angular Logo"
   src = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZp
   ZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA
   2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBma
   WxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSA
   zMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2
   wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3I
   DQwLjl6IiAvPgogIDwvc3ZnPg=="7>
</div>

<h2>Here are some links to help you start:</h2>
<ul>
   <li>
      <h2><a target = "_blank" rel = "noopener"
         href = "https://angular.io/tutorial">Tour of Heroes</a>
      </h2>
   </li>
   <li>
      <h2><a target = "_blank" rel = "noopener"
         href = https://angular.io/cli">CLI Documentation</>
      </h2>
   </li>
   <li>
      <h2><a target = "_blank" rel = "noopener"
         href = "https://blog.angular.io/">Angular blog</a>
      </h2>
   </li>
</ul>
<router-outlet></router-outlet>

これは、プロジェクト作成で現在利用可能なデフォルトの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 = 'Angular 7';
}

app-routing.module.ts

このファイルは、プロジェクトに必要なルーティングを処理します。メインモジュール、つまりapp.module.tsに接続されています。

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

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [];
@NgModule({
   imports: [RouterModule.forRoot(routes)],
   exports: [RouterModule]
})
export class AppRoutingModule { }

資産

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

環境

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

environment.prod.ts
environment.ts

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

_angular7-app/_フォルダーの追加のファイル構造には、次のものが含まれます-

favicon.ico

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

インデックス

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

<html lang = "en">
   <head>
      <meta charset = "utf-8"7gt;
      <title>Angular7App</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>

本体には <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).catch(err => console.error(err));

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

platformBrowserDynamic().bootstrapModule(AppModule).catch(err => console.error(err));

AppModuleが呼び出されると、app.module.tsが呼び出され、さらにブートストラップに基づいてAppComponentが呼び出されます。

bootstrap: [AppComponent]

*app.component.ts* には、indexlファイルで使用される *app-root* セレクターがあります。 *app.componentl* にあるコンテンツが表示されます。

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

リンク

polyfill.ts

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

styles.css

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

test.ts

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

tsconfig.app.json

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

tsconfig.spec.json

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

typings.d.ts

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

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

Typescript

Angular7-コンポーネント

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

ファイル構造にはアプリコンポーネントがあり、次のファイルで構成されています-

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

プロジェクトのセットアップ中に角度ルーティングを選択した場合、ルーティングに関連するファイルも追加され、ファイルは次のようになります-

app-routing.module.ts

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

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

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

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

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

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

次のコード行でコンポーネントを作成するコマンドを実行しましょう-

ng g component new-cmp

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

C:\projectA7\angular7-app>ng g 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 (477 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 { AppRoutingModule } from './app-routing.module';
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,
      AppRoutingModule
   ],
   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',//selector to be used inside l file.
   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ファイルが表示される場合、 NewCmpComponent という新しいクラスが作成されます。このクラスは、コンストラクターとngOnInit（）というメソッドがあるOnInitを実装します。 ngOnInitは、クラスが実行されるときにデフォルトで呼び出されます。

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

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

<html lang = "en">

   <head>
      <meta charset = "utf-8">
      <title>Angular7App</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).catch(err => console.error(err));

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

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

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

@NgModule({
   declarations: [
      AppComponent,
      NewCmpComponent
   ],
   imports: [
      BrowserModule,
      AppRoutingModule '
   ],
   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 7';
}

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

@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タグがあります。現在スタイルは必要ないため、スタイルファイルは空です。しかし、プロジェクトを実行すると、新しいコンポーネントに関連するものはブラウザに表示されません。

ブラウザは次の画面を表示します-

スクリーン

表示されている新しいコンポーネントに関連するものは表示されません。作成された新しいコンポーネントには、以下の詳細を含むlファイルがあります-

<p>
   new-cmp works!
<p>

しかし、ブラウザで同じことをしているわけではありません。ここで、新しいコンポーネントのコンテンツを取得してブラウザに表示するために必要な変更を見てみましょう。

セレクタ ' app-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 をapp.componentlに追加する必要があります。つまり、次のようにデフォルトで作成されるメインの親です-

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

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

新しい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 {
   newcomponent = "Entered in new component created";
   constructor() { }
   ngOnInit() { }
}

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

上記の変数は次のように new-cmp.componentl ファイルに追加されます-

<p>
   {{newcomponent}}
</p>
<p>
   new-cmp works!
</p>

ここで、* <app-new-cmp> </app-new-cmp> * selectorを app.componentl に含めました。これは、親コンポーネントのlであり、 new- cmp.componentl ファイルがブラウザーに表示されます。また、次のようにnew-cmp.component.cssファイルに新しいコンポーネントのCSSを追加します-

p {
   color: blue;
   font-size: 25px;
}

そのため、pタグの青色とフォントサイズを25pxとして追加しました。

次の画面がブラウザに表示されます-

カラーフォント

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

Angular7-モジュール

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

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

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

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

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

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

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

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

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

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

宣言

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

declarations: [
   AppComponent,
   NewCmpComponent
]

インポート

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

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

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

imports: [
   BrowserModule,
   FormsModule
]

プロバイダ

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

ブートストラップ

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

Angular7-データバインディング

データバインディングは、AngularJSから直接利用でき、Angularのすべてのバージョンは後でリリースされます。データバインディングには中括弧を使用します-\ {\ {}};このプロセスは補間と呼ばれます。前の例で、変数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 7';

  //declared array of months.
   months = ["January", "February", "March", "April", "May", "June", "July",
      "August", "September", "October", "November", "December"];
}

上記の月の配列は、ブラウザのドロップダウンに表示されます。

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

Angularの構文は次のとおりです-

*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 7';

  //declared array of months.
   months = ["January", "February", "March", "April", "May", "June", "July",
      "August", "September", "October", "November", "December"];

   isavailable = true;//variable is set to true
}

*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">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 THEN ELSE* 条件を使用して上記の例を説明します。

例

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

  //declared array of months.
   months = ["January", "Feburary", "March", "April", "May","June", "July",
      "August", "September", "October", "November", "December"];

   isavailable = false;//variable is set to true
}

この場合、 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 then else* 条件を使用してみましょう。

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

  //declared array of months.
   months = ["January", "February", "March", "April", "May", "June", "July",
      "August", "September", "October", "November", "December"];

   isavailable = true;//variable is set to 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 *で作成されます。

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

有効

Angular7-イベントバインディング

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

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

*_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)"

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

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

  //declared array of months.
   months = ["January", "February", "March", "April", "May","June", "July",
      "August", "September", "October", "November", "December"];

   isavailable = true;//variable is set to 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 に移動し、ダイアログボックスが表示されます。ダイアログボックスには、次のスクリーンショットに示すように、*ボタンがクリックされました*と表示されます-

クリック

ボタンのスタイリングはadd.component.cssに追加されます-

button {
   background-color: #2B3BCF;
   border: none;
   color: white;
   padding: 10px 10px;
   text-align: center;
   text-decoration: none;
   display: inline-block;
   font-size: 20px;
}

次に、onchangeイベントをドロップダウンに追加しましょう。

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

*_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)">
      <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>
<br/>

<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 7';

  //declared array of months.
   months = ["January", "Feburary", "March", "April", "May", "June", "July",
      "August", "September", "October", "November", "December"];

   isavailable = true;//variable is set to 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) {
      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 7';

  //declared array of months.
   months = ["January", "February", "March", "April", "May", "June", "July",
      "August", "September", "October", "November", "December"];

   isavailable = true;//variable is set to 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");
   }
}

ドロップダウンの値が変更されると、ダイアログボックスが表示され、次のメッセージが表示されます-

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

条件

Angular7-テンプレート

Angular 7は、Angular2で使用される<template>の代わりに<ng-template>をタグとして使用します。 <ng-template>はAngular 4のリリース以来使用されており、以前のバージョン、つまりAngular 2は同じ目的で<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 7';

  //declared array of months.
   months = ["January", "February", "March", "April", "May", "June", "July",
      "August", "September", "October", "November", "December"];
   isavailable = false;//variable is set to 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");
   }
}

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

条件が無効です

変数 isavailable はfalseなので、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 7';

  //declared array of months.
   months = ["January", "Feburary", "March", "April", "May", "June", "July",
      "August", "September", "October", "November", "December"];

   isavailable = false;//variable is set to true
   myClickFunction(event) {
      this.isavailable = !this.isavailable;
     //variable is toggled onclick of the button
   }
   changemonths(event) {
      alert("Changed month from the Dropdown");
   }
}

*isavailable* 変数は、次のようにボタンをクリックすると切り替わります-

myClickFunction(event) {
   this.isavailable = !this.isavailable;
}

*isavailable* 変数の値に基づいてボタンをクリックすると、それぞれのテンプレートが表示されます-

条件が有効無効なテンプレート

ブラウザを調べると、domでspanタグを取得できないことがわかります。次の例は、同じことを理解するのに役立ちます。

テンプレート

*app.componentl* には、以下に示すように、条件にspanタグと *<ng-template>* を追加していますが、

<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>

ブラウザで同じものを検査すると、dom構造にspanタグと<ng-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にしています。

利用可能

Angular7-ディレクティブ

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

コンポーネント指令

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

構造指令

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

属性ディレクティブ

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

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

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

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

ng g directive nameofthedirective
e.g
ng g directive changeText

以下のコードで与えられるように、コマンドラインに表示されます-

C:\projectA7\angular7-app>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 (565 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 { AppRoutingModule } from './app-routing.module';
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,
      AppRoutingModule
   ],
   providers: [],
   bootstrap: [AppComponent]
})
export class AppModule { }

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

*change-text.directive*

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

@Directive({
   selector: '[changeText]'
})
export class ChangeTextDirective {
   constructor() { }
}

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

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 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 ディレクティブをspanタグに追加したため、span要素の詳細が表示されます。

Angular7-パイプ

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

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

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

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

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

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

Angular Project

ここに角度付きで利用可能ないくつかの組み込みパイプがあります-

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

小文字と大文字のパイプはすでに見ました。他のパイプがどのように機能するかを見てみましょう。次のコード行は、 app.component.ts ファイルで必要な変数を定義するのに役立ちます-

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

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

大文字

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

カスタムパイプを作成するために、新しい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 { AppRoutingModule } from './app-routing.module';
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,
      AppRoutingModule
   ],
   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>

以下は出力です-

カスタムパイプ

Angular7-ルーティング

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

プロジェクトのセットアップ中に、ルーティングモジュールが既に含まれており、以下に示すようにapp.module.tsでも同じことが可能です-

*app.module.ts*

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
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,
      AppRoutingModule
   ],
   providers: [],
   bootstrap: [AppComponent]
})
export class AppModule { }

*AppRoutingModule* は上記のように追加され、imports配列に含まれます。

*app-routing.module* のファイルの詳細を以下に示します-

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [];
@NgModule({
   imports: [
      RouterModule.forRoot(routes)
   ],
   exports: [RouterModule]
})
export class AppRoutingModule { }

ここで、プロジェクトのセットアップ中にルーティングが追加されると、デフォルトでこのファイルが生成されることに注意する必要があります。追加しない場合は、上記のファイルを手動で追加する必要があります。

したがって、上記のファイルでは、@ angular/routerからRoutesとRouterModuleをインポートしました。

タイプRoutesであるconst routes が定義されています。これは、プロジェクトで必要なすべてのルートを保持する配列です。

@NgModuleに示すように、constルートはRouterModuleに与えられます。ルーティングの詳細をユーザーに表示するには、ビューを表示する場所に<router-outlet>ディレクティブを追加する必要があります。

以下に示すように、app.componentlに同じものが追加されます

<h1>Angular 7 Routing Demo</h1>
<router-outlet></router-outlet>

ここで、 Home および Contact と呼ばれる2つのコンポーネントを作成し、ルーティングを使用してそれらの間を移動します。

コンポーネントホーム

最初に、ホームについて説明します。以下は、コンポーネントホームの構文です-

ng g component home

C:\projectA7\angular7-app>ng g component home CREATE
src/app/home/home.componentl (23 bytes) CREATE
src/app/home/home.component.spec.ts (614 bytes) CREATE
src/app/home/home.component.ts (261 bytes) CREATE
src/app/home/home.component.css (0 bytes) UPDATE
src/app/app.module.ts (692 bytes)

コンポーネントお問い合わせ

コンポーネントの連絡先の構文は次のとおりです-

ng g component contactus

C:\projectA7\angular7-app>ng g component contactus
CREATE src/app/contactus/contactus.componentl (28 bytes)
CREATE src/app/contactus/contactus.component.spec.ts (649 bytes)
CREATE src/app/contactus/contactus.component.ts (281 bytes)
CREATE src/app/contactus/contactus.component.css (0 bytes)
UPDATE src/app/app.module.ts (786 bytes)

自宅でコンポーネントを作成し終わったら、お問い合わせください。以下はapp.module.tsのコンポーネントの詳細です-

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NewCmpComponent } from './new-cmp/new-cmp.component';
import { ChangeTextDirective } from './change-text.directive';
import { SqrtPipe } from './app.sqrt';
import { HomeComponent } from './home/home.component';
import { ContactusComponent } from './contactus/contactus.component';

@NgModule({
   declarations: [
      SqrtPipe,
      AppComponent,
      NewCmpComponent,
      ChangeTextDirective,
      HomeComponent,
      ContactusComponent
   ],
   imports: [
      BrowserModule,
      AppRoutingModule
   ],
   providers: [],
   bootstrap: [AppComponent]
})
export class AppModule { }

次に、以下に示すように、ルートの詳細を app-routing.module .tsに追加します-

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { ContactusComponent } from './contactus/contactus.component';

const routes: Routes = [
   {path:"home", component:HomeComponent},
   {path:"contactus", component:ContactusComponent}
];
@NgModule({
   imports: [RouterModule.forRoot(routes)],
   exports: [RouterModule]
})
export class AppRoutingModule { }

routes配列には、コンポーネントの詳細とパスおよびコンポーネントが含まれます。上記のように、必要なコンポーネントがインポートされます。

ここで、ルーティングに必要なコンポーネントがapp.module.tsおよびapp-routing.module.tsにインポートされていることに注意する必要があります。 1つの場所、つまりapp-routing.module.tsにインポートします。

そのため、ルーティングに使用されるコンポーネントの配列を作成し、app-routing.module.tsで配列をエクスポートし、再びapp.module.tsでインポートします。したがって、app-routing.module.tsのルーティングに使用されるすべてのコンポーネントがあります。

これは我々がそれをやった方法です app-routing.module.ts -

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { ContactusComponent } from './contactus/contactus.component';

const routes: Routes = [
   {path:"home", component:HomeComponent},
   {path:"contactus", component:ContactusComponent}
];
@NgModule({
   imports: [RouterModule.forRoot(routes)],
   exports: [RouterModule]
})
export class AppRoutingModule { } export const
RoutingComponent = [HomeComponent,ContactusComponent];

コンポーネントの配列、つまりRoutingComponentは、次のようにapp.module.tsにインポートされます-

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule , RoutingComponent} from './app-routing.module';
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,
      RoutingComponent
   ],
   imports: [
      BrowserModule,
      AppRoutingModule
   ],
   providers: [],
   bootstrap: [AppComponent]
})
export class AppModule { }

これで、ルートの定義は完了です。ユーザーに同じものを表示する必要があるので、app.componentlにHomeとContact Usの2つのボタンを追加し、それぞれのボタンをクリックすると、追加した<router-outlet>ディレクティブ内にコンポーネントビューが表示されますadd.componentl内。

app.componentl内にボタンを作成し、作成されたルートへのパスを指定します。

*app.componentl*

<h1>Angular 7 Routing Demo</h1>
<nav>
   <a routerLink = "/home">Home</a>
   <a routerLink = "/contactus">Contact Us </a>
</nav>
<router-outlet></router-outlet>

lでは、アンカーリンクHomeとContact usを追加し、routerLinkを使用してapp-routing.module.tsで作成したルートへのパスを指定しています。

ブラウザで同じことをテストしてみましょう-

ルーティングデモ

これがブラウザでの取得方法です。リンクをきれいに表示するために、スタイルを追加してみましょう。

app.component.cssに次のCSSを追加しました-

a:link, a:visited {
   background-color: #848686;
   color: white;
   padding: 10px 25px;
   text-align: center;
   text-decoration: none;
   display: inline-block;
}
a:hover, a:active {
   background-color: #BD9696;
}

これは、ブラウザ内のリンクの表示です-

リンクを表示

以下に示すように、ホームのコンポーネントの詳細を表示するには、ホームリンクをクリックしてください-

ホームリンク

以下に示すように、コンポーネントの詳細を表示するには、お問い合わせをクリックしてください-

お問い合わせ

リンクをクリックすると、アドレスバーのページURLも変化します。上記のスクリーンショットに示すように、ページの最後にパスの詳細が追加されます。

Angular7-サービス

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

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

ng g service myservice

C:\projectA7\angular7-app>ng g service myservice
CREATE src/app/myservice.service.spec.ts (348 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({
   providedIn: 'root'
})
export class MyserviceService {
   constructor() { }
}

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

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

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule , RoutingComponent} from './app-routing.module';
import { AppComponent } from './app.component';
import { NewCmpComponent } from './new-cmp/new-cmp.component';
import { ChangeTextDirective } from './change-text.directive';
import { SqrtPipe } from './app.sqrt';
import { MyserviceService } from './myservice.service';

@NgModule({
   declarations: [
      SqrtPipe,
      AppComponent,
      NewCmpComponent,
      ChangeTextDirective,
      RoutingComponent
   ],
   imports: [
      BrowserModule,
      AppRoutingModule
   ],
   providers: [MyserviceService],
   bootstrap: [AppComponent]
})
export class AppModule { }

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

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

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

import { Injectable } from '@angular/core';
@Injectable({
   providedIn: 'root'
})
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 7 Project!';
   todaydate;
   constructor(private myservice: MyserviceService) {}
   ngOnInit() {
      this.todaydate = this.myservice.showTodayDate();
   }
}

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

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

*app.componentl*

{{todaydate}}
<app-new-cmp></app-new-cmp>

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

*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 {
   newcomponent = "Entered in new component created";
   todaydate;
   constructor(private myservice: MyserviceService) { }
   ngOnInit() {
      this.todaydate = this.myservice.showTodayDate();
   }
}

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

*new-cmp.componentl*

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

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

Todays Date

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

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

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

import { Injectable } from '@angular/core';
@Injectable({
   providedIn: 'root'
})
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 7 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でも同じ値が表示されるため、サービスプロパティが変更されます。

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

サービスプロパティ

ここにapp.componentlとnew-cmp.componentlファイルがあります-

*app.componentl*

<h3>{{todaydate}}>/h3>
<h3> Service Property : {{componentproperty}} </h3>
<app-new-cmp></app-new-cmp>

*new-cmp.componentl*

<h3>{{newcomponent}} </h3>
<h3> Service Property : {{newcomponentproperty}} </h3>
<h3> Today's Date : {{todaydate}} </h3>

Angular7-Httpクライアント

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

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

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule , RoutingComponent} from './app-routing.module';
import { AppComponent } from './app.component';
import { NewCmpComponent } from './new-cmp/new-cmp.component';
import { ChangeTextDirective } from './change-text.directive';
import { SqrtPipe } from './app.sqrt';
import { MyserviceService } from './myservice.service';
import { HttpClientModule } from '@angular/common/http';

@NgModule({
   declarations: [
      SqrtPipe,
      AppComponent,
      NewCmpComponent,
      ChangeTextDirective,
      RoutingComponent
   ],
   imports: [
      BrowserModule,
      AppRoutingModule,
      HttpClientModule
   ],
   providers: [MyserviceService],
   bootstrap: [AppComponent]
})
export class AppModule { }

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

上記で宣言したhttpclientモジュールを使用して、サーバーからデータを取得します。前の章で作成したサービス内でそれを行い、必要なコンポーネント内のデータを使用します。

*myservice.service.ts*

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Injectable({
   providedIn: 'root'
})
export class MyserviceService {
   private finaldata = [];
   private apiurl = "http://jsonplaceholder.typicode.com/users";
   constructor(private http: HttpClient) { }
   getData() {
      return this.http.get(this.apiurl);
   }
}

指定されたURLに対してフェッチされたデータを返すgetDataというメソッドが追加されています。

メソッドgetDataは次のように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 7 Project!';
   public persondata = [];
   constructor(private myservice: MyserviceService) {}
   ngOnInit() {
      this.myservice.getData().subscribe((data) => {
         this.persondata = Array.from(Object.keys(data), k=>data[k]);
         console.log(this.persondata);
      });
   }
}

観測可能な型データを返すgetDataメソッドを呼び出しています。 subscribeメソッドが使用され、必要なデータを含む矢印関数があります。

私たちがブラウザでチェックインすると、コンソールは次のようにデータを表示します-

データの取得

次のようにapp.componentlのデータを使用してみましょう-

<h3>Users Data</h3>
<ul>
   <li *ngFor="let item of persondata; let i = index"<
      {{item.name}}
   </li>
</ul>

出力

ユーザーデータ

Angular7-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

角度更新のコマンド

あなたのアプリケーションとその依存関係を更新したい場合は、次のコマンドを使用することができます-

ng update @angular/cli @angular/core

コアフレームワークを最新バージョン、つまり、Angular 7およびangle-cliに更新します。次のオプションで上記のコマンドを使用できます-

角度重要コマンドリスト

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

Sr.No	Commands and Description
1	Component* ng gコンポーネントnew-component
2	Directive ng gディレクティブnew-directive
3	Pipe ng g pipe new-pipe
4	Service ng g service new-service
5	Module ng gモジュールmy-module
6	Test ngテスト
7	Build ng build --configuration = production//本番環境用 ng build --configuration = staging//環境の開始用

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

Angular7-フォーム

この章では、Angular 7でフォームがどのように使用されるかを見ていきます。フォームを操作する2つの方法について説明します-

テンプレート駆動型
モデル駆動型

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

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

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

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule , RoutingComponent} from './app-routing.module';
import { AppComponent } from './app.component';
import { NewCmpComponent } from './new-cmp/new-cmp.component';
import { ChangeTextDirective } from './change-text.directive';
import { SqrtPipe } from './app.sqrt';
import { MyserviceService } from './myservice.service';
import { HttpClientModule } from '@angular/common/http';
import { ScrollDispatchModule } from '@angular/cdk/scrolling';
import { DragDropModule } from '@angular/cdk/drag-drop';
import { FormsModule } from '@angular/forms';

@NgModule({
   declarations: [
      SqrtPipe,
      AppComponent,
      NewCmpComponent,
      ChangeTextDirective,
      RoutingComponent
   ],
   imports: [
      BrowserModule,
      AppRoutingModule,
      HttpClientModule,
      ScrollDispatchModule,
      DragDropModule,
      FormsModule
   ],
   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 7 Project!';
   constructor(private myservice: MyserviceService) { }
   ngOnInit() { }
   onClickSubmit(data) {
      alert("Entered Email id : " + data.emailid);
   }
}

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

ログインフォームのCSSは app.component.css に追加されます-

input[type = text], input[type = password] {
   width: 40%;
   padding: 12px 20px;
   margin: 8px 0;
   display: inline-block;
   border: 1px solid #B3A9A9;
   box-sizing: border-box;
}
input[type = submit] {
   padding: 12px 20px;
   margin: 8px 0;
   display: inline-block;
   border: 1px solid #B3A9A9;
   box-sizing: border-box;
}

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

メールID

フォームは次のようになります。それにデータを入力し、送信機能で、以下に示すように電子メールIDが警告されます-

フォームの外観

モデル駆動型

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

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

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule , RoutingComponent} from './app-routing.module';
import { AppComponent } from './app.component';
import { NewCmpComponent } from './new-cmp/new-cmp.component';
import { ChangeTextDirective } from './change-text.directive';
import { SqrtPipe } from './app.sqrt';
import { MyserviceService } from './myservice.service';
import { HttpClientModule } from '@angular/common/http';
import { ScrollDispatchModule } from '@angular/cdk/scrolling';
import { DragDropModule } from '@angular/cdk/drag-drop';
import { ReactiveFormsModule } from '@angular/forms';

@NgModule({
   declarations: [
      SqrtPipe,
      AppComponent,
      NewCmpComponent,
      ChangeTextDirective,
      RoutingComponent
   ],
   imports: [
      BrowserModule,
      AppRoutingModule,
      HttpClientModule,
      ScrollDispatchModule,
      DragDropModule,
      ReactiveFormsModule
   ],
   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 7 Project!';
   emailid;
   formdata;
   constructor(private myservice: MyserviceService) { }
   ngOnInit() {
      this.formdata = new FormGroup({
         emailid: new FormControl("[email protected]"),
         passwd: new FormControl("abcd1234")
      });
   }
   onClickSubmit(data) {this.emailid = data.emailid;}
}

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

これにより、フォーム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 に渡されます。

Onclick Submit

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

フォーム検証

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

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

上記の場合、入力したメールIDは無効であるため、ログインボタンは無効になっています。有効なメール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 7 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;}
}

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

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

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

パスワード

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

表示されるメール

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

Angular7-マテリアル/CDK-仮想スクロール

これは、Angular 7に追加された仮想スクロールと呼ばれる新機能の1つです。この機能は、CDK（コンポーネント開発キット）に追加されます。仮想スクロールは、ユーザーに表示されるdom要素をユーザーに表示します。ユーザーがスクロールすると、次のリストが表示されます。これにより、完全なリストが一度にロードされるのではなく、画面上の表示に従ってのみロードされるため、より高速なエクスペリエンスが得られます。

なぜ仮想スクロールモジュールが必要なのですか？

すべてのデータを一緒にロードするとパフォーマンスの問題が発生する可能性のある大きなリストを持つUIがあると考えてください。 Angular 7 Virtual Scrollingの新機能は、ユーザーに表示される要素の読み込みを処理します。ユーザーがスクロールすると、ユーザーに表示されるdom要素の次のリストが表示されます。これにより、操作が速くなり、スクロールも非常にスムーズになります。

私たちのプロジェクトに依存関係を追加しましょう-

npm install @angular/cdk –save

仮想スクロールモジュール

仮想スクロールモジュールの依存関係をインストールしました。

プロジェクトで仮想スクロールモジュールを使用する方法を理解するために、例に取り組みます。

次のように、最初に app.module.ts 内に仮想スクロールモジュールを追加します-

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule , RoutingComponent} from './app-routing.module';
import { AppComponent } from './app.component';
import { NewCmpComponent } from './new-cmp/new-cmp.component';
import { ChangeTextDirective } from './change-text.directive';
import { SqrtPipe } from './app.sqrt';
import { MyserviceService } from './myservice.service';
import { HttpClientModule } from '@angular/common/http';
import { ScrollDispatchModule } from '@angular/cdk/scrolling';

@NgModule({
   declarations: [
      SqrtPipe,
      AppComponent,
      NewCmpComponent,
      ChangeTextDirective,
      RoutingComponent
   ],
   imports: [
      BrowserModule,
      AppRoutingModule,
      HttpClientModule,
      ScrollDispatchModule
   ],
   providers: [MyserviceService],
   bootstrap: [AppComponent]
})
export class AppModule { }

app.module.tsで、ScrollDispatchModuleをインポートしました。上記のコードに示すように、同じものがimports配列に追加されます。

次のステップは、画面に表示されるデータを取得することです。前の章で作成したサービスを引き続き使用します。

約5000個の画像のデータがあるURL、https://jsonplaceholder.typicode.com/photosからデータを取得します。それからデータを取得し、仮想スクロールモジュールを使用してユーザーに表示します。

URL、https://jsonplaceholder.typicode.com/photosの詳細は次のとおりです-

Jsonplaceholder

画像のURLとサムネイルのURLを持つjsonデータです。ユーザーにサムネイルのURLを表示します。

以下は、データを取得するサービスです-

*myservice.service.ts*

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

@Injectable({
   providedIn: 'root'
})
export class MyserviceService {
   private finaldata = [];
   private apiurl = "https://jsonplaceholder.typicode.com/photos";
   constructor(private http: HttpClient) { }
   getData() {
      return this.http.get(this.apiurl);
   }
}

次のように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 7 Project!';
   public albumdetails = [];
   constructor(private myservice: MyserviceService) {}
   ngOnInit() {
      this.myservice.getData().subscribe((data) => {
         this.albumdetails = Array.from(Object.keys(data), k=>data[k]);
         console.log(this.albumdetails);
      });
   }
}

これで、変数 albumdetails にはAPIからのすべてのデータが含まれ、合計カウントは5000です。

データを表示する準備ができたので、app.componentl内でデータを表示します。

仮想スクロールモジュールを使用するには、タグ<cdk-virtual-scroll-viewport> </cdk-virtual-scroll-viewport> *を追加する必要があります。タグは、データを表示するlファイルに追加する必要があります。

これがapp.componentlの <cdk-virtual-scroll-viewport> の動作です。

<h3>Angular 7 - Virtual Scrolling</h3>
<cdk-virtual-scroll-viewport [itemSize] = "20">
   <table>
      <thead>
         <tr>
            <td>ID</td>
            <td>ThumbNail</td>
         </tr>
      </thead>
      <tbody>
         <tr *cdkVirtualFor = "let album of albumdetails">
            <td>{{album.id}}</td>
            <td>
               <img src = "{{album.thumbnailUrl}}" width = "100" height = "100"/>
            </td>
         </tr>
      </tbody>
   </table>
</cdk-virtual-scroll-viewport>

画面にユーザーにidとサムネイルのURLを表示しています。これまではほとんど* ngForを使用していましたが、 <cdk-virtual-scroll-viewport> 内では、* cdkVirtualForを使用してデータをループする必要があります。

app.componentl内に入力されるalbumdetails変数をループしています。仮想タグ[itemSize] = "20"に割り当てられたサイズがあり、仮想スクロールモジュールの高さに基づいてアイテムの数が表示されます。

仮想スクロールモジュールに関連するCSSは次のとおりです-

table {
   width: 100%;
}
cdk-virtual-scroll-viewport {
   height: 500px;
}

仮想スクロールの高さは500pxです。その高さに収まる画像がユーザーに表示されます。仮想スクロールモジュールを表示するために必要なコードを追加しました。

ブラウザでの仮想スクロールモジュールの出力は次のとおりです-

仮想スクロール

最初の4つの画像がユーザーに表示されていることがわかります。 500pxの高さを指定しました。ユーザーがスクロールすると、テーブルにスクロールが表示され、その高さに収まる画像が以下に示すように表示されます-

ユーザースクロール

ユーザーがスクロールすると、必要な画像がロードされます。この機能は、パフォーマンスの点で非常に便利です。最初は、5000個の画像すべてをロードするのではなく、ユーザーがスクロールすると、URLが呼び出されて表示されます。

Angular7-マテリアル/CDK-ドラッグアンドドロップ

Angular 7 CDKに追加された新しいドラッグアンドドロップ機能は、リストから要素をドラッグアンドドロップするのに役立ちます。例の助けを借りて、ドラッグアンドドロップモジュールの動作を理解します。この機能はcdkに追加されます。以下に示すように、まず依存関係をダウンロードする必要があります-

npm install @angular/cdk --save

ドラッグアンドドロップ機能

上記の手順が完了したら。以下に示すようにapp.module.tsにドラッグアンドドロップモジュールをインポートしましょう-

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule , RoutingComponent} from './app-routing.module';
import { AppComponent } from './app.component';
import { NewCmpComponent } from './new-cmp/new-cmp.component';
import { ChangeTextDirective } from './change-text.directive';
import { SqrtPipe } from './app.sqrt';
import { MyserviceService } from './myservice.service';
import { HttpClientModule } from '@angular/common/http';
import { ScrollDispatchModule } from '@angular/cdk/scrolling';
import { DragDropModule } from '@angular/cdk/drag-drop';

@NgModule({
   declarations: [
      SqrtPipe,
      AppComponent,
      NewCmpComponent,
      ChangeTextDirective,
      RoutingComponent
   ],
   imports: [
      BrowserModule,
      AppRoutingModule,
      HttpClientModule,
      ScrollDispatchModule,
      DragDropModule
   ],
   providers: [MyserviceService],
   bootstrap: [AppComponent]
})
export class AppModule { }

DragDropModuleは '@ angular/cdk/drag-drop' からインポートされ、上記のようにモジュールが配列をインポートするために追加されます。

APIの詳細、http：//jsonplaceholder.typicode.com/users [（http://jsonplaceholder.typicode.com/users）]を使用して画面に表示します。以下に示すように、APIからデータを取得するサービスがあります-

*myservice.service.ts*

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

@Injectable({
   providedIn: 'root'
})
export class MyserviceService {
   private finaldata = [];
   private apiurl = "http://jsonplaceholder.typicode.com/users";
   constructor(private http: HttpClient) { }
   getData() {
      return this.http.get(this.apiurl);
   }
}

完了したら、以下に示すように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 7 Project!';
   public personaldetails = [];
   constructor(private myservice: MyserviceService) {}
   ngOnInit() {
      this.myservice.getData().subscribe((data) => {
         this.personaldetails = Array.from(Object.keys(data), k=>data[k]);
         console.log(this.personaldetails);
      });
   }
}

personaldetails変数に必要なデータがあります。次に、以下に示すようにユーザーに表示するために同じものを使用しましょう-

<h3>Angular 7 - Drag and Drop Module</h3>
<div>
   <div *ngFor="let item of personaldetails; let i = index" class="divlayout”>
      {{item.name}}
   </div >
</div>

class =” divlayout”を追加しました。クラスの詳細はapp.component.cssにあります。

.divlayout{
   width: 40%;
   background-color: #ccc;
   margin-bottom: 5px;
   padding: 10px 10px;
   border: 3px solid #73AD21;
}

次の画面がブラウザに表示されます-

ドラッグドロップ

何もドラッグアンドドロップしません。以下に示すように、app.componentlにdragdrop cdkプロパティを追加する必要があります-

<h3>Angular 7 - Drag and Drop Module</h3>
<div cdkDropList
   #personList = "cdkDropList"
   [cdkDropListData] = "personaldetails"
   [cdkDropListConnectedTo] = "[userlist]"
   class = "example-list"
   (cdkDropListDropped) = "onDrop($event)" >

   <div *ngFor = "let item of personaldetails;
      let i = index" class = "divlayout" cdkDrag>
      {{item.name}}
   </div >
</div&t;

強調表示されているのは、ドラッグアンドドロップを実行するために必要なすべてのプロパティです。ブラウザでチェックインすると、アイテムをドラッグできます。リストにドロップすることはなく、マウスポインターを離れてもそのまま残ります。

ドラッグドロップモジュール

ここでは、リストから項目をドラッグできますが、マウスポインターを離れると、同じ場所に移動して落ち着きます。ドロップ機能を追加するには、以下に示すようにapp.component.tsにイベントonDropを追加する必要があります-

まず、以下に示すようにdragdrap cdkモジュールをインポートする必要があります-

import {CdkDragDrop, moveItemInArray, transferArrayItem}
from '@angular/cdk/drag-drop';

ここにapp.component.tsの完全なコードがあります-

import { Component } from '@angular/core';
import { MyserviceService } from './myservice.service';
import {CdkDragDrop, moveItemInArray, transferArrayItem} from '@angular/cdk/drag-drop';

@Component({
   selector: 'app-root',
   templateUrl: './app.componentl',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   title = 'Angular 7 Project!';
   public personaldetails = [];
   constructor(private myservice: MyserviceService) {}
   ngOnInit() {
      this.myservice.getData().subscribe((data) => {
         this.personaldetails = Array.from(Object.keys(data),
         k=>data[k]);
         console.log(this.personaldetails);
      });
   }
   onDrop(event: CdkDragDrop<string[]>) {
      if (event.previousContainer === event.container) {
         moveItemInArray(event.container.data,
            event.previousIndex, event.currentIndex);
      } else {
         transferArrayItem(event.previousContainer.data,
         event.container.data,
         event.previousIndex,
         event.currentIndex);
      }
   }
}

onDrop関数は、ドラッグされたアイテムを必要な位置にドロップします。

cdk dragdropモジュールからインポートした moveItemInArray および transferArrayItem を使用します。

ブラウザでデモをもう一度見てみましょう-

ドラッグドロップ位置

これで、上記のように必要な位置にアイテムをドラッグアンドドロップできます。この機能はちらつきの問題なく非常にスムーズに機能し、必要に応じてアプリケーションで使用できます。

Angular7-アニメーション

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

まず、次のコード行でライブラリをインポートする必要があります-

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

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

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule , RoutingComponent} from './app-routing.module';
import { AppComponent } from './app.component';
import { NewCmpComponent } from './new-cmp/new-cmp.component';
import { ChangeTextDirective } from './change-text.directive';
import { SqrtPipe } from './app.sqrt';
import { MyserviceService } from './myservice.service';
import { HttpClientModule } from '@angular/common/http';
import { ScrollDispatchModule } from '@angular/cdk/scrolling';
import { DragDropModule } from '@angular/cdk/drag-drop';
import { ReactiveFormsModule } from '@angular/forms';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
   declarations: [
      SqrtPipe,
      AppComponent,
      NewCmpComponent,
      ChangeTextDirective,
      RoutingComponent
   ],
   imports: [
      BrowserModule,
      AppRoutingModule,
      HttpClientModule,
      ScrollDispatchModule,
      DragDropModule,
      ReactiveFormsModule,
      BrowserAnimationsModule
   ],
   providers: [MyserviceService],
   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 { FormGroup, FormControl, Validators} from '@angular/forms';
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番目のパラメーターは、インポートした関数（状態、遷移など）です。

状態関数には、要素が遷移するアニメーションステップが含まれます。現在、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

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

Click Me Position

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

Angular7-マテリアル

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

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

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

以下は、プロジェクトに材料を追加するコマンドです-

npm install --save @angular/material

Materials and CDK

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

{
   "name": "angular7-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": "~7.2.0",
      "@angular/cdk": "^7.3.4",
      "@angular/common": "~7.2.0",
      "@angular/compiler": "~7.2.0",
      "@angular/core": "~7.2.0",
      "@angular/forms": "~7.2.0",
      "@angular/material": "^7.3.4",
      "@angular/platform-browser": "~7.2.0",
      "@angular/platform-browser-dynamic": "~7.2.0",
      "@angular/router": "~7.2.0",
      "core-js": "^2.5.4",
      "rxjs": "~6.3.3",
      "tslib": "^1.9.0",
      "zone.js": "~0.8.26"
   },
   "devDependencies": {
      "@angular-devkit/build-angular": "~0.13.0",
      "@angular/cli": "~7.3.2",
      "@angular/compiler-cli": "~7.2.0",
      "@angular/language-service": "~7.2.0",
      "@types/node": "~8.9.4",
      "@types/jasmine": "~2.8.8",
      "@types/jasminewd2": "~2.0.3",
      "codelyzer": "~4.5.0",
      "jasmine-core": "~2.99.1",
      "jasmine-spec-reporter": "~4.2.1",
      "karma": "~3.1.1",
      "karma-chrome-launcher": "~2.2.0",
      "karma-coverage-istanbul-reporter": "~2.0.1",
      "karma-jasmine": "~1.1.2",
      "karma-jasmine-html-reporter": "^0.2.2",
      "protractor": "~5.4.0",
      "ts-node": "~7.0.0",
      "tslint": "~5.11.0",
      "typescript": "~3.2.2"
   }
}

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

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

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule , RoutingComponent} from './app-routing.module';
import { AppComponent } from './app.component';
import { NewCmpComponent } from './new-cmp/new-cmp.component';
import { ChangeTextDirective } from './change-text.directive';
import { SqrtPipe } from './app.sqrt';
import { MyserviceService } from './myservice.service';
import { HttpClientModule } from '@angular/common/http';
import { ScrollDispatchModule } from '@angular/cdk/scrolling';
import { DragDropModule } from '@angular/cdk/drag-drop';
import { ReactiveFormsModule } from '@angular/forms';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatButtonModule, MatMenuModule, MatSidenavModule } from '@angular/material';

@NgModule({
   declarations: [
      SqrtPipe,
      AppComponent,
      NewCmpComponent,
      ChangeTextDirective,
      RoutingComponent
   ],
   imports: [
      BrowserModule,
      AppRoutingModule,
      HttpClientModule,
      ScrollDispatchModule,
      DragDropModule,
      ReactiveFormsModule,
      BrowserAnimationsModule,
      MatButtonModule,
      MatMenuModule,
      MatSidenavModule
   ],
   providers: [MyserviceService],
   bootstrap: [AppComponent]
})
export class AppModule { }

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

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

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

imports: [
   BrowserModule,
   AppRoutingModule,
   HttpClientModule,
   ScrollDispatchModule,
   DragDropModule,
   ReactiveFormsModule,
   BrowserAnimationsModule,
   MatButtonModule,
   MatMenuModule,
   MatSidenavModule
],

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

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

*styles.css* にmaterial-cssサポートを追加しましょう。

@import "~@angular/material/prebuilt-themes/indigo-pink.css";

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

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

*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>

以下の画像がブラウザに表示されます-

メニュー

メニューをクリックすると、その中のアイテムが表示されます-

メニューファイル

SideNav

sidenavを追加するには、 <mat-sidenav-container> </mat-sidenav-container> が必要です。 <mat-sidenav> </mat-sidenav> は、子としてコンテナに追加されます。 *（click）= "sidenav.open（）" *を使用してsidenavをトリガーする別のdivが追加されています。

*app.componentl*

<mat-sidenav-container class="example-container" fullscreen>
   <mat-sidenav #sidenav class = "example-sidenav">
      Angular 7
   </mat-sidenav>
   <div class = "example-sidenav-content">
      <button type = "button" mat-button (click) = "sidenav.open()">
         Open sidenav
      </button>
   </div>
</mat-sidenav-container>

*app.component.css*

.example-container {
   width: 500px;
   height: 300px;
   border: 1px solid rgba(0, 0, 0, 0.5);
}
.example-sidenav {
   padding: 20px;
   width: 150px;
   font-size: 20px;
   border: 1px solid rgba(0, 0, 0, 0.5);
   background-color: #ccc;
   color:white;
}

以下は、ブラウザでのメニューとサイドナブの表示です-

Open Sidenav

Open Sidenavをクリックすると、左側に次のパネルが開きます-

パネルが開く

デイトピッカー

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

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

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule , RoutingComponent} from './app-routing.module';
import { AppComponent } from './app.component';
import { NewCmpComponent } from './new-cmp/new-cmp.component';
import { ChangeTextDirective } from './change-text.directive';
import { SqrtPipe } from './app.sqrt';
import { MyserviceService } from './myservice.service';
import { HttpClientModule } from '@angular/common/http';
import { ScrollDispatchModule } from '@angular/cdk/scrolling';
import { DragDropModule } from '@angular/cdk/drag-drop';
import { ReactiveFormsModule } from '@angular/forms';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatDatepickerModule, MatInputModule, MatNativeDateModule } from '@angular/material';

@NgModule({
   declarations: [
      SqrtPipe,
      AppComponent,
      NewCmpComponent,
      ChangeTextDirective,
      RoutingComponent
   ],
   imports: [
      BrowserModule,
      AppRoutingModule,
      HttpClientModule,
      ScrollDispatchModule,
      DragDropModule,
      ReactiveFormsModule,
      BrowserAnimationsModule,
      MatDatepickerModule,
      MatInputModule,
      MatNativeDateModule
   ],
   providers: [MyserviceService],
   bootstrap: [AppComponent]
})
export class AppModule { }

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

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

import { Component } from '@angular/core';
@Component({
   selector: 'app-root',
   templateUrl: './app.componentl', s
   tyleUrls: ['./app.component.css']
})
export class AppComponent {
   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>

style.cssに追加されたグローバルCSS-

/*You can add global styles to this file, and also
import other style files*/
@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';
body {
   font-family: Roboto, Arial, sans-serif;
   margin: 10;
}
.basic-container {
   padding: 30px;
}
.version-info {
   font-size: 8pt;
   float: right;
}

以下に示すように、日付ピッカーはブラウザに表示されます-

Datepicker Choose Date Date

Angular7プロジェクトのテストとビルド

この章では、次のトピックについて説明します-

Angular 7プロジェクトをテストするには
Angular 7プロジェクトをビルドするには

Angular 7プロジェクトのテスト

プロジェクトのセットアップ中に、テストに必要なパッケージが既にインストールされています。新しいコンポーネント、サービス、ディレクティブなどごとに作成された .spec.ts ファイルがあります。ジャスミンを使用してテストケースを作成します。

コンポーネント、サービス、ディレクティブ、または作成された他のファイルに追加された変更については、それぞれの.spec.tsファイルにテストケースを含めることができます。そのため、単体テストの大部分は最初からカバーできます。

テストケースを実行するには、次のコマンドを使用します-

ng test

以下は app.component.ts のapp.component.spec.tsファイルです-

import { TestBed, async } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';
import { AppComponent } from './app.component';

describe('AppComponent', () => {
   beforeEach(async(() => {
      TestBed.configureTestingModule({
         imports: [
            RouterTestingModule
         ],
         declarations: [
            AppComponent
         ],
      }).compileComponents();
   }));
   it('should create the app', () => {
      const fixture = TestBed.createComponent(AppComponent);
      const app = fixture.debugElement.componentInstance;
      expect(app).toBeTruthy();
   });
   it(`should have as title 'angular7-app'`, () => {
      const fixture = TestBed.createComponent(AppComponent);
      const app = fixture.debugElement.componentInstance;
      expect(app.title).toEqual('angular7-app');
   });
   it('should render title in a h1 tag', () => {
      const fixture = TestBed.createComponent(AppComponent);
      fixture.detectChanges();
      const compiled = fixture.debugElement.nativeElement;
      expect(compiled.querySelector('h1').textContent).toContain(
         'Welcome to angular7-app!');
   })
});

*app.component.ts*

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

コマンドを実行して、実行中のテストケースを確認します。

Ngテスト

コマンドを実行

テストケースのステータスは、上記のようにコマンドラインに表示され、以下に示すようにブラウザで開きます-

カルマ

障害が発生した場合、次のように詳細が表示されます-

それを行うには、次のようにapp.component.spec.tsを変更しましょう-

import { TestBed, async } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';
import { AppComponent } from './app.component';

describe('AppComponent', () => {
   beforeEach(async(() => {
      TestBed.configureTestingModule({
         imports: [
            RouterTestingModule
         ],
         declarations: [
            AppComponent
         ],
      }).compileComponents();
   }));
   it('should create the app', () => {
      const fixture = TestBed.createComponent(AppComponent);
      const app = fixture.debugElement.componentInstance;
      expect(app).toBeTruthy();
   });
   it(`should have as title 'angular7-app'`, () => {
      const fixture = TestBed.createComponent(AppComponent);
      const app = fixture.debugElement.componentInstance;
      expect(app.title).toEqual('Angular 7');//change the
      title from angular7-app to Angular 7
   });
   it('should render title in a h1 tag', () => {
      const fixture = TestBed.createComponent(AppComponent);
      fixture.detectChanges();
      const compiled = fixture.debugElement.nativeElement;
      expect(compiled.querySelector('h1').textContent).toContain(
         'Welcome to angular7-app!');
   });
});

上記のファイルでは、テストケースは Angular 7 というタイトルをチェックします。しかし、app.component.tsでは、以下に示すように、 angular7-app というタイトルがあります-

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

ここで、テストケースは失敗し、以下はコマンドラインとブラウザに表示される詳細です。

コマンドラインで

次の画面がコマンドラインに表示されます-

コマンドライン

ブラウザで

次の画面がブラウザに表示されます-

Karma Connected

プロジェクトで失敗したすべてのテストケースは、上記のようにコマンドラインとブラウザに表示されます。

同様に、サービス、ディレクティブ、およびプロジェクトに追加される新しいコンポーネントのテストケースを作成できます。

Angular 7プロジェクトの構築

Angularでプロジェクトを完了したら、プロダクションまたはステータスで使用できるようにビルドする必要があります。

ビルド、つまり本番、ステージング、開発、テストの設定は、 src/environments で定義する必要があります。

現在、我々はsrc/environmentで定義されている次の環境を持っています-

環境

ビルドに基づいてsrc/environmentにファイルを追加できます。つまり、environment.staging.ts、enviornment.testing.tsなどです。

現在、本番環境向けにビルドしようとしています。ファイル environment.ts には、次のようにデフォルトの環境設定とファイルの詳細が含まれています-

export const environment = {
   production: false
};

本番用のファイルを構築するには、次のようにenvironment.tsで production：true を作成する必要があります-

export const environment = {
   production: true
};

デフォルトの環境ファイルは、次のようにコンポーネント内にインポートする必要があります-

*app.component.ts*

import { Component } from '@angular/core';
import { environment } from './../environments/environment';

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

私たちがやろうとしているデフォルトから本番への環境置換は、angular.json fileReplacements セクション内で次のように定義されています-

"production": {
   "fileReplacements": [
      {
         "replace": "src/environments/environment.ts",
         "with": "src/environments/environment.prod.ts"
      }
   ],
}

ビルドのコマンドが実行されると、ファイルは src/environments/environment.prod.ts に置き換えられます。次の例に示すように、ステージングやテストなどの追加構成をここに追加できます-

"configurations": {
   "production": { ... },
   "staging": {
      "fileReplacements": [
         {
            "replace": "src/environments/environment.ts",
            "with": "src/environments/environment.staging.ts"
         }
      ]
   }
}

したがって、ビルドを実行するコマンドは次のとおりです-

ng build --configuration = production//for production environmnet
ng build --configuration = staging//for stating enviroment

ここで、本番用のビルドコマンドを実行します。このコマンドは、ビルド後の最終ファイルを含むプロジェクト内にdistフォルダーを作成します。

Ng Build

Dist Folder

最終ファイルはdist/フォルダー内に構築され、最終的に本番サーバーでホストできます。

Dist

Angular7-quick-guide

Angular7-概要

V7への角度更新

角度CLI

アプリケーションのパフォーマンス

角材とCDK

仮想スクロール

ドラッグアンドドロップ

Angular7-環境のセットアップ

ノード番号

Angular7-プロジェクトのセットアップ

app

app.module.ts

app.componentl

app.component.spec.ts

app.component.ts

app-routing.module.ts

資産

環境

favicon.ico

インデックス

main.ts

polyfill.ts

styles.css

test.ts

tsconfig.app.json

tsconfig.spec.json

typings.d.ts

Angular7-コンポーネント

Angular7-モジュール

宣言

インポート

プロバイダ

ブートストラップ

Angular7-データバインディング

例

出力

例

Angular7-イベントバインディング

Angular7-テンプレート

Angular7-ディレクティブ

コンポーネント指令

構造指令

属性ディレクティブ

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

Angular7-パイプ

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

Angular7-ルーティング

コンポーネントホーム

コンポーネントお問い合わせ

Angular7-サービス

Angular7-Httpクライアント

Angular7-CLIプロンプト

角度更新のコマンド

角度重要コマンドリスト

Angular7-フォーム

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

モデル駆動型

フォーム検証

Angular7-マテリアル/CDK-仮想スクロール

なぜ仮想スクロールモジュールが必要なのですか？

Angular7-マテリアル/CDK-ドラッグアンドドロップ

Angular7-アニメーション

Angular7-マテリアル

Menu

SideNav

デイトピッカー

Angular7プロジェクトのテストとビルド

Angular 7プロジェクトのテスト

コマンドラインで

ブラウザで

Angular 7プロジェクトの構築