KEIS BLOGは株式会社ケイズ・ソフトウェアが運営しています。

KEIS BLOG

KEIS BLOG

ABOUT

AngularJS入門05


misawa01

AngularJSとは

AngularJSとはGoogleとコミュニティにより開発されたJavaScript（MVW *1）フレームワークです。データバインディング、DI（依存注入）などの機能を保有し、複雑なアプリケーションもシンプルに実装可能です。
*1 「MVW」とは「Model View Whatever」の略で、「Model」「View」「その他何でも」という意味です。

今回は
「Material Design Liteの適応」方法をご紹介いします。
AngularJSとは関連性がないですが・・。

Material Design Lite（マテリアル デザイン ライト）とは

Googleが発表したマテリアルデザインのガイドラインを元に作られたフレームワークです。
操作性・見た目をマテリアルデザインのガイドラインに準拠して作成されており、HTML、CSS，JavaScriptのコンポーネントを組み合わせて、
手軽にウェブサイトやブログ、ランディングページなどを作成することができます。

https://getmdl.io/

対応ブラウザ
マテリアルデザインライトは全てのブラウザに対応しています。
・Chrome
・Firefox
・Opera
・Microsoft Edge
・Safari
・Internet Explore(10以上) (*1)

*1 IE9もサポートされているが、見た目が少し変わる。

実装方法

まずは[index.html]ページの実装です。

misawa02
misawa03

index.htmlの機能
・Drawer Menuの実装（Material Design LiteのStyleを使用）
・Drawer Menuから各サンプルを切り替える。（[ng-view]を使用）
・JS及びCSSの読み込み（各サンプルで使用されるものを含む）
# [ng-view]を含むAngularJSに関する説明は省略します。

<!DOCTYPE HTML>
<html lang="ja" ng-app="mainApp">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>AngularJS入門</title>
    <script src="/bower_components/material-design-lite/material.min.js"></script>
    <script src="/bower_components/angular/angular.min.js"></script>
    <script src="/bower_components/angular-route/angular-route.min.js"></script>
    <script src="assets/js/main.js"></script>
    <script src="assets/js/sample01.js"></script>
    <script src="assets/js/sample02.js"></script>
    <script src="assets/js/sample03.js"></script>
    <link rel="stylesheet" href="/bower_components/material-design-lite/material.min.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  </head>
  <body ng-controller="MainController as main">
    <div class="mdl-layout mdl-js-layout">
      <header class="mdl-layout__header mdl-layout__header--scroll">
        <div class="mdl-layout__header-row">
          <span class="mdl-layout-title" ng-bind="main.model.title"></span>
        </div>
      </header>
      <div class="mdl-layout__drawer">
        <span class="mdl-layout-title">AngularJS samples</span>
        <nav class="mdl-navigation" menu-close>
          <a class="mdl-navigation__link" href="/#/sample01">Sample01</a>
          <a class="mdl-navigation__link" href="/#/sample02">Sample02</a>
          <a class="mdl-navigation__link" href="/#/sample03">Sample03</a>
          <a class="mdl-navigation__link" href="/#/sample00">Sample04</a>
          <a class="mdl-navigation__link" href="/#/sample00">Sample05</a>
        </nav>
      </div>
      <main class="mdl-layout__content">
        <div class="page-content" ng-view></div>
      </main>
    </div>
  </body>
</html>

Layout header部
・メニューアイコンを含むヘッダー部を表示する。
・関連クラス
– mdl-layout__header: MDLコンポーネントをコンテナとして定義
– mdl-layout__header–scroll: コンテンツのスクロールを行う
– mdl-layout__header-row: MDLヘッダ行をコンテナとして定義
– mdl-layout-title: レイアウトタイトルを定義

  <header class="mdl-layout__header mdl-layout__header--scroll">
	<div class="mdl-layout__header-row">
	  <span class="mdl-layout-title" ng-bind="main.model.title"></span>
	</div>
  </header>

Layout drawer部
・メニューアンコンが押された時に表示されるDrawerの設定
・Drawerの表示／非表示はMaterial Design Lite側で行われる。

  <div class="mdl-layout__drawer">
	<span class="mdl-layout-title">AngularJS samples</span>
	<nav class="mdl-navigation" menu-close>
	  <a class="mdl-navigation__link" href="/#/sample01">Sample01</a>
	  <a class="mdl-navigation__link" href="/#/sample02">Sample02</a>
	  <a class="mdl-navigation__link" href="/#/sample03">Sample03</a>
	  <a class="mdl-navigation__link" href="/#/sample00">Sample04</a>
	  <a class="mdl-navigation__link" href="/#/sample00">Sample05</a>
	</nav>
  </div>

