AngularJSでグローバルに利用できるモデルを定義

多くのサイトで紹介されているAngularJSのモデル定義方法は、HTML内にngModelとして以下のように宣言する。

<div ng-controller="ExampleController">
  <form name="userForm">
    Name:
    <input type="text" name="userName"
           ng-model="user.name"
           ng-model-options="{ getterSetter: true }" />
  </form>
  <pre>user.name = <span ng-bind="user.name()"></span></pre>
</div>

Factoryクラスの定義

リアルタイムなモデルの値変更をする場合はこれでよいが、ユーザーモデルのように、複数のコントローラで使用されるモデルが存在するならFactoryクラスを定義するのがよい。

angular('myModule').factory('User', function () {
  /**
   * コンストラクター
   */
  function User (name) {
    this.name = name;
  }

  /**
   * ゲッターメソッド
   */
  User.prototype.getName = function () {
    return this.name;
  }

  /**
   * セッターメソッド
   */
  User.prototype.setName = function (name) {
    this.name = name;
  }

  return User;
});

Factoryクラスの使用

コントローラー内でモデルを使用するなら以下のように書く

var injector = angular.injector(['myModule', 'ng']);
var User = injector.get('User');

app.controller('UserCtrl', ['$scope', function($scope) {
  var username = $scope.name;
  var user = new User(username);
}]);