我知道在Angular.js中控制器之间共享数据的适当方法是使用工厂或服务。
app.controller('Controller1', function($scope, DataService) {
DataService.getValues().then(
function(results) {
// on success
console.log('getValues onsuccess');
});
});
app.controller('Controller2', function($scope, DataService) {
DataService.getValues().then(
function(results) {
// on success
console.log('getValues onsuccess');
});
});
app.factory('DataService', function($http) {
var getValues = function() {
console.log('making http request');
return $http.get("/api/getValues");
};
return {
getValues: getValues
}
});
我有两个控制器在工厂中调用相同的方法两次
这一切都很好,一切都按照应有的方式运作。我唯一关心的是,两次提出同样的请求似乎有点不必要?
使用$ broadcast会更好吗?
或者我可以将我的代码结构不同,以便只调用一次服务吗?
答案 0 :(得分:1)
您可以将请求的结果存储在工厂中,然后检索这些结果。
app.factory('DataService', function($http) {
var values;
var requestValues = function() {
console.log('making http request');
$http.get("/api/getValues").then(
function(results){
values = results;
});
};
var getValues = function() {
return values;
};
return {
requestValues : requestValues,
getValues: getValues
}
});
答案 1 :(得分:1)
如果您的数据是静态的,并且可能不会经常发生变化,您可以执行以下操作:
app.factory('DataService', function($http) {
self = this;
this.isLoaded = false;
this.results;
this.getValues = function() {
console.log('making http request');
$http.get("/api/getValues").then(
function(results) {
// on success
console.log('getValues onsuccess');
self.isLoaded = true
this.results = results;
return results;
})
);
};
})
在控制器中:
app.controller('Controller2', function($scope, DataService) {
if(!DataService.isLoaded){
results = DataService.getValues()
}else{
results = DataService.results;
}
});
答案 2 :(得分:1)
您应该考虑在DataService中进行缓存。添加一个变量来保存来自http服务的结果和一个时间戳变量来存储它的检索时间。
如果对服务的第二次调用是在预设的时间段内(比方说,5秒),则不会进行http调用,并返回缓存中的数据。
app.factory('DataService', function($http) {
var cachedValue = null;
var lastGet = null;
var getValues = function() {
var timeNow = new Date();
if (cachedValue == null || ((timeNow - lastGet) < 5000)) {
console.log('making http request');
lastGet = timeNow;
cachedValue = $http.get("/api/getValues");
} else console.log('returning cached value');
return cachedValue;
};
return {
getValues: getValues
}
});