javascript - 使用工厂 AngularJS 提供处理后的数据

Question

我正在开发一个应用程序，我在其中调用网络服务并获得响应。我在 2 个不同的模块中使用该响应。在第一个模块中，我按原样使用，在第二个模块中，我进行了一些格式化并使用它。

我创建了一个获取数据的服务如下

angular.module('myApp').factory('getData',function($http, $q, restURLS) {

var getData= {};

getData.getTree = function () {
    var deferred = $q.defer();
    $http.get(restURLS.getTree).
        success(function (data) {
            deferred.resolve(data);
        }).error(deferred.reject);
        return deferred.promise;
    };
    return getData;
});

为了服务响应，我创建了另一个工厂，如下所示

angular.module('myApp').factory('tree', function($http, $q, restURLS, getData, messages) {

  var tree= {};

  tree.hierarchy = {};
  tree.formattedHierarchy = {};

  function formatHierarchy(data) {
      //some formatting on data.
      tree.formattedHierarchy = data;
  }

  function callTree() {
      getData.getTree()
        .then(function (data) {
            tree.hierarchy = angular.copy(data);
            formatHierarchy(data);
        }).catch(function () {
            //error
        });
  }

  callTree();

   return tree;
});

我只想调用一次网络服务。如果加载了数据，那么 factory('tree') 应该将数据发送到 Controller 。否则 factory('tree') 应该调用 webservice 并加载数据。

Answer 1

你需要一些东西来知道你是否得到了你的树......试试这个:

(更新)

var myApp = angular.module('myApp', ['ngMockE2E'])
// FAKE HTTP CALL JUST FOR EMULATE
    .run(function ($httpBackend) {

    var tree = [{
        node1: 'abcde'
    }, {
        node2: 'fghi'
    }];

    $httpBackend.whenGET('/tree').respond(function (method, url, data) {
        return [200, tree, {}];
    });
})
// YOUR HTTP SERVICE
    .factory('getData', function ($http, $q) {

    return {

        getTree: function () {
            var deferred = $q.defer();
            $http.get("/tree").
            success(function (data) {
                deferred.resolve(data);
            }).error(deferred.reject);
            return deferred.promise;
        }
    }
})
    .factory('TreeFactory', function ($http, $q, getData) {

    var tree = {};
    var updated = false;

    tree.hierarchy = {};
    tree.formattedHierarchy = {};

    function formatHierarchy(data) {
        //some formatting on data.
        tree.formattedHierarchy = data;
    }

    return {
        callTree: function() {
            if(!updated){
                console.log("making http call");
                return getData.getTree().then(function (data) {

                    tree.hierarchy = angular.copy(data);
                    formatHierarchy(data);
                    updated = true;
                    return tree;
                }).
                catch (function () {
                    //error
                });
            }else{
                console.log("tree already loaded");
                var deferred = $q.defer();
                deferred.resolve(tree);
                return deferred.promise;
            }

        }
    };


}).controller("MyCtrl", ['$scope', 'TreeFactory', function ($scope, TreeFactory) {

    $scope.updateTree = function(){
        TreeFactory.callTree().then(function(data){
            $scope.tree = data;
        });
    };
}]);

HTML

<div ng-app="myApp" ng-controller="MyCtrl" ng-init="updateTree()">tree: {{tree}} <br><button ng-click="updateTree()">UPDATE TREE</button></div>

CHECK THE FIDDLE