このチュートリアルでは、Angular Material Designを紹介し、材料UIを使用してシンプルな角度アプリケーションを作成することをガイドします。 事前に構(gòu)築されたコンポーネントを活用すると、開発の速度が高まり、プロフェッショナルなアプリケーションが作成されます

重要な概念：

角度材料は、材料設(shè)計(jì)の原則に準(zhǔn)拠した包括的なUIコンポーネントのセットを提供します。

前提條件には、node.js（6.9.0）、npm（3）、および角度cli。
• インストールには、npmを使用して角度材料とその依存関係を追加することが含まれます。 テーマは、事前に構(gòu)築されたテーマをインポートしたり、カスタムテーマを作成したりすることで達(dá)成されます。
コンポーネントは、角度モジュールにモジュラーにインポートされます
• チュートリアルでは、ボタン、カード、テーブル、フォームを使用したことを示しています ジェスチャー（hammerjs経由）やアニメーション（
経由）などの高度な機(jī)能がユーザーエクスペリエンスを強(qiáng)化します。
• 材料デザインとは？
マテリアルデザインは、プラットフォーム全體でデジタルエクスペリエンスを作成するためのデザイン言語です。インタラクティブ、モーション、およびコンポーネントの原則とガイドラインを提供し、設(shè)計(jì)プロセスを合理化します。材料コンポーネントは、モジュール性、テーマ、カスタマイズを提供します
• @angular/animations角度材料の概要：

角度材料は、角度のための材料設(shè)計(jì)を?qū)g裝します。 のコンポーネントが含まれています

フォーム（入力、選択、チェックボックス、日付ピッカー）

ナビゲーション（メニュー、サイドバー、ツールバー）

レイアウト（グリッド、カード、タブ、リスト）

ボタン、インジケーター、ポップアップ、モーダル、およびデータテーブル。

• 開発環(huán)境のセットアップ：
node.js（6.9.0）とnpm（3）がインストールされていることを確認(rèn)してください。 Angular CLIを取り付けます：
• 新しい角度プロジェクトを作成します：

コンポーネントの生成：

ルーティングの構(gòu)成

：

npm install -g @angular/cli

角度材料のインストール：

ng new angularmaterialdemo

角度材料とその依存関係を取り付けます：

ng g component login
ng g component CustomerList
ng g component CustomerCreate

src/app/app.module.ts

：

// ... imports ...
import { RouterModule, Routes } from '@angular/router';
// ...

const appRoutes: Routes = [
  { path: 'customer-list', component: CustomerListComponent },
  { path: 'customer-create', component: CustomerCreateComponent },
  { path: 'login', component: LoginComponent },
  { path: '', redirectTo: '/login', pathMatch: 'full' },
];

// ... @NgModule ...
imports: [
  // ... other imports ...
  RouterModule.forRoot(appRoutes)
],
// ...

にhammerjsをインポートします

テーマを：

に追加します

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

：

にマテリアルアイコンを追加します src/main.ts

インポート

import 'hammerjs';

in

：styles.css

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

マテリアルモジュールの作成：index.html

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

create

：BrowserAnimationsModule src/app/app.module.ts

インポート

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

// ... @NgModule ...
imports: [
  // ... other imports ...
  BrowserAnimationsModule
],
// ...

に

。にインポートします

uiの構(gòu)築：

src/app/material.module.ts

（app.component.html、login.component.html、customer-list.component.html、およびcustomer-create.component.htmlの詳細(xì)なUI構(gòu)造は、ここに含めるには広すぎます。元の応答はこの詳細(xì)を提供します。完全なコードの例については、それを參照してください。）元の応答は、モーダルダイアログやスナックバー通知を使用したエラー処理など、これらのコンポーネント內(nèi)でさまざまな角度材料コンポーネントを使用する包括的な例を提供します。

結(jié)論：

このチュートリアルは、材料設(shè)計(jì)UIを備えた角度アプリケーションを構(gòu)築するための基盤を提供します。 角度材料のモジュール性と広範(fàn)な機(jī)能により、開発効率が大幅に向上し、視覚的に魅力的でユーザーフレンドリーなアプリケーションが作成されます。詳細(xì)とコンポーネントのオプションについては、公式の角度材料のドキュメントを參照してください。

以上が角張った材料設(shè)計(jì)コンポーネントを使用してUISを作成しますの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。