AngularJS入門08

2016年12月19日
CATEGORY- 1. 技術力｛技術情報｝

AngularJSとは

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

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

実装方法 – Sample02

まずは[sample02.coffee]の実装です。
[sample02.coffee]は[sample02.html]ページ用のJavaScriptです。

以下、全体のソースコードです。

始めにコントローラークラス(‘Sample02Controller’)を作成します。
クラスの作りはシンプルで、コンストラクタで変数(‘title’,’model’)を作成して、’title’に’Sample02’を’model.checkbox’にtrueをそれぞれ設定しています。

  class Sample02Controller
    constructor: () ->
      @title = 'Sample02'
      @model =
        checkbox: true

次にモジュール(‘mainApp’)を作成し、上で作成したコントローラークラスをAngularのコントローラーとして登録します。

  angular
  .module 'mainApp'
  .controller 'Sample02Controller', Sample02Controller

続いてHTML部のソースコードの解説です。

h3 tagに’title’を結合(‘ng-bind’)します。
下記でバインドされている、’s02’はコントローラー(‘Sample02Controller’)の別名です。

<h3 ng-bind="s02.title"></h3>

# コントローラーは別名で指定されているので注意が必要です。
設定は前回のルーティング設定で行います。(前回のソースコードより抜粋)

  .when '/sample02', {
    templateUrl: 'samples/sample02.html',
    controller: 'Sample02Controller',
    controllerAs: 's02'
  }

input tagとAngularのモデル(‘s02.model.checkbox’)を結合(‘ng-model’)します。

    <input type="checkbox" id="switch-1" class="mdl-switch__input" ng-model="s02.model.checkbox">

span tagにAngular model(‘s02.model.checkbox’)を結合(‘ng-show’)します。
model(‘s02.model.checkbox’)の値がtrueの場合、span tagが表示され、画面に「表示」が描画されます。

  <span ng-show="s02.model.checkbox">表示</span>

span tagにAngular model(‘s02.model.checkbox’)を結合(‘ng-hide’)します。
model(‘s02.model.checkbox’)の値がfalseの場合、span tagが表示され、画面に「非表示」が描画されます。

  <span ng-hide="s02.model.checkbox">非表示</span>

img tagにAngular model(‘s02.model.checkbox’)を結合(‘ng-show’)します。
model(‘s02.model.checkbox’)の値がtrueの場合、img tagが表示され、画像が表示されます。
img tagにevent(‘bg-click’)を設定します。
下記の例では、画像がクリックされた時、Angular model(‘s02.model.checkbox’)の値をfalseに設定しています。

  <img src="https://angularjs.org/img/AngularJS-large.png" ng-show="s02.model.checkbox" ng-click="s02.model.checkbox=false">

おまけ機能
下記ソースを追加することで、モデル内の値をJson形式でリアルタイムに表示することが出来ます。
この機能を利用することで、Angularのデバック作業が捗ります。

<pre>{{s02|json}}</pre>

出力サンプル

{
  "title": "Sample02",
  "model": {
    "checkbox": true
  }
}

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

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

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

2016年12月19日
CATEGORY- 1. 技術力｛技術情報｝

AngularJS入門08

CATEGORY

LATEST ENTRY

秀長に学ぶ(3)

秀長に学ぶ(2)

秀長に学ぶ(1)

ダム式経営について

経営の安定について

TAG