使用angular-resource库加载本地json文件，并使用ngStorage库将数据保存到WebStorage并进行处理的方法

3 年 ago
文, 翔
2 minutes

简而言之

正如标题所示。虽然不知道是否存在这样的需求，但我觉得这对我的学习很有帮助，所以就当作备忘录记录下来了。

前提和动机

我原本希望从文件中读取以下这样的数据作为初始值，但考虑到数据的保存问题，我决定将数据存储在WebStorage（我使用的是LocalStorage）中，而不是写入文件。由于这是一个基于HTML5的应用程序（Android/iOS），所以无法使用ngResource的POST方法作为文件保存方式。

[
  {
    "author": "Archer",
    "title": "Aces: nothing else comes close."
  },{
    "author": "Chopper",
    "title": "Rock'n Roll is my life."
  },{
    "author": "Edge",
    "title": "let me fly as your wingman just a little while longer..."
  },{
    "author": "Swordsman",
    "title": "Faces of Aces"
  }
]

使用詞彙

    • angular-resource = ngResource = $resource: 同じことです。最初は区別しようと思っていたのですが断念。。

 

    ngStorage = $storage: 同じです。

解决方案的概要

    • 初期値ファイルの読み込みにはngResource(angular-resource)を使います。

 

    • ただし、書き込み(POST)はサーバ側の実装が必要になるので読み込み(GET)のみ使います。

 

    WebStorageはngStorageを用いました。$watchを使った双方向バインディングが強力です。

手段的细节

1. 安装 angular-resource 和 ngStorage。

下载并安装ngstorage和angular-resource。

    • ng’S’torageではなく、sを小文字で入力してください。

–saveオプションをつけた方がbower.jsonに依存性を保存できるので便利ですね。

2. 在index.html中引入库的js文件和自己的js文件。

<!doctype html>
<html>
  <head><meta charset="utf-8">
    <!-- angular, angular-resource, ngStorageを読み込み -->
    <script src="bower_components/angular/angular.js"></script>
    <script src="bower_components/angular-resource/angular-resource.js"></script>
    <script src="bower_components/ngstorage/ngStorage.js"></script>
    <!-- メインロジックを読み込み -->
    <script src="app.js"></script>
  </head>

  <body ng-app="StrageTestApp">
    <div ng-controller="MainCtrl as mc"> <!-- 以降mcでアクセス可能 -->
      <ul>
        <li ng-repeat="i in mc.items">
          author: <input ng-model="i.author">
          title: <input ng-model="i.title">
        </li>
      </ul>
    </div>

  </body>
</html>

3. 我们使用Javascript来编写Angular代码。以下是一些建议。

    • angular.moduleでngResourceとngStorageをinjectします。

 

    • Local Storageを使う場合はconfigで$localStorageProviderに

 

    • prefixをつけた方がbetterです。

 

    • 同サイトの他のwebアプリとデータが混在してしまうためです。

 

    • Session Storageの場合はあまり気にならないと思います。

 

    • factoryでデータの読み込みとLocal Storageへのバインドを行います。

ngResourceは遅延実行される点がポイントです。$promiseを使いましょう。

'use strict';

/**
 * app definition
 * ここでngResourceとngStorageをinjectionする
 */
angular.module('StrageTestApp', [
  'ngResource',
  'ngStorage'
])
.config(['$localStorageProvider',
    function ($localStorageProvider) {
        // prefixをつけないと他のwebアプリと混在してしまいます。
        $localStorageProvider.setKeyPrefix('StrageTest');
    }]);

/**
 * controller
 * サービスとindex.htmlとの橋渡しをする。
 */
angular.module('StrageTestApp')
  .controller('MainCtrl', ['MainService', function(MainService){
    // $scopeでもOKです。
    this.items = MainService.all(); // $localStorageをitemsへ
  }]);

/**
 * service(factoryサービス)
 * 1. ngResourceでdata.jsonから読み込む
 * 2. 1.をlocalStorageに保存する
 *    - session storageを使いたい場合は$sessionStorageを。
 * all: localStorageオブジェクトを返却するメソッド
 */
angular.module('StrageTestApp')
  .factory('MainService', ['$resource', '$localStorage',
    function($resource, $localStorage){

      // $resource(ngResource)を使って読み込む
      var res = $resource('data.json');

      // $resourceは遅延実行なので$promiseを使ってデータを取得できるまで
      // 待ってから$localStorageへ保存
      var data = res.query();
      data.$promise.then(function(){
        $localStorage.$default(data); // localStorageの$defaultへ
      });

      // factoryサービスのreturn部
      return{
        all: function(){
          return $localStorage; // $localStorageを返す
        }
      };
    }]);

行動的結果

    • 一度バインドしてしまえば、angularの双方向バインドが効き、一文字単位で入力内容が

 

    Web Storageに反映されます。非常に便利だと思います。
1.png
2.png

討論、未來工作

    • 全てをローカルで実施したい場合は使いやすいのではないかと思います。

 

    • ngStorageのprefixはまだ課題があるようでしたが (参考1)、今は特に問題なさそうに見えます

 

    。どなたか情報あれば。

请提供参考链接。

使用AngularJS进行异步处理
官方网站：$resource文档
GitHub：ngStorage
参考1：由amoO_O先生创建了一个方便使用webStorage的AngularJS模块

bannerAds