Richtiger Weg, um meine Steuerung, Service und Fabrik in angularjs Anwendung zu strukturieren ... Service oder Fabrik?

Question

Ich habe damit gearbeitet, meinen Kopf um die "angularjs" Denkweise (Angular 1) zu wickeln und ich habe einen relativ guten Griff, während ich mich durch ein kleines persönliches Projekt arbeite. Ich bin ein bisschen an einer Straßensperre, nicht weil ich es nicht zur Arbeit bringen kann, aber ich würde gerne wissen, wie die Daten in meiner Anwendung richtig eingerichtet werden.

Die Grundsituation ist dies:

I 3 json Dateien haben:

categories.json 
products.json 
vendors.json 

Diese halten die Daten (die ich aus einer Datenbank später abholen wird aber jetzt bin vereinfacht).

Ich muss im Grunde die Daten von allen drei dieser Dateien laden, so dass ich eine Variable bilden kann, die alle "Produkte" enthält (was eine JS-Klasse I separat deklariert ist).

begann ich durch die Speicherung der Daten in einem Controller (ein entsprechender Code unten) aus:

myApp.controller('productListController', ['$scope', '$http', '$q', function ($scope, $http, $q) { 

var promises = []; 
promises.push(getCategories($http)); 
promises.push(getVendors($http)); 
promises.push(getProducts($http)); 

$q.all(promises).then(function (response) { 
    //categories = response[0]; 
    //vendors = response[1]; 
    //products = response[2]; 
    $scope.products = createProductList(response); 
    $scope.vendors = response[1].data; 
    $scope.vendorChecked = getCheckedVendors($scope.vendors); 
}) 

Das funktionierte gut, aber ich erkennen, dass ich diese Daten in anderen Ansichten muß, die mich dazu gebracht, zu versuchen, dies zu bewegen in einen Dienst einbinden.

Das Problem, das ich dabei hatte, ist, dass ich keine Möglichkeit für den Controller weiß, dass der Dienst fertig ist, die Daten abzurufen, so dass ich es dann im ProductListController $ Bereich speichern kann.

Ich müsste einen Weg zum Beispiel haben:

myApp.service('ProductService', ['$http', '$q', function ($http, $q) { 

self = this; 
var promises = []; 
promises.push(getCategories($http)); 
promises.push(getVendors($http)); 
promises.push(getProducts($http)); 

$q.all(promises).then(function (response) { 
//These three I would like to update in ProductListController 
//when it is done. 
    self.products = createProductList(response); 
    self.vendors = response[1].data; 
    self.vendorChecked = getCheckedVendors(self.vendors); 
}) 

Ist dies der richtige Ansatz zu nehmen? Wenn ja, wie kann ich lasse die Steuerung weiß, dass der Dienst die Daten erfolgt das Abrufen und zum Beispiel sparen:

$scope.products = ProductService.products; 
$scope.vendors = ProductService.vendors; 
$scope.categories = ProductService.categories; 

Ist dies auch der richtige Ansatz? Eine andere Herangehensweise, an die ich gedacht habe, war, statt eines Dienstes eine Fabrik zu benutzen. Dann hatte ich ein anderes Problem, weil ich zum Beispiel hatte:

return { 
    getProducts: function() { 
     //http get request code in here 
     return promise 
    }, 
    getVendors: function() { 
     //http get request code in here 
     return promise 
    }, 
    getCategories: function() { 
     //http get request code in here 
     return promise 
    }, 
    getAllData: function() { 
    //in here I want to use the three promises in the 3 functions above 
    //but I am not able to call them from here. If I was able to do that 
    //then I could call this method from ProductListController and get the 
    //data that way. 
    } 

Es tut mir leid, wenn diese lang ist, aber ich wollte die verschiedenen Dinge beschreiben, ich versuchte. Ich weiß, dass ich es schaffen kann, aber ich möchte den richtigen Weg oder ein paar richtige Wege lernen.

Answer 1

Es ist besser, immer Versprechen zurückzukehren:

var promises = []; 
promises.push(getCategories($http)); 
promises.push(getVendors($http)); 
promises.push(getProducts($http)); 

return $q.all(promises) 

Wenn Sie nicht erfüllen auch in jedem Controller, dass Sie createProductList, getCheckedVendors nennen sollten - prüfen, diese http transformResponce https://docs.angularjs.org/api/ng/service/ $ http wndelt zu $ ​​setzen. Oder Sie können Ihr eigenes Versprechen erstellen. (Mit $ q.defer https://docs.angularjs.org/api/ng/service/ $ q).

Die Verwendung von Service oder Fabrik spielt eigentlich keine Rolle. Dies ist ab Werk:

var factory = {}; 
factory.getProducts: function() { 
     return promise 
} 
factory.getCategories: function() { 
     return promise 
} 
factory.getVendors: function() { 
     return promise 
} 
factory.getAllData: function() { 
    var promises = []; 
    promises.push(factory.getProducts()); 
    promises.push(factory.getCategories()); 
    promises.push(factory.getVendors()); 

    return $q.all(promises) 
} 
return factory; 

Und in Controler Sie gerade haben: MyFactory.getAllData() dann (...)