Angular2でマテリアルデザインアプリを構築する

Angularのロゴが付いたノートパソコンと電話の画面

Angular Materialは、TypeScriptで記述されたAngularの新しい高速実装であるAngular2のGoogleのマテリアルデザイン仕様を実装するUIコンポーネントフレームワークです。まだアルファ版ですが、Angular Materialは、マテリアルデザインに基づいた再利用可能でアクセス可能なUIコンポーネントのセットをすでに提供しています。

Angular 2自体は、すべてのプラットフォーム(Web、モバイル、デスクトップ)で使用できるように設計されており、多くの新しいテクノロジーが関連付けられています。 JavaScriptレベルでは、ECMAScript 2015(ES6)の追加の構文、TypeScriptによる入力とインターフェースのサポート、Metadata ReflectionAPIからのデコレーターがあります。 Reactive Extensionsライブラリのオブザーバブルを使用して、関数型プログラミングの方法でイベントのシーケンスを管理します。ゾーンを使用して非同期アクティビティをカプセル化およびインターセプトして、スレッドローカルストレージの形式を提供し、Angularが非同期イベントのデータ変更に自動的に応答してデータバインディングを維持できるようにします。最後に、モジュールのロードはSystemJSによって処理されます。

このチュートリアルでは、Angular 2を使用して、いくつかの署名マテリアルデザイン要素を備えたシンプルなToDoアプリを作成します。 ここでソースファイルを取得します



セットアップする

初期環境の設定は難しい場合があります。あります angle2-シード 利用可能、および angle2-starter 。ただし、さらに優れたものがあります。 角度-cli 1つのコマンドでAngular2プロジェクトを構成できます。

前のセクションで(Nodeとnpmを介して)説明したすべてのテクノロジーのセットアップを処理するだけでなく、Jasmineユニットテスト、Protractorエンドツーエンドテスト、さらにTSLintテストの足場を追加します。 Angular 2TypeScriptのcodelyzer静的コード分析。これらすべてを使用する必要はありませんが、必ず使用する必要があります。使い方はとても簡単なので、それなしでどうやってやってきたのか不思議に思うでしょう。

Angular CLIはnpmパッケージとして利用できるため、Nodeとnpmをマシンにグローバルにインストールする必要があります。 npm install -gangular-cli 。次に、で新しいAngular2アプリを作成します 新しい材料の2-do 。必要なファイルを生成した後、Gitリポジトリを初期化し、次のことを行うため、少し待つ必要があります。 npmインストール 必要なすべてのモジュールをにダウンロードするには node_modules / 。を見てください package.json そこにあるモジュールとスクリプトに慣れてください。

これで、公式のベストプラクティスに従った新しいAngular2アプリケーションが作成されました。

マテリアルデザインを追加

デフォルトのアプリはマテリアルデザインについて何も知らないので(間違いなく見落とし)、自分で追加する必要があります。

公開されているAngular2マテリアルデザインパッケージのリストがあります。 @ angular2-マテリアル 図書館。この例では、 (すべてのAngular Material 2アプリに必要)、および ボタンカードチェックボックスアイコン入力リスト そして ツールバー

npm install --save @angular2-material/{core,button,card,checkbox,icon,input,list,toolbar}@2.0.0-alpha.5

ベンダーバンドルを機能させるには、追加する必要があります @ angular2-マテリアル/ ** / * の配列に vendorNpmFilesangle-cli-build.js 。また、パスを追加する必要があります @ angular2-マテリアルマップ オブジェクト:

const map: any = { '@angular2-material': 'vendor/@angular2-material' };

各パッケージのメインファイルをポイントして、SystemJSに新しいモジュールの処理方法を知らせます。

const packages:any = {}; // put the names of any of your Material components here const materialPkgs:string[] = ['core','button','card','checkbox', 'icon','input','list','toolbar']; materialPkgs.forEach((pkg) => { packages[`@angular2-material/${pkg}`] = {main: `${pkg}.js`}; });

次に、マテリアルデザインアイコンフォントをロードします。 src / index.html 。どのフォントでも機能しますが、標準のマテリアルデザインアイコンを使用しています。

フォトショップでカラーパレットを作成する方法

MDダイアログを作成する

これで、ToDoアプリでマテリアルデザインを操作できるようになりました。現在Angular2 Material Designにないコンポーネントの1つはプロンプトまたはダイアログなので、最初のタスクでは1つ作成します。

マテリアルデザインカード、​​ツールバー、入力、およびいくつかのボタンを使用して、新しいコンポーネントを作成しましょう。の中に src / app リポジトリのフォルダ、「 コンポーネントダイアログの生成 。これにより、新しい DialogComponentsrc / app / dialog 、およびバレルを追加します system-config.ts したがって、SystemJSはそれをロードする方法を知っています。

生成されたものを見れば dialog.component.ts ファイルの場合、最初の行は次のとおりです。 import {Component、OnInit} から '@ angular / core';成分 Angularの主要な構成要素の1つであり、 OnInit 実装するインターフェースの1つです。ただし、ネストされたコンポーネント間、および上記のマテリアルデザインコンポーネント間の通信にアクセスするには、入力をインポートする必要があります。 出力 そして EventEmitter から @ angular / core; そして MdCardMdInputMdToolbar そして MdButton の対応するモジュールから @ angular2-マテリアル 図書館。

これらのマテリアルコンポーネントをレンダリングするには、ディレクティブを挿入する必要があります。 DialogComponent が必要です。次のディレクティブをに追加します @Components メタデータ:

templateUrl: 'dialog.component.html', directives: [MdCard, MdToolbar, MdInput, MdButton], styleUrls: ['dialog.component.css']

