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

KEIS BLOG

AngularJS入門07

LINEで送る
Pocket

misawa01

AngularJSとは

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

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

misawa02
実装方法 – Sample01

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

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

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

  class Sample01Controller
    constructor: () ->
      @title = 'Sample01'
      @model =
        name: 'AngularJS'

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

  angular
  .module 'mainApp'
  .controller 'Sample01Controller', Sample01Controller

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

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

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

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

  .when '/sample01', {
    templateUrl: 'samples/sample01.html',
    controller: 'Sample01Controller',
    controllerAs: 's01'
  }

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

  <input class="mdl-textfield__input" type="text" id="name1" ng-model="s01.model.name">

div tagにAngular model(‘s01.model.name’)を結合(‘ng-bind’)します。

  <div>Hello <span ng-bind="s01.model.name"></span>!!</div>

ソースコード
ソースコードは以下のリポジトリよりチェックアウトできます
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

LINEで送る
Pocket