AngularJS/TIPS集のバックアップ差分(No.9)

追加された行はこの色です。
削除された行はこの色です。
#topicpath
----


#contents

**getter/setterでフィールドにアクセスする [#qa056160]
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に変更してみた [#o4c78690]
  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をつかう [#i76b1881]

 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で紐付けたオブジェクトの構造 [#ce15274c]
たとえば以下のように 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をつくる [#ue186960]
 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を追加する [#uce89538]
 yo angular:factory weatherService
weatherservice.jsに weatherServiceというfactoryが追加され、さらにindex.htmlに
 <script src="scripts/services/weatherservices.js"></script>
が自動挿入されます。


**YeomanでControllerを追加する [#h87c832a]
 yo angular:controller menu5
menu5.jsに Menu5CtrlというControllerが追加され、さらにindex.htmlに
 <script src="scripts/controllers/menu5.js"></script>
が自動挿入されます。


**関連リンク [#l5ff47b0]
-[[The web's scaffolding tool for modern webapps | Yeoman>http://yeoman.io/]]

-[[AngularJSの$resourceの意外なハマりポイント | I am mitsuruog>http://blog.mitsuruog.info/2014/12/pitfall-at-angular-resource.html]]
-[[AngularJSのfactory内でHTTPリクエストサンプル - Qiita>http://qiita.com/tkc24@github/items/8a66369632dec767e027]]
-[[AngularJS: API: $http>https://docs.angularjs.org/api/ng/service/$http]]
-[[AngularJS と UI Bootstrapで$modalを使う場合のメモ - Qiita>http://qiita.com/nogson/items/41c6f3720701399d4b2a]]



----
この記事は
#vote(おもしろかった,そうでもない)

#comment

#topicpath

SIZE(10){現在のアクセス:&counter;}
AngularJS/TIPS集 のバックアップ差分(No.9)

AngularJS/TIPS集のバックアップ差分(No.9)
