CODEWITHSUNDEEP
javascriptangularjs
user2253714
user2253714

Reputation: 43

Angular service: value lost when view changes

I'm trying to build a simple Angular app that pulls in data from Instagram. The user enters a hashtag on the index page and then is presented to another page where posts with that hashtag are displayed.

I've tried passing the hashtag that's used as a variable in a service, but when the view is changed the value is overwritten. (I can check the value right after I set it and it's set, but as soon as the page changes I lose the value).

Here's 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;
        }
    }
});

And my two controllers:

Sets hashtag (the /index.html view):

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';
};

}]);

Gets hashtag (the /results.html view):

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'
    });
}
]);

Upvotes: 3

Views: 1758

Answers (3)

oldwizard
oldwizard

Reputation: 5062

You need to use Angular's router to handle the location change. That way you will not reload the entire app from scratch when you go to your details view.

See angular's route documentation.

Upvotes: 2

seangwright
seangwright

Reputation: 18225

As mentioned by @pcguru, when you run this line $window.location.href = '/results.html'; your angular app gets reloaded by the browser.

Angular detects changes in the url when the user clicks on links on the page or through setting $location.path('/someurl'); (which is an angular service for getting/setting url information). Your javascript circumvents that.

Note the Angular docs on $location

What does it [$location] not do?

It does not cause a full page reload when the browser URL is changed. To reload the page after changing the URL, use the lower-level API, $window.location.href.

If you want to programmatically change the url, use $location.path(url), if you want the user to click a link and go to a new location in the app without the browser reloading the page then you need to setup routing using angular-route.js (https://code.angularjs.org/1.3.15/angular-route.js) and then injecting $routeProvider into the config method of your app

(function() {
    'use strict';

    var app = angular.module('instagramApp', ['ngRoute']);

    app.config(configFunc);

    function configFunc($routeProvider) {
         $routeProvider.when('/', {
             templateUrl: 'path/to/your/template.html',
             controller: 'HomeController'
         })
         .when('/results', {
             templateUrl: 'path/to/your/template.html',
             controller: 'ResultsController'
         });
    }
}());

Upvotes: 3

aorfevre
aorfevre

Reputation: 5064

AS saided by @pcguru, you need to use angular Router OR ui-router to keep the context of your single Angular Page.

AngularRouter is part of Angular framework and is simple to use. Ui-Router is a complement, it is much more costimizable and allows you to use multiple views at the same time. IF you start angular, this is probably not necessary to add extra complexity.

Using something like that $window.location.href = '/results.html'; will perform a page redirection and therefore will reload you page. This is not the way to do it in angular

Upvotes: 0

Related Questions