AngularJS/TIPS集のバックアップ(No.8)

getter/setterでフィールドにアクセスする
保存先をWebStorageに変更してみた
ControllerからWebStorageをつかう
ng-modelで紐付けたオブジェクトの構造
YeomanでAngularJSの Scaffoldをつくる
YeomanでServiceを追加する
YeomanでControllerを追加する
関連リンク

getter/setterでフィールドにアクセスする †

JavaBeans?みたいに。。

angular.module(APP_NAME)
  .factory('getsetservice', function () {
    // Public API here
    return {
      get data1() {
        console.log('getter!!');
        return this._data1;
      },
      set data1(val) {
        console.log('setter!!');
        this._data1 = val;
      }
    };
  });

Controller側はこちら;

angular.module(APP_NAME)
  .controller('Menu5Ctrl', function ($scope, getsetservice) {
       getsetservice.data1 = 'kino';
       console.log('data1: ' + getsetservice.data1);
       console.log('_data1: ' + getsetservice._data1);    <- これでアクセスできちゃうのはご愛敬 :-)
    }
  });

プロパティに直接セットしているように見えるけど実はアクセッサ経由。。ストア先をメモリ上でなくてlocalStorageに変更しよう、とかなっても利用側は変更不要にできそうですね。。

↑

保存先をWebStorage?に変更してみた †

 angular.module(APP_NAME)
  .factory('getsetservice', function ($localStorage, $sessionStorage) {
    // Public API here
    return {
      get localData1() {
        console.log('local storage getter!!');
        return $localStorage._localData1;
      },
      set localData1(val) {
        console.log('local storage setter!!');
        $localStorage._localData1 = val;
      },
      get sessionData1() {
        console.log('session storage getter!!');
        return $sessionStorage._sessionData1;
      },
      set sessionData1(val) {
        console.log('session storage setter!!');
        $sessionStorage._sessionData1 = val;
      }
    };
  });

こうしておけば、ストア先をWebStorage?(session/localどちらでも) にすることができます。

あ、AngularJSでWebStorage?を使う場合は

bower install ngstorage --save

でngstorageをインストールし、

angular.module(APP_NAME, [
   ..... 
   'ui.router',
   'ngStorage'
 ]);

でngStorageを依存モジュールに定義しておきます

↑

ControllerからWebStorage?をつかう †

angular.module(APP_NAME)
  .controller('Menu5Ctrl', function ($scope, $localStorage, $sessionStorage) {
    // デフォルト値とともに変数の定義
    $scope.$storage1 = $localStorage.$default({
      ctrl_localData2: 'localDef'
    });
    $scope.$storage2 = $sessionStorage.$default({
      ctrl_sessionData2: 'sessionDef'
    });

    $scope.onClick = function () {
      $scope.$storage1.ctrl_localData2 = $scope.localData1;
      $scope.$storage2.ctrl_sessionData2 = $scope.sessionData1;
    }
  });

↑

ng-modelで紐付けたオブジェクトの構造 †

たとえば以下のように ng-modelでオブジェクトをバインドした場合

<form class="form-horizontal" role="form" ng-submit="addRow()">
    <div class="form-group">
        <label class="col-md-2 control-label">param1</label>
        <div class="col-md-4">
            <input type="text" class="form-control" name="postData.param1"
                   ng-model="postData.param1" />
        </div>
    </div>
    <div class="form-group">
        <label class="col-md-2 control-label">param2</label>
        <div class="col-md-4">
            <input type="text" class="form-control" name="postData.param2"
                   ng-model="postData.param2" />
        </div>
    </div>
    <div class="form-group">
        <div style="padding-left:110px">
            <input type="submit" value="Submit" class="btn btn-primary"/>
        </div>
    </div>
</form>

$scope.postDataは

{
  param1="aaa",
  param2="bbbbb"
}

のようなオブジェクトが格納されます。$httpとかに

$http({
  method: method,
  url: url,
  data: postData  ←ココ
});

こんな感じでそのまま渡せてとても便利。。

↑

YeomanでAngularJSの Scaffoldをつくる †

sudo npm install -g yo bower grunt-cli
sudo npm install -g generator-angular
sudo npm install -g generator-karma karma

がインストール済みだとして、

yo angular

でOK

↑

YeomanでServiceを追加する †

yo angular:factory weatherService

weatherservice.jsに weatherServiceというfactoryが追加され、さらにindex.htmlに

<script src="scripts/services/weatherservices.js"></script>

が自動挿入されます。

↑

YeomanでControllerを追加する †

yo angular:controller menu5

menu5.jsに Menu5CtrlというControllerが追加され、さらにindex.htmlに

<script src="scripts/controllers/menu5.js"></script>