– 関連クラス
– mdl-layout__drawer: コンテナをMDLレイアウトドロアーとして定義
– mdl-layout-title: レイアウトタイトルを定義
– mdl-navigation: MDLナビゲーショングループをコンテナとして定義
– mdl-navigation__link: MDLナビゲーションリンクをアンカーとして定義

misawa04

sample01.htmlの機能

・Model経由でinputタグから入力された文字列と別のタグの表示内容を同期させる。
・「AngularJS入門02」で紹介したサンプルをMaterial Designに対応

<h3 ng-bind="s01.title"></h3>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
  <input class="mdl-textfield__input" type="text" id="name1" ng-model="s01.model.name">
  <label class="mdl-textfield__label" for="name1">Input your name</label>
</div>
<div>Hello <span ng-bind="s01.model.name"></span>!!</div>

– 関連クラス
– mdl-textfield: コンテナをMDLコンポーネントとして定義
– mdl-js-textfield: テキストフィールドをエレメントとして定義
– mdl-textfield–floating-label: フローティングラベルのエフェクトを定義
– mdl-textfield__input: テキストフィールドInputに基本MDLの挙動を適用
– mdl-textfield__label: テキストフィールドLabelに基本MDLの挙動を適用

misawa05
sample02.htmlの機能
・Modelの値をCheckBoxでON/OFFできる。
・Modelの値で表示／非表示の文字列を表示する。
・Modelの値で画像の表示／非表示を切り替える。
・画像をクリックするとModelの値が変更される。
・「AngularJS入門02」で紹介したサンプルをMaterial Designに対応

<h3 ng-bind="s02.title"></h3>
<div>
  <label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="switch-1">
    <input type="checkbox" id="switch-1" class="mdl-switch__input" ng-model="s02.model.checkbox">
    <span class="mdl-switch__label">CheckBoxの値は <span ng-bind="s02.model.checkbox"></span></span>
  </label>
  <br>
  <br>
  <div>画像：<span ng-show="s02.model.checkbox">表示</span><span ng-hide="s02.model.checkbox">非表示</span></div>
  <img src="https://angularjs.org/img/AngularJS-large.png" ng-show="s02.model.checkbox" ng-click="s02.model.checkbox=false">
  <div>
    ※画像クリックでチェックボックスをOFF
  </div>
</div>

– 関連クラス
– mdl-switch: スイッチをMDLコンポーネント
– mdl-js-switch: スイッチをエレメントとして定義
– mdl-js-ripple-effect: クリック時のリップルエフェクトを定義
– mdl-switch__input: スイッチに基本MDLの挙動を適用
– mdl-switch__label: キャプションに基本MDLの挙動を適用

misawa06

sample03.htmlの機能
・Modelに設定されているリストを元に画面を表示する。
・税率の入力が行える。
・税率により税込金額を計算する。

<div>
  <table class="mdl-data-table mdl-js-data-table mdl-shadow--2dp">
    <tr>
      <th class="mdl-data-table__cell--non-numeric">Code</th>
      <th class="mdl-data-table__cell--non-numeric">商品名</th>
      <th>価格</th>
      <th>税込</th>
    </tr>
    <tr ng-repeat="item in s03.model.list">
      <td class="mdl-data-table__cell--non-numeric" ng-bind="item.code"></td>
      <td class="mdl-data-table__cell--non-numeric" ng-bind="item.name"></td>
      <td ng-bind="item.price"></td>
      <td ng-bind="item.price * s03.model.tax | number:0"></td>
    </tr>
  </table>
  <br />
  <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
    <input class="mdl-textfield__input" type="text" id="tax" ng-model="s03.model.tax">
    <label class="mdl-textfield__label" for="tax">税率</label>
  </div>
</div>

– 関連クラス
– mdl-data-table: テーブルをMDLコンポーネントとして定義
– mdl-js-data-table: テーブルにMDLの挙動を割り当て
– mdl-data-table__cell–non-numeric: データセルにテキストフォーマットを適用

ソースコード
ソースコードは以下のリポジトリよりチェックアウトできます
https://github.com/Sin330/ng_sample

デモ
下記のサイトから今回紹介したサンプルが実行できます。
https://ng-smple.appspot.com/

次回は「2. Angular3へのマイグレーションを見越しての、$scope除外（コントローラーのクラス化）」をご紹介します。

【関連記事】
Google App Engine 第一回
Google App Engine 第二回
Javaのライブラリを手軽にテストしたい！！　Groovy入門 第1回
Google App Engine 第三回
Google App Engine 第四回
Google App Engine 第五回
Google App Engine 第六回
Google App Engine 第七回
Google App Engine 第八回
Google App Engine 第九回
Google App Engine 第十回
Google App Engine 第十一回
Google App Engine 第十二回
AngularJS入門01
AngularJS入門02
AngularJS入門03
AngularJS入門04