次に、いくつかの宣言を行います @入力 変数( okTextcancelText など)ダイアログの内容を定義することができます。また、1つ追加する必要があります @出力 ダイアログが閉じられたときに親コンポーネントの値を使用して関数をトリガーできるようにするエミッター。

これで、生成されたコンストラクターをで置き換えることができます dialog.component.ts 次のコードで:

constructor() { this.okText = 'OK'; this.cancelText = 'Cancel'; } emitValue(value) { this.valueEmitted.emit(value); }

を使用するだけでなく @入力 私たちの内部の変数 DialogComponent 以内 dialog.component.html テンプレート、 md-input ユーザーからの入力を受け入れることができます。

ザ・ md-buttons ユーザーが「OK」、「キャンセル」、またはこれらのボタンにラベルを付けることにしたものをクリックできるようにします。

{{cancelText}} {{okText}}

に注意してください キーアップ イベントハンドラ。EnterキーまたはEscキーが押されたときに処理を行います。これらのハンドラーは、 クリック のイベントハンドラー cancelText そして okText 。エスケープはキャンセルと同じことをします (emitValue(null)) 、Enterキーを押すと、[OK]をクリックした場合と同じ結果になります (emitValue(value)) 。これにより、ユーザーに 経由 md-input 、および放出された出力を受け取ります。

いくつかのマテリアルデザインコンポーネントの例を見ることができます。 md-cardmdボタン 、 等々。また、CSSを追加する必要があります dialog.component.css 希望するレイアウトを実現するために、付属のGitHubリポジトリで完全なコードを表示できます。

これを追加しましょう DialogComponentmaterial2-do.component.html それがどのように見えるかを確認するには:

すべてのリテラル文字列があることに注意してください @Inputs 。これらでは、一重引用符と二重引用符の両方を使用する必要があります。そうしないと、Angularはコンテンツを変数名として解釈します。 成分 範囲。

放出されたものもあります @出力 。これにより、ダイアログがシンプルになり、非常に構成可能になります。省略した場合、ほとんどの入力はデフォルトで空の文字列になります。

変更しましょう Material2DoComponent 。 DialogComponentをインポートし、ディレクティブとして宣言する必要があります。そうしないと、 Material2DoComponent レンダリングできなくなります。ログ関数も追加します。

log(text) { console.log(text); }

私たちの手仕事を見てみましょう。を実行することでアプリ(デフォルトのポートは4200)を提供できます npm run-script start 、順番に実行されます サーバーの 。コンソールを開くと、ログに記録されている内容を確認できます。[はい]をクリックすると入力の内容が出力され、 ヌル 「いいえ」をクリックすると、が出力されます。

これで、この新しいものを使用する準備ができました DialogComponent ToDoアプリを作成します。

メインアプリを作成する

メインアプリには次のMDコンポーネントを使用します。 ツールバーリストリストアイテムチェックボックスボタンアイコンアイコン-レジストリ 、およびその依存、 HTTP_PROVIDER 、AngularHTTPライブラリから。したがって、これらはのインポートセクションに追加する必要があります Material2DoComponent

繰り返しますが、これらのコンポーネントをレンダリングできるようにするには、それらをに含める必要があります。 @Components メタデータ ディレクティブ と一緒に配列 DialogComponent 、追加したばかりです:

directives: [MdCard, MdToolbar, MdList, MdListItem, MdCheckbox, MdButton, MdIcon, DialogComponent],

にアクセスするには MdIconRegistry 、一緒に注入する必要があります HTTP_PROVIDERS 、経由 @Components メタデータ プロバイダー アレイ:

providers: [MdIconRegistry, HTTP_PROVIDERS],

今、私たちは DialogComponent 、単純なToDoアプリケーションに十分なロジックを追加します。ザ・ todoDialog 編集するタスクのいずれかでダイアログを開くために呼び出されます( すべて )または ヌル 新しいものを作成する場合。

新しいタスクのデフォルト変数を設定するか、代わりにタスクを編集している場合は、それに応じて変数を変更します。次に、 DialogComponent を設定することにより showDialog 変数 true

todoDialog(todo = null) { this.okButtonText = 'Create task'; this.fieldValue = ''; this.editingTodo = todo; if (todo) { this.fieldValue = todo.title; this.okButtonText = 'Edit task'; } this.showDialog = true; }

ザ・ updateTodo 関数は、閉じたいときに呼び出されます。その他の機能( editTodo追加 - TodohideDialog )はのヘルパーメソッドです updateTodo

updateTodo(title) { if (title) { title = title.trim(); if (this.editingTodo) { this.editTodo(title); } else { this.addTodo(title); } } this.hideDialog(); }

material2-do.component.html アプリケーションに md-ツールバー タイトルを付けたところ、 md-icon と呼ばれる 追加 (プラス記号のように見えます)フローティングアクションボタン(FAB)の場合、新しいタスクを作成できます。

add

を使用しております md-card-content 保持する md-list* ngFor 繰り返して表示するには todoList 配列として md-list-items

md-チェックボックス リストの項目にチェックマークを付けることができます。そして、2つあります md-mini-fab タスクの削除と編集に使用できるボタン: md-アイコンdelete_forever そして mode_edit

delete_forever mode_edit

少しのCSSを使用すると、ロールオーバー(またはクリック)するまでこれらは非表示のままになります。あなたはリポジトリでコードを見ることができます。

今後

Angular Material 2はまだアルファ版であるため、いくつか欠けているものがあります。特に、シグネチャーMDボタンの波及効果です。先にAPIに重大な変更があるかもしれませんが、それは非常に機能しています。また、開発者を混乱させず、見栄えの良いアプリケーションの作成に簡単に活用できる単純なAPIを使用しているという主張にも応えます。

この記事はもともと、ウェブデザイナーと開発者のための世界で最も売れている雑誌であるnetの284号に掲載されました。 ここで購読

関連記事: