角工廠$ HTTP GET多個頁面和全局變量

Question

我使用的離子和角度來構建一個簡單的應用程序，並有一個關於我的工廠和全局變量的問題（我是新來的都這麼裸陪我;） ）。

我已經包含在應用程序的每個頁面都需要使用數據的JSON文件。應用程序中的每一頁都需要訪問設備的經緯度。

目前，在控制器中的每一頁，我打電話的數據和等待，直到承諾已與數據繼續之前得到解決。在每個頁面上，我還要求在每個頁面的控制器中使用lat。

這一切似乎有點浪費，因爲數據不會在頁面之間發生變化，並且似乎有必要在全局範圍內設置lat long long（然後使用watchPosition更新此值，並在回調時更新位置更改時調用的數據）而不是必須獲取位置並將其設置在每個頁面$ scope上。

的數據是的位置的小（〜20）列表，每個具有LAT長。我想計算每個位置距當前經緯度的距離，並在位置變化（從watchPosition回調）中更新數據。我的應用程序有2頁。一個帶有位置列表，另一個顯示Google地圖上的位置。兩者都使用相同的數據。

我應該在$ rootScope存儲這些或這被認爲是不好的做法？我是否以錯誤的方式思考這個問題？我應該繼續當前的道路嗎？

目前，我的控制器看起來像：

..... 
    .controller('HarboursCtrl', function($scope, Harbours) { 

    var harboursPromise = Harbours.all(); 
    $scope.harbours = []; 

    $scope.position = 'Trying to find your location...' 

    if (navigator.geolocation){ 
    navigator.geolocation.getCurrentPosition(function(position){ 
     $scope.$apply(function(){ 
     $scope.position = position.coords.latitude+", "+position.coords.longitude; 
     }) 
    }) 
    } else { 
    $scope.position = "Sorry, we can't get your location"; 
    } 

    harboursPromise.then(function(response){ 
    console.log('response from controller', response); 
    $scope.harbours = response.harbours; 
    }); 
    // $scope.harbours = Harbours.all(); 

    $scope.remove = function(harbour) { 
    Harbours.remove(harbour); 
    }; 
    $scope.getTimes=function(n){ 
    return new Array(n); 
    }; 
}) 


.controller('MapCtrl', function($scope, Harbours) { 
    $scope.position = 'Trying to find your location...' 

    if (navigator.geolocation){ 
    navigator.geolocation.getCurrentPosition(function(position){ 
     $scope.$apply(function(){ 
     $scope.position = position.coords.latitude+", "+position.coords.longitude; 
     }) 
    }) 
    } else { 
    $scope.position = "Sorry, we can't get your location"; 
    } 

    var harboursPromise = Harbours.all(); 

    harboursPromise.then(function(response){ 
    console.log('response from controller', response); 
    $scope.map = { center: { latitude: 51, longitude: 0 }, zoom: 10 }; 
    $scope.harbours = []; 
    $scope.harbours = response.harbours; 
    console.log($scope.map.harbours); 
    }); 

    }); 
..... 

我的服務看起來像：

angular.module('starter.services', []) 

.factory('Harbours', function($http, $q) { 
    var harbours = function() { 
    var deferred = $q.defer(); 
    $http({ 
     method: 'GET', 
     url: '../data/harbourData.json' 
    }).success(function (data, status, headers, config) { 
     deferred.resolve(data); 
    }).error(function(data, status, headers, config) { 
     deferred.reject(status); 
    }); 
    return deferred.promise; 
    } 
    return { 
    all: harbours, 
    get: function(chatId) { 
     for (var i = 0; i < harbours.length; i++) { 
     if (harbours[i].id === parseInt(chatId)) { 
      return harbours[i]; 
     } 
     } 
     return null; 
    } 
    }; 
}); 

Answer 1

是您的數據將是靜態的？如果是這樣，最好寫一個常量而不是使用$ http/$ q。

angular.module('myModule') 
    .constant('locations', { 
     firstItem: { 
      lat: 'someValue', 
      long: 'someValue' 
     }, 
     etc: {} 
    }); 

所以你不必每次都打個電話。如果數據是動態的，則可以隨時在工廠中緩存該值，如下所示：

.factory('myFactory', ['$http', '$q', function($http, $q) { 
    var harbors = /* resolved object with data */; 
    return { 
     all: harbors, 
     get: function(name) { return harbors[name]; } 
    }; 
}); 

tldr;工廠是單身人士，所以緩存在其中的任何數據都應該可以在應用程序中的任何地方使用，而無需重新調用$ http服務。

*編輯*

我可能會處理這個問題的方法是創建一個單獨的工廠緩存我需要重複使用和編寫API工廠，幫助高速緩存的任何數據。所以，

.factory('appData', [function() { 
    var cache = {}; 

    return { 
     set: function(location, payload) { 
      cache[location] = payload; 
     }, 
     get: function(location) { 
      return cache[location]; 
     }, 
     reset: function() { 
      cache = {}; 
     } 
    }; 
}]) 
.factory('callAPI', ['$http', '$q', 'appData', function($http, $q, appData) { 
    return { 
     endpoint: function(url, payload, method, cache) { 
      var deferred = $q.defer(); 
      $http({ 
       method: method, 
       url: url 
      }).success(function(data, status, headers, config) { 
       deferred.resolve(data); 
      }).success(function(data, status, headers, config) { 
       deferred.reject(status); 
      }); 
      /** cache must be a string */ 
      appData.set(cache, deferred.promise); 
      return deferred.promise; 
     } 
    } 
}]) 

這也保持你的應用程序內的關注點分離。