I am currently developing an Angular.js application that consumes the public Flickr API. My goal is to create a list/detail view showcasing the most recent photographs from Flickr.
To achieve this, I have implemented a factory in Angular to provide data to two controllers. Below is the code for the factory service:
angular.module('FlickrApp.services', []).
factory('flickrAPIservice', function($http) {
var flickrAPI = {};
flickrAPI.getPhotos = function() {
return $http({
method: 'JSONP',
url: 'https://api.flickr.com/services/feeds/photos_public.gne?format=json&jsoncallback=JSON_CALLBACK'
});
}
return flickrAPI;
});
Furthermore, here are the implementations of the two controllers (one for the list view and one for the detail view) that utilize the factory service:
angular.module('FlickrApp.controllers', []).
controller('listController', function($scope, flickrAPIservice) {
$scope.photosList = [];
flickrAPIservice.getPhotos().success(function (response) {
$scope.photosList = response.items;
});
}).
controller('photoController', function($scope, flickrAPIservice) {
flickrAPIservice.getPhotos().success(function (response) {
$scope.photosList = response.items;
});
});
In my detail view, I have created a link that directs to the detail view based on the position of the photo in the items array. While this functionality works correctly, when the link to the detail view is clicked, the resulting view does not display the correct photo due to the updated list of photos triggered by the second controller using the service.
My desired outcome would be to populate the photosList once from the flickrAPIservice, and have the second controller use the existing data instead of fetching it again each time.
Should I store the photos in a global array? I have been hesitant as I believe this may not align with the 'Angular way' of doing things. Any suggestions or guidance on this matter would be greatly appreciated.