分解AngularJS - 如何正确使用工厂来请求和更新数据代表数据

时间:2015-04-24 15:25:39

标签: angularjs angularjs-factory

我一直在努力弄清楚使用工厂代表ajax数据的'有角度'的工作方式(我使用config在控制器之间进行了很多共享)。我做了一些广泛的研究,所有的答案似乎分为两类:

  1. 使用工厂表示数据,然后在控制器中获取数据并更新工厂:
  2. {不打算成为实际可运行的角度}

    var app = angular.module('main', [])
    app.factory('data', function($http){
        var data = []
        return data
    })
    app.controller('cntrl', [$scope, $http, data]){
        $scope.data = data
        $http.get('/data').success(
            function(idata){
                $scope.data = idata
        )
    }
    
    1. 使用工厂表示带有promise的http请求,然后将该数据分配给$ scope

      var app = angular.module('main', [])
      app.factory('data', function ($http, $q){
          var factory = {};
          factory.getdata = function(){
              var defer = $q.defer();
              $http.get('/data').success(function(idata) {
                  defer.resolve(idata);
              })
              return defer.promise;
          }
          return factory;
      });
      app.controller('cntrl', [$scope, data]){
          $scope.data = []
          data.getdata().then(function(idata) { $scope.data = idata });
      }
      
    2. 我有几个问题,在第一类工厂看起来很蹩脚,并且它没有增加太多价值,每个控制器需要有代码来操纵工厂。使用第二个控制器,工厂非常复杂并且实际上并不存储数据(用于控制器之间的共享),只是代表了一种用于编写http.get的冗长方式

      我的问题是: 如何使用工厂来表示我的数据并以干净的方式管理对数据的操作?我想做的是这样的事情:

      var app = angular.module('main',[])
      app.factory('data', function($http){
           var factory = {}
           factory.data = []
           factory.initialise = function(){
               $http.get('/data').success(
                    function(data){
                         factory.data = data
                    }
               )
           }
           return factory
      })
      app.controller('cntrlA', [$scope, data]) {
          $scope.data = data.data
          $data.initialise()
      }
      app.controller('cntrlB', [$scope, data]) {
          $scope.data = data.data
      }
      

1 个答案:

答案 0 :(得分:0)

我正在处理一个类似问题的项目。我最终做的是使用该服务作为数据的存储库。而不是初始化函数每次都获取新数据,只有当数据存储库为空或者getFresh标志被触发(手动覆盖)时才会获得新数据。这样,每个控制器都可以调用相同的函数来获取数据并根据控制器的需要对其进行操作,而不会篡改原始数据。

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

app.factory('dataService', function($http, $q){
     var factory = {}
     factory.data = []
     factory.getFresh = false

     factory.initialise = function(){
         var deferred = $q.defer()
         if(factory.data.length===0 || factory.getFresh) {
             $http.get('/data').success(function(data){
                      factory.data = data
                      deferred.resolve(data)
             })
         }
         else{
             deferred.resolve(factory.data)
         }
         return deferred.promise
     }

     return factory
})

app.controller('cntrlA', [$scope, dataService]) {
    $scope.data = []
    dataService.initialise().then(function(data){
       $scope.data = data
    }
}

app.controller('cntrlB', [$scope, dataService]) {
    $scope.data = []
    dataService.initialise().then(function(data){
       $scope.data = data
    }
}