保存$位置參數狀態AngularJS

Question

如何在使用pushState的整個應用程序生命週期中保存URL參數狀態？

1. Page load。
2. 通過過濾器領域，其中$location.search(fields)
3. 通過href
4. 轉到"/anotherPage"通過href
5. 搜索paramters回到"/search"通過href
6. submitSearch()轉到"/search"重新設置爲他們最後都。

這是一個內置功能嗎？

如果不是最好的方法是什麼？

Answer 1

最簡單的方法是使用cookie，angularjs爲此提供包裝服務。 簡單地當你去「/ search」時用「$ cookieStore.put（）」保存你當前的URL參數，一旦你回來了，你已經有了你需要的「$ cookieStore.get（）」。

在angularjs cookie store

Answer 2

查看文檔如果你通過一個pushState的大多是單頁網站策劃，你可能希望得到$ routeProvider（http://docs.angularjs.org/api/ngRoute.%24routeProvider）的深刻理解。

要進一步深入兔子洞，我會建議看看ui路由器模塊：（https://github.com/angular-ui/ui-router）。 $ stateProvider（來自ui-router）和$ routeProvider的工作非常相似，所以有時候ui-router文檔可以給你在$ routeProvider糟糕的文檔中找不到的洞察。

我建議通過五頁UI路由器文檔（https://github.com/angular-ui/ui-router/wiki）逐頁。

所有這些前言之後，這裏是實用的：您將設置一個工廠來保存歷史數據，並使用$ routeProvider/$ stateProvider中定義的控制器來訪問和操作這些數據。

注：工廠是一項服務。服務並不總是工廠。命名空間如下：

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

本文解釋服務類型：https://stackoverflow.com/a/15666049/2297328。記住它們都是單身人士是很重要的。

例：

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

的代碼看起來是這樣的：

// 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 
}) 

如果你想知道$ routeProvider和$ stateProvider之間的區別是什麼，它只是$ stateProvider有更多功能，主要是嵌套的國家和意見......我認爲。

Answer 3

我做了一個locationState服務，你只需給它你想要堅持的值，並將它們存儲在URL中。因此，您可以在應用程序中存儲所有路線中的所有狀態。

使用方法如下：

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

下面的代碼：

// 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); 
     }; 
    }; 
});