【Angularサンプルプログラム解説(1)】ヘッダメニューについて

はじめに

前回までで、Angular入門編として基本的な部分の解説は一通りしました。

 

もう少し実践で参考にできるようなサンプルプログラムを作成したい。。。と思ったので、

Angularでショッピングサイトをイメージしたサンプルアプリを作ってみました。

こんな感じ

ということで、今回からは作成したサンプルアプリについて、機能単位にポイントを絞って解説していきます。

今回はサンプルアプリのヘッダメニューについて解説します。

 

 

 環境

  • OS:OS X 10.11 El Capitan
  • node:v8.1.0
  • Angular CLI:1.2.7
  • Visual Studio Code:1.13

 

前提

以下からサンプルアプリのソースコードを取得している前提で説明を行います。

ショッピングサイトサンプルプログラム

 

 

解説

解説のポイントは以下4点です。

  1. ヘッダメニュー作成に利用したモジュールについて
  2. 全ての画面に対してのヘッダ表示について
  3. メニューへのアイコン表示について
  4. マウスオーバーイベントでのメニューオープンについて

 

1.ヘッダメニュー作成に利用したモジュールについて

ヘッダメニュー作成にはAngularMaterialのMdMenuModuleを利用しました。

AngularMaterialについての詳しい解説は以下の記事を参照してください。

【Angular入門(7)】Angular Materialを使ってみる

 

2.全画面に対してのヘッダ表示について

サンプルアプリでは、商品登録画面、商品一覧画面、ユーザ登録画面・・・などの複数の画面があります。

ヘッダメニューはこれらすべての画面で共通利用できるように作成しています。

やり方はいろいろあるかと思いますが、今回はすべての画面のベースとなるhtmlファイルでヘッダコンポーネントを読み込ませました。

src/app/app.component.html
<block-ui>
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <!--↓でヘッダコンポーネントを読み込む-->
    <header-root></header-root>
    <router-outlet></router-outlet>
</block-ui>

3.メニューへのアイコン表示について

作成したメニューの各ボタンには、それぞれ左側にアイコンを表示しています。このアイコンを表示するための設定を確認していきます。

まず、ヘッダメニューのhtmlを確認してください。

src/app/common/header.component.html
<!-- 99_ヘッダ -->
<md-toolbar color="primary">
    <img src="../favicon.ico">
    <span class="example-spacer"></span>
    <!-- メニューボタン -->
    <button md-icon-button [mdMenuTriggerFor]="menu" #menuTrigger="mdMenuTrigger" (mouseenter)="menuTrigger.openMenu()">
        <md-icon>menu</md-icon>
    </button>
    <!-- メニュー項目(メニューボタンクリックorマウスオーバーでオープン) -->
    <md-menu #menu="mdMenu">
        <!-- 各メニュー項目 -->
        <button md-menu-item routerLink="/login">
            <!-- アイコン定義 -->
            <md-icon>fingerprint</md-icon>
            <!-- ボタンに表示する文言 -->
            <span>ログイン</span>
        </button>
        <button md-menu-item routerLink="/userregist">
            <md-icon>account_box</md-icon>
            <span>新規登録</span>
        </button>
        <button md-menu-item routerLink="/goodsregist">
            <md-icon>add_to_photos</md-icon>
            <span>商品登録</span>
        </button>
        <button md-menu-item routerLink="/registedgoodssearch">
            <md-icon>search</md-icon>
            <span>登録商品検索</span>
        </button>
        <button md-menu-item routerLink="/userupdate">
            <md-icon>face</md-icon>
            <span>ユーザ編集</span>
        </button>
        <button md-menu-item routerLink="/unsubscribe">
            <md-icon>block</md-icon>
            <span>退会</span>
        </button>
    </md-menu>

</md-toolbar>
MEMO
各メニュー項目のアイコンはmd-iconタグの中のidで定義します。

たとえば上の例だと、ログインメニューボタンにはfingerprintというidを指定することで指紋認証みたいなアイコンを設定しています。

他にもいろんなアイコンがあります。

Material Icons Library

 

Material Iconを利用するには、以下のように利用する画面でlinkを読み込む必要があるので忘れないように読み込んでください。

src/app/app.component.html
<block-ui>
    <!--↓ここでlinkを読み込んでMaterial Iconを利用できるようになる -->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <header-root></header-root>
    <router-outlet></router-outlet>
</block-ui>

 

4.マウスオーバーイベントでのメニューオープンについて

ヘッダメニューのバーガーアイコンはマウスオーバーに反応してメニューをオープンするように作ってみました。

これを実現するために、以下のようにmouseenterイベントの定義が必要です。

src/app/common/header.component.html
<!-- 99_ヘッダ -->
<md-toolbar color="primary">
    <img src="../favicon.ico">
    <span class="example-spacer"></span>
    <!-- (mouseenter)="menuTrigger.openMenu()によってマウスオーバー時にメニューオープン -->
    <button md-icon-button [mdMenuTriggerFor]="menu" #menuTrigger="mdMenuTrigger" (mouseenter)="menuTrigger.openMenu()">
        <md-icon>menu</md-icon>
    </button>
・
・
・

 

 

おわりに

今回はヘッダメニューにポイントを絞ってサンプルアプリの解説をしました。

サンプルでは、ヘッダメニューの各ボタンの横にアイコンを付けたり、マウスオーバーでメニューオープンできるようなメニューにしてみました。

(個人的にはメニューを開け閉めするときにフワッと動くところも気に入ってます。)

 

ぜひ、Angular Materialをフル活用してちょっとおしゃれなメニューを作ってみてください。

 

2 Comments

SHOHEY

返信遅くなり申し訳ございません。。
以下でログインできます!!

ユーザID:9
パスワード:123456

返信する

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください