徒然なるままに、AngularJS を MVVM パターンで書いてみる

最近、Knockout.js や Vue.js 等の MVVM フレームワークを触っていて、ふと AnuglarJS だったらどう書けるんだろう、と興味をもったので試してみました。

※ MVVM とは Model-View-ViewModel です。

$scope が ViewModel だろう、という話もあるかもしれませんが、見た目として分りやすいオブジェクトを作るという意味で、です。

• ちなみに前提となるローカル環境はこちら。
  • ゼロから始める！AngularJSの環境構築 [Mac編]

ViewModel の定義

Controller用のファイルに書きます。ちゃんとやるなら、Factory や Service とした方が良いのかな？

次のように data プロパティで値に、method プロパティでメソッドにアクセスできるようにしました。
好みの問題で、コンストラクタ関数にはしていません（してもいいんだけど）。

ソースコードの最後で、AngularJS の $scope に紐づけます。

下記は CoffeeScript 記法です。

app/scripts/controllers/main.coffee

'use strict'

angular.module('angularjsMvvmApp')
  .controller 'MainCtrl', ($scope) ->

    makeViewModel = () ->
      obj = {
        data:
          name: "山田太郎"
          age: "42"
          memo: "これはやまだのメモ"
          message: ""
        method:
          hello: ->
            obj.data.message = obj.data.name + " さん、こんにちわ！"
            return
      }
      return obj

    $scope.main = makeViewModel()

    return

View の記載

特に説明することはありませんが、「main」ViewModel の値には main.data.hoge で、メソッドには main.method.hoge() でアクセスします。

app/views/main.html

<p>
  名前：{{main.data.name}}
</p>
<p>
  年齢：{{main.data.age}}
</p>
<p>
  メモ：{{main.data.memo}}
</p>
<p>
  メッセージ：{{main.data.message}}
</p>

<br>

<p>
  メソッド実行：<button class="btn btn-info" ng-click="main.method.hello()">ボタン</button>
</p>

<br>

<p>
  データバインド：<input ng-model="main.data.name">
</p>

動作確認

デモをこちら(GitHubページ)に置きました。
⇒ http://hkusu.github.io/AngularJS_MVVM_demo/dist/

ちゃんと動いてますね^^

感想

昨今のブラウザアプリケーションの各コンポーネントの「状態」と「振る舞い」を表現するには、やはりが分りやすいかなあと思いました。ViewModel の定義を見れば、そのコンポーネントが扱うデータと振る舞いが一目瞭然ですし。

MVVM の Model 部分については今回は作成していませんが、View に関わらないデータや振る舞いについては、AngularJS でいえば Factory や Service に追い出せばよいかと。

ほか

今回のソースは GitHub に置きました。
⇒ https://github.com/hkusu/AngularJS_MVVM_demo

また、下記の記事を参考にさせて頂きました。
⇒ Angular.jsで組む場合のアーキテクチャは、MVCじゃなくてMVVMの方が良いっぽいと思った話