2

AngularJS を学習し、REST サーバー用のデータ ストアを使用して SPA を作成しようとしています。トラフィックをできるだけ減らすために、可能な限りデータをキャッシュしたいと考えています。サーバーからのエラー応答の場合、すべてのコールバックに対して 1 つの共通ディレクティブで処理したいと考えています。これにより、共通の方法で複数のコントローラーにまたがるディレクティブを使用できるようになります。

この投稿は、$emit および/または $broadcast がディレクティブが $on を待っているというイベントを発生させないことを除いて、すべて機能します。機能していた場合、ディレクティブのテンプレートにはエラーの説明が含まれ、isError が true になると HTML ページに表示されます。少なくともそれが私の現在の考えです...

プランカー

私のサンプル HTML ファイル:

<!DOCTYPE html>
<html ng-app="app">

<head>
<script data-require="angular.js@1.2.x" src="https://code.angularjs.org/1.2.16/angular.js" data-semver="1.2.16">    </script>
<script data-require="angular-resource@1.2.14" data-semver="1.2.14" src="http://code.angularjs.org/1.2.14/angular-resource.js"></script>
<!--script src="app.js"></!--script-->
</head>
<body ng-controller="MainCtrl">
<h1>Hello Plunker!</h1>
{{data}}
<br />
<br />
isError: <error></error>

<br /><br />
Cached Data: {{dataCache}}

<br /><br />
<button ng-click="getData()">Data Callback</button>
<br /><br /><br />
<button ng-click="getError()">Callback Error</button>
<br /><br /><br />
Cache Info: {{oDataServiceInfo}}<br />
<button ng-click="resetCache()">Reset Cache</button>

</body>
</html>

私のサンプルコントローラー:

var app = angular.module('app', ['ngResource']);

app.controller('MainCtrl', ['$scope', '$rootScope', 'loDataService', function ($scope,$rootScope, loDataService) {

    $scope.getData = function () {
        loDataService.getData(function (data) {
            $scope.dataCache = loDataService.lCache
            $scope.oDataServiceInfo = loDataService.oInfo;
            $scope.data = data;
        }, function (error) {
            console.log(error);
        })
    };

    $scope.getError = function () {
        loDataService.getError(function (data) {
            $scope.dataCache = loDataService.lCache
            $scope.oDataServiceInfo = loDataService.oInfo;
            $scope.data = data;
        }, function (error) {
            $rootScope.$broadcast("resourceError", error);

            console.log(error);
        })

    };

    $scope.resetCache = function () {
        loDataService.resetCache();
        $scope.oDataServiceInfo = loDataService.oInfo;
    };


}]);

私のサンプルデータストア:

app.factory('loDataService', ['$resource','$cacheFactory','$rootScope', function ($resource, $cacheFactory, $rootScope) {
    var dbcCache = $cacheFactory('loDataService');
    var oDBC = $resource('/', {},
        {
            'GetError': { url:'nonExistingConnection',method: 'GET' },
            'GetData': { url: 'sampleData.json', method: 'GET', isArray: false }
        });

    return {
        lCache: true,
        oInfo: {},
        resetCache: function () {
            dbcCache.removeAll();
            this.oInfo = dbcCache.info();
        },
        getData: function (callback, callbackError) {
            _this = this;
            var markets = dbcCache.get('Markets');
            if (!markets) {
                // fetch from server
                _this.lCache = false;
                oDBC.GetData(function (response) {
                    // store in cache
                    dbcCache.put('Markets', response.Markets);
                    _this.oInfo = dbcCache.info();
                    // return response
                    callback(response.Markets);
                },
                    function (error) {
                        // oh no, what went wrong?
                        callbackError(error);
                    });
            } else {
                // return the cache
                _this.lCache = true;
                callback(markets);
            }
        },
        getError: function (callback, callbackError) {
            _this = this;
            var marketsX = dbcCache.get('MarketsX');
            if (!marketsX) {
                // fetch from server
                _this.lCache = false;
                oDBC.GetError(function (response) {
                    // store in cache
                    dbcCache.put('MarketsX', response.Markets);
                    // return response
                    callback(response.Markets);
                },
                    function (error) {
                        // oh no, what went wrong?
                        callbackError(error);
                        $rootScope.$broadcast("resourceError", error);
                    });
            } else {
                // return the cache
                _this.lCache = true;
                callback(marketsX);
            }
        }
    }

}]);

私のサンプルディレクティブ:

app.directive("resourceError", ['$rootScope', function ($rootScope) {
    return {
        restrict: 'E',
        template: '<div class="alert-box alert" ng-show="isError" >Error!!!</div>',
        link: function (scope) {
            $rootScope.$on("resourceError", function (event, error) {
                scope.isError = true;
                console.log(error);
            })
        }
    }
}]);

ここに私の「sampleData.json」ファイルがあります。

{
    "Markets": [{
        "id": 1,
        "name": "Downtown",
        "eventday": "1/1/1991",
        "active": true
    }, {
        "id": 2,
        "name": "County",
        "eventday": "2/2/1991",
        "active": true
    }, {
        "id": 3,
        "name": "Beach",
        "eventday": "3/3/1991",
        "active": false
    }]
}

何かご意見は？

4

0 に答える 0