Факторизиране на AngularJS - Как правилно да използвате фабрика за искане и актуализиране на данни, представляващи данни

Мъчих се да разбера "ъгловия" начин на работа за използване на фабрики за представяне на ajax данни (правя много споделяния между контролери, използвайки config). Направих задълбочено проучване и всички отговори изглежда попадат в две категории:

  1. Използвайте фабриката, за да представите данните, след това в контролера извлечете данните и актуализирайте фабриката:

{не е предназначен да бъде действително работещ ъглов

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. Използвайте фабриката, за да представите 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 });
    }
    

Имам няколко проблема с това, в първата категория фабриката изглежда мега куца и сякаш не добавя много стойност и всеки контролер трябва да има кода, за да манипулира фабриката. С втория контролер фабриката е много сложна и всъщност не съхранява данните (за споделяне между контролери), просто представлява дълъг начин за писане на 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
}

person TobyGWilliams    schedule 24.04.2015    source източник


Отговори (1)


Работя по проект с подобен проблем. Това, което в крайна сметка направих, е да използвам услугата като хранилище на данните. Вместо функцията за инициализиране да получава свежи данни всеки път, тя получава нови данни само ако хранилището на данни е празно или е активиран флаг 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
    }
}
person Ben Felda    schedule 24.04.2015