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に変更しよう、とかなっても利用側は変更不要にできそうですね。。
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どちらでも) にすることができます。
bower install ngstorage --save
でngstorageをインストールし、
angular.module(APP_NAME, [ ..... 'ui.router', 'ngStorage' ]);
でngStorageを依存モジュールに定義しておきます
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でオブジェクトをバインドした場合
<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 ←ココ });
こんな感じでそのまま渡せてとても便利。。
sudo npm install -g yo bower grunt-cli sudo npm install -g generator-angular sudo npm install -g generator-karma karma
がインストール済みだとして、
yo angular
でOK
yo angular:factory weatherService
weatherservice.jsに weatherServiceというfactoryが追加され、さらにindex.htmlに
<script src="scripts/services/weatherservices.js"></script>
が自動挿入されます。
yo angular:controller menu5
menu5.jsに Menu5CtrlというControllerが追加され、さらにindex.htmlに
<script src="scripts/controllers/menu5.js"></script>
が自動挿入されます。
この記事は
現在のアクセス:4011