角度2の材料設計アプリを構築する

Sep 17, 2025

操作方法

角材は、角度2のためのGoogleの材料設計仕様を実装するUI部品フレームワークです。 - TSISTSCRPLで書かれた角度の新しくより速い実装。それでもアルファではあるが、角度材料はすでに材料設計に基づいて再利用可能でアクセス可能なUI部品のセットを提供する。

Angular 2自体は、すべてのプラットフォーム（Web、Mobile、Desktop）にわたって使用するように設計されており、それに関連した多くの新しい技術があります。 JavaScriptレベルでは、Metadata Reflection APIからのデコレータとともに、TypeScriptからのECMAScript 2015（ES6）、タイピングおよびインターフェイスサポートの追加の構文があります。機能的なプログラミング方法でイベントのシーケンスを管理するためにRective Extensionsライブラリからの観測値を使用します。ゾーンを使用して非同期アクティビティをカプセル化してスレッドローカルストレージの形式を提供し、角度が自動的に非同期イベントのデータ変更に応答してデータバインディングを維持することができます。最後に、モジュールのロードはSystemJSによって処理されます。

このチュートリアルでは、angular 2を使用して、いくつかの署名材料設計要素を使って簡単な道運ぽいアプリを作成します。ここでソースファイルを入手してください。

設定する

初期環境を設定することは困難です。 ANがあります Angular 2-Seed. 利用可能な、そしてAN Angular 2-Starter. 。ただし、さらに良いことがあります 角 - クリニ Angular 2プロジェクトを単一のコマンドで設定できます。

最後のセクションで述べたすべてのテクノロジのセットアップの世話をするだけでなく、Jasmine Unitテスト、Practrace End-To-Endテスト、およびTSlintテストのための足場も追加されます。 Angular 2型スクリプトのCodelyzer静的コード解析あなたはこれらすべてを使う必要はありませんが、あなたは間違いなくあなたはべきです。それはとても簡単で使えば、あなたがそれなしでどのように到達したのか疑問に思います。

Angular CLIはNPMパッケージとして入手可能であるため、マシンにノードとNPMをグローバルにインストールする必要があります。 NPM Install -g Angular-Cli. 。今新しい角度2アプリを作成します NG新素材2 。必要なファイルを生成した後、それはGit Repoを初期化し、それを初期化し、 NPMインストール 必要なモジュールをすべてダウンロードするには node_modules / 。見てみましょう Package.json. そしてそこにあるモジュールやスクリプトに精通してください。

公式のベストプラクティスに続く新しい角度2アプリケーションを作成しました。

素材デザインを追加してください

デフォルトのアプリは材料設計について何も知っていません（私が確信している監督者）、それを私たち自身を追加する必要があります。

に公開されている角度2の材料設計パッケージのリストがあります。 a angular 2-材料 図書館。この例では私たちは使います芯（すべての角材2アプリに必要） ボタン 、 カード 、 チェックボックス 、 アイコン 、入力、 リスト そして ツールバー ：

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

