Geek Answers Handbook

AngularJS app: load data from JSON once and use it in multiple controllers

I am working on a mobile application using AngularJS as a framework, I currently have a structure similar to this:

app.config(['$routeProvider', function($routeProvider) { $routeProvider .when('/', { templateUrl : 'pages/home.html', controller : 'homeCtrl' }) .when('/one', { templateUrl : 'pages/one.html', controller : 'oneCtrl' }) .when('/two', { templateUrl : 'pages/two.html', controller : 'twoCtrl' }); }]); app.controller('homeCtrl', ['$scope', function($scope) { }]); app.controller('oneCtrl', ['$scope', function($scope) { }]); app.controller('twoCtrl', ['$scope', function($scope) { }]);

And then I show the content using ng-view :

 <div class="ng-view></div>

Everything works fine, but I need to load the data from the JSON file to populate all the application content. I want to make an AJAX call only once , and then transfer the data through all my different controllers. In my first attempt, I decided to create a Service with $http.get() inside it and include it in each controller, but it doesn’t work, because it makes another ajax request every time I enter and use the service. Since I am new to using angular, I am wondering what is the best way or even more so "angular" to achieve this without messing it up.

Edit: I am adding a service code, which is a simple request to $http.get :

 app.service('Data', ['$http', function($http) { this.get = function() { $http.get('data.json') .success(function(result) { return result; }) } });
+5
source share
2 answers

Try to get JSON data from a GET link:

 (function (app) { 'use strict'; app.factory('myService', MyService); MyService.$inject = ['$q', '$http']; function MyService($q, $http) { var data; var service = { getData: getData }; return service; ////////////////////////////////////// function getData(refresh) { if (refresh || !data) { return $http.get('your_source').then(function(data){ this.data = data; return data; }) } else { var deferrer = $q.defer(); deferrer.resolve(data); return deferrer.promise; } } } }(angular.module('app')));

Now you can add this dependency to your controller file and use:

 myService.getData().then(function(data){ //use data here }, function(err){ //Handle error here });
+4
source

Initialize the promise once and return the link to it:

No need to initialize another promise. $ http returns one.

Just cancel the .then() call at your promise to change the result

 angular.module('app', []) .service('service', function($http){ this.promise = null; function makeRequest() { return $http.get('http://jsonplaceholder.typicode.com/posts/1') .then(function(resp){ return resp.data; }); } this.getPromise = function(update){ if (update || !this.promise) { this.promise = makeRequest(); } return this.promise; } })

Codepen Example

Edit: you can use the $ http cache instead. He can achieve the same results. From the docs :

If several identical requests are created using the same cache, which is not yet full, one request will be sent to the server, and the remaining requests will return the same response.

+7
source

More articles:


All Articles