I have a controller called MoviesListsCtrl that applied using ng-controller on 3 elements in the html document.
If I use the $http service inside the controller, it will be executed 3 times for the same data.
What is the best way to retrieve a json data with ajax once and use it for the controller.
If its a GET request, then you can cache the response so only one call is made, and all subsequent calls will pull from cache.
$http({
url: "someUrl",
cache: true
}).success(function(){
// do something
}).error(function(){
// do something else
});
Your code will still run multiple times since you have it on each element, but it will only make one http call.
Use an Angular service or factory. You can abstract away the $http call inside your service, so that your controllers always use the same interface.
Something like:
angular.module('myModule')
.service('myService', function ($http, $q) {
var myData = null;
this.get = function (params) {
return myData
? $q.when(myData)
: $http.get('http://example.com/myEndpoint', params)
.success(function (data) {
myData = data;
});
};
});
This is rudimentary, but it fits the general idea. (You probably want to hold a reference to your promise and pass that back to the callee, so that multiple requests that occur before the promise has resolved don't cause new HTTP requests.)
After this, you can inject the service into your controller, and simply call it to get the data you need. The nice thing about this is that you will always call the same method to get your data. Hope this helps, good luck.
