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

KEIS BLOG

AngularJS入門08

LINEで送る
[`evernote` not found]
Pocket

misawa01
AngularJSとは

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

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

misawa02
実装方法 – 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除外(コントローラーのクラス化)」をご紹介します。

【関連記事】
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
AngularJS入門05
AngularJS入門06
AngularJS入門07

LINEで送る
[`evernote` not found]
Pocket