Save $ location parameters state AngularJS

Question

How to save URL parameters throughout the application life cycle using pushState ?

• Page loading.
• Go to "/search" via href
• submitSearch() through the filter fields, where $location.search(fields)
• Go to "/anotherPage" via href
• Go back to "/search" via href
• Search options return to the last.

Is this a built-in function somewhere?

If not the best way to do this?

Answer 1

If you plan on the main website from one page through pushState, you may need an intimate understanding of $ routeProvider ( http://docs.angularjs.org/api/ngRoute.%24routeProvider ).

To move further along the rabbit hole, I would recommend looking at the ui-router module: ( https://github.com/angular-ui/ui-router ). $ stateProvider (from ui-router) and $ routeProvider work very similarly, so sometimes ui-router documents can give information that you cannot find in poor $ routeProvider documentation.

I recommend reading the five-page ui-router documentation ( https://github.com/angular-ui/ui-router/wiki ) per page.

After all this preamble, it’s practical here: you would create a factory that stores history data and uses the controller defined in your $ routeProvider / $ stateProvider to access and manage this data.

Note. factory is a service. A service is not always a factory. Namespace:

 angular.module.<servicetype[factory|provider|service]>. 

This post describes the types of services: fooobar.com/questions/203 / .... It is important to remember that they are all solitary.

Example:

 var myApp = angular.module("myApp",[]); myApp.factory("Name", function(){ return factoryObject }); 

The code looks something like this:

 // Warning: pseudo-code // Defining states $stateProvider .state("root", { url: "/", // Any service can be injected into this controller. // You can also define the controller separately and use // "controller: "<NameOfController>" to reference it. controller: function(History){ // History.header factory History.pages.push(History.currentPage); History.currentPage = "/"; } }) .state("search", { url: "/search", controller: function(History, $routeParams) { History.lastSearch = $routeParams } }); app.factory('<FactoryName>',function(){ var serviceObjectSingleton = { pages: [] currentPage: "" lastSearch: {} } return serviceObjectSingleton }) 

If you're wondering what the difference is between $ routeProvider and $ stateProvider, it's just that $ stateProvider has more features, mostly nested states and views ... I think.

Answer 2

The easiest way is to use cookies, angularjs provides a wrapping service for this. Just when you go to "/ search", save the current URL parameters with "$ cookieStore.put ()", and as soon as you return, you have what you need with "$ cookieStore.get ()" .

See documentation in angularjs cookie store

Answer 3

I made a locationState service, you just give it the values ​​you want to save, and they store them in the url. This way you can save all the state you want along all the routes in your application.

Use it as follows:

 angular.module('yourapp') .controller('YourCtrl', function ($scope, locationState) { var size = locationState.get('size'); ; // ... init your scope here if (size) { $scope.size = size; } // ...and watch for changes $scope.$watch('size', locationState.setter('size')); } 

Here is the code:

 // Store state in the url search string, JSON encoded per var // This usurps the search string so don't use it for anything else // Simple get()/set() semantics // Also provides a setter that you can feed to $watch angular.module('yourapp') .service('locationState', function ($location, $rootScope) { var searchVars = $location.search() , state = {} , key , value , dateVal ; // Parse search string for (var k in searchVars) { key = decodeURIComponent(k); try { value = JSON.parse(decodeURIComponent(searchVars[k])); } catch (e) { // ignore this key+value continue; } // If it smells like a date, parse it if (/[0-9T:.-]{23}Z/.test(value)) { dateVal = new Date(value); // Annoying way to test for valid date if (!isNaN(dateVal.getTime())) { value = dateVal; } } state[key] = value; } $rootScope.$on('$routeChangeSuccess', function() { $location.search(searchVars); }); this.get = function (key) { return state[key]; }; this.set = function (key, value) { state[key] = value; searchVars[encodeURIComponent(key)] = JSON.stringify(value); // TODO verify that all the URI encoding etc works. Is there a mock $location? $location.search(searchVars); }; this.setter = function (key) { var _this = this; return function (value) { _this.set(key, value); }; }; });