ベンダーバンドルが機能するためには、追加する必要があります @ Angular 2-Material / ** / * の配列に vendornpmfiles に angular-cli-build.js. 。私達はまた道を追加する必要がある a angular 2-材料 に マップ オブジェクト：

 const map：any = {
  '@ Angular 2-Material'： 'ベンダー/ @ Angular 2-Material'
;

各パッケージのメインファイルを指すことで、新しいモジュールを処理する方法をSystemJSに知らせましょう。

 constパッケージ：any = {};

//ここにあなたの材料コンポーネントの名前を付けてください
const materialpkgs：string [] = ['コア'、 'button'、 'card'、 'checkbox'、
'icon'、 'input'、 'list'、 'toolbar']。

MaterialPkgs.Foreach（（PKG）=＆gt; {
  パッケージ[@ angular2-material / $ {pkg} `] = {メイン：` $ {pkg} .js`}。
}）

今すぐ材料デザインアイコンフォントをロードする時が来ましたの src / index.html 。どんなフォントでも機能しますが、標準の素材デザインアイコンを使用しています。

＆lt; link href = "https://fonts.googleeapis.com/icon?family=matial-ensicons" rel = "stylesheet"＆gt;

MDダイアログを作成します

私たちは今私たちのTo-Doアプリの素材デザインを扱うことができます。 Angular 2素材デザインから現在行方不明のコンポーネントの1つはプロンプトまたはダイアログです。

材料デザインカード、ツールバー、入力、および2つのボタンを使用して新しいコンポーネントを作成しましょう。の中に SRC / App. あなたのレポのフォルダ、タイプ NGコンポーネントダイアログを生成します 。これは新たに生成されます DialogComponent. に src / app / dialog にバレルを追加します system-config.ts だからSystemjsはそれをロードする方法を知っています。

あなたが生成を見るならば dialog.component.ts. ファイル、最初の行は次のようになります。 インポート{component、oninit} から 'angular / core'; 。成分角の主な建物のブロックの一つであり、 on on それが実装するインターフェースの1つです。ただし、ネストされたコンポーネント間の通信にアクセスできるようにするためには、上記の素材設計部品と同様に、入力をインポートする必要があります。出力そして イベントエミッタ から @角/コア。 そして m m 、 mdinput. 、 MDtoolbar. そして MDボタン の対応するモジュールから @ angular2 - 材料 図書館。

これらの材料コンポーネントをレンダリングするには、私たちの指令を注入する必要があります DialogComponent. 必要です。以下の指示を追加します @components. メタデータ：

 TemplateUrl： 'dialog.component.html'、
ディレクティブ：[MDカード、MDtoolbar、MDInput、MDButton]、
StyleURLS：['dialog.component.css']

その後数を宣言します @入力 変数（ oktext 、 キャンセルテキスト そして、ダイアログの内容を定義できるようにする。私達はまた追加する必要があります @出力 ダイアログが閉じられたときに親コンポーネントに値を持つ関数をトリガすることを可能にするエミッタ。

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

コンストラクタ（）{
 this.oktext = 'OK';
 this.cancelText = 'cancel';
}

EmitValue（値）{
 this.valueemitted.emit（value）;

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

the MDボタン ユーザーに[OK]、[キャンセル]、またはこれらのボタンにラベルを付けることを決定することを許可します。

ボタンMDボタン（クリック）= "EmitValue（NULL）" COLOR = "PRIMARY"＆GT。
  {{cancelText}}
＆lt; / button＆gt;
＆lt;ボタンMD-Raised-Button（Click）= "EmitValue（Value）" Color = "Primary"＆Gt。
  {{oktext}}
＆lt; / button＆gt;

に注意してください キーアップ EnterキーまたはEscapeキーが押されたときに物事の世話をするイベントハンドラ。これらのハンドラはそれと同じです クリック イベントハンドラ用 キャンセルテキスト そして oktext 。脱出はキャンセルと同じことをします （EmitValue（NULL）） Enterキーを押すと、[OK]をクリックするのと同じ結果があります。 （EmitValue（value）） 。これにより、ユーザーにAのユーザーを促すことができます値 a an. MD入力 放出された出力を受け取る。

多数の材料設計部品の例を見ることができます。 MDカード 、 MDボタン 、等々。私達はまたCSSを追加する必要があります dialog.component.css. 私たちが望むレイアウトを達成するために - あなたは添付のGithub Repoのフルコードを見ることができます。

それではこれを追加しましょう DialogComponent. に material2-do.component.html. それがどのように見えるかを見るために：

＆lt; app-dialog [title] = "''ダイアログプロンプト '"
  [テンプレート] = "'これは私たちの新しい素材設計ベースのコンポーネントです。
  [プレースホルダー] = "「ここでテキストを入力」
  [OKTEXT] = "はい '"
  [CANCELTEXT] = "「いいえ」
  [VALUE] = "「始動テキスト」
  （valueMitted）= "log（$ event）"
  [ShowPrompt] = "TRUE"＆gt;
＆lt; / app-dialog＆gt;

注意事項すべての文字通り文字列があります @ inputs 。これらは私たちがシングル引用符と二重引用符の両方を使用することを要求します、そうでなければ角度は内容を変数名として解釈するでしょう。成分範囲。

私達はまた発されたものもあります @出力 。これにより、ダイアログが単純で非常に設定可能になります。省略された場合、ほとんどの入力は空の文字列にデフォルトになっています。

修正しましょう Material2Docomponent 。 DialogComponentをインポートし、それをディレクティブとして宣言する必要があります。 Material2Docomponent それをレンダリングすることはできません。ログ機能を追加します。

ログ（テキスト）{
   console.log（テキスト）;

私たちの手仕事を見てみましょう。実行することで、アプリを処理できます（デフォルトのポートは4200です）。 NPMランスクリプトの開始 それは今度は走ります NGサーバー 。コンソールを開くと、ログに記録されているものが表示されます。[はい]をクリックしたときに入力の内容が発行されます。ヌル [いいえ]をクリックすると発行されます。

私たちは今この新たなものを使う準備ができています DialogComponent. 私たちのDOアプリを作成する。

メインアプリを作成します

メインアプリには、次のMDコンポーネントを使用します。 ツールバー 、 リスト 、 リスト項目 、 チェックボックス 、 ボタン 、 アイコン 、 アイコンレジストリ 、そしてその扶養家族、 http_provider. 角httpライブラリから。そのため、これらのインポートセクションに追加する必要があります。 Material2Docomponent 。

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

ディレクティブ：[MDカード、MDToolbar、MDList、MDListItem、MDCheckbox、MDButton、MDicon、DialogComponent]、

にアクセスするために mdiconregistry 、私たちはそれに沿ってそれを注入する必要があります http_providers. 、を介して @components. メタデータ プロバイダー アレイ：

プロバイダー：[Mdiconregistry、HTTP_PROVIDERS]、

今私達は私達を活用します DialogComponent. 簡単なアプリケーションで十分なロジックを追加してください。 the 撮影編集するタスクを使用して、ダイアログを開くように呼び出されます（ tod tod ）または又はヌル新しいものを作成している場合

新しいタスクのデフォルト変数を設定します。代わりにタスクを編集している場合は、それに応じて変更します。それから私たちは DialogComponent. に設定することによって ショーダイアログ 変数to. true ：

 TodoDialog（TODO = NULL）{
    this.okbuttontext = 'createタスク';
    this.fieldValue = '';
    this.editingTodo = Todo。
    if（TODO）{
      this.fieldValue = todo.title;
      this.okbuttontext = '編集タスク';
    }
    this.showdialog = true;

the UpdateTodo. 閉じたいときに関数が呼び出されます。他の機能（ edittodo. 、 追加 - Todo 、隠匿のためのヘルパー方法です UpdateTodo. 。

 updateodo（タイトル）{
    if（tite）{
      title = title.trim（）;
      if（this.editingTodo）{
        this.edittodo（タイトル）;
      } そうしないと {
        this.addtodo（タイトル）;
      }
    }
    this.HIDSIALOG（）;
  }

に material2-do.component.html. 私たちはアプリケーションを与えました MDツールバー タイトルを置いたところ、そしてAn MDアイコン 呼び出す追加（プラス記号のように見えます）私たちのフローティングアクションボタン（FAB）のためのものです。これにより、新しいタスクを作成できます。

ボタンMD-Fab Class = "Fab-Add"（Click）= "TodoDialog（）"＆gt;
      ＆lt; md-icon＆gt; add＆lt; / md-icon＆gt;
    ＆lt; / button＆gt;

を使用しております MD-Card-Content ANを保持する MDリスト と * ngfor. 繰り返し、展示する tod tod アレイAS MDリスト項目 ：

MD-CheckBox. リストの項目をオフにすることを可能にします。そして私たちは2つあります MDミニファブリック ボタンタスクを削除して編集するために使用できます。 md-icons delete_forever. そして MODE_EDIT ：

＆lt;ボタンMD-Mini-Fab（Click）= "Remove（Index）" Color = "Primary"＆Gt。
  ＆lt; MDアイコン＆gt; delete_forever＆lt; / md-icon＆gt;
＆lt; / button＆gt;

＆lt;ボタンMD  -  MINI-FAB（Click）= "TodoDialog（Todo）" Color = "Primary"
        [無効] = "todo.jppleted"＆gt;
  ＆lt; md-icon＆gt; mode_edit＆lt; / md-icon＆gt。
＆lt; / button＆gt;

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

今後

角材2がまだアルファにあるので、特に署名MDボタンの波紋効果が欠けていることがいくつかあります。先のAPIに壊れた変更が発生している可能性がありますが、非常に機能しています。また、開発者を混同していない簡単なAPIを持つことの主張にも住んでいます。

この記事はもともとネットの第284号、Webデザイナーと開発者向けの世界で最も売れている雑誌で発行されました。 ここで購読する 。

関連記事：

Angular 4の新機能
角度内にフルページのウェブサイトを構築する方法
AngularJSを使用してデータダッシュボードを構築します

角度2の材料設計アプリを構築する

設定する

素材デザインを追加してください

MDダイアログを作成します

メインアプリを作成します

今後

操作方法 - 最も人気のある記事

Tiktokでビデオを編集する方法

オオカミを描く方法

プログレッシブWebアプリを構築する方法

あなたのキャラクターが色と光でポップします

現実的なファンタジーナイトを作成する

アクリルで表現豊かな静物画を描く

使いやすさテストの紹介

3Dでスキンシェーディングをマスターする方法

カテゴリ