I am currently working on a project to create a basic Angular application that retrieves data from Instagram. The concept involves the user inputting a hashtag on the main page, which then redirects them to another page where posts related to that hashtag are displayed.
My challenge has been passing the hashtag as a variable through a service. However, I've noticed that when the view is changed, the value of the variable gets overwritten. Even though I can confirm the value being set initially, it somehow gets lost when the page transitions.
Below is the structure of my service:
var instagramApp = angular.module('instagramApp')
.factory('feedData', function($rootScope) {
var config = {};
return {
setHashtag: function (x) {
config.hashtag = x;
},
getHashtag: function () {
return config.hashtag;
}
}
});
Furthermore, here are the two controllers in use:
The controller for setting the hashtag (/index.html):
instagramApp.controller('indexController', ['$scope', 'feedData', '$window',
function($scope, feedData, $window){
$scope.generate = function(){
feedData.setHashtag('marcheet');
console.log(feedData.getHashtag());
$window.location.href = '/results.html';
};
}]);
The controller responsible for retrieving the hashtag (/results.html):
instagramApp.controller('instagramController', ['$scope', 'Instagram', '$http', 'feedData',
function($scope, Instagram, $http, feedData){
feedUrl = '/feed/?hashtag=' + feedData.getHashtag() +'&count=20';
console.log(feedUrl);
createStoryJS({
type: 'timeline',
width: '800',
height: '600',
source: feedUrl,
embed_id: 'my-timeline'
});
}
]);