AngularJS ngRoute - specify data for target page, with data not appearing in URL

Question

I'm using AngularJS and I would like to redirect a user when he clicks a button on /page1 to /page2. I currently use AngularJS routing for this using ngRoute which works all fine. However, in addition to the redirection, I would also like to pass some data from page1 to page2 to pre-populate some of the HTML on page2. I know that in order to pass such data, I can either specify it in the path parameter,e.g.

/page2/<param1>/<param2>

or as a query string parameter, e.g.

 /page2?<key1>=<value1>&<key2=value2>

In both ways, I can retrieve the query string or path params in /page2 using $route.current.params

However, I do not want to do either of the above as I do not want to expose my data on the URL to the user. Is there a way in AngularJS that the parameters can be passed to /page2, such that they are "hidden" from the URL?

Thanks

Answer 1

You can use a service to store data that will survive route changes. Services are singletons that persist through the entire life of the app.

app.service("appData", function() {
    var myData;
    this.set = function(data) {
        myData = data;
    };
    this.get = function() {
        return myData;
    };
}

In a controller:

app.controller("viewCtrl", function($scope,appData) {
    $scope.myData = appData.get();

    //

    appData.set(newData);

});

For more information, see AngularJS Developer Guide - Creating Services.