javascript - 保存 $location 参数状态 AngularJS

Question

如何使用 pushState 在应用程序的整个生命周期中保存 URL 参数状态？

1. 页面加载。
2. 通过 href 转到 “/search”
3. submitSearch() 通过过滤字段 where $location.search(fields)
4. 通过href转到"/anotherPage"
5. 通过href返回"/search"
6. 搜索参数已设置回上次设置的值。

这是某处的内置功能吗？

如果不是，最好的方法是什么？

Answer 1

如果您计划通过 pushState 建立一个主要是单页的网站，您可能希望深入了解 $routeProvider ( http://docs.angularjs.org/api/ngRoute.%24routeProvider)。

要深入了解兔子洞，我建议查看 ui-router 模块:( https://github.com/angular-ui/ui-router )。 $stateProvider(来自 ui-router)和 $routeProvider 的工作方式非常相似，因此有时 ui-router 文档可以提供您在 $routeProvider 的糟糕文档中找不到的见解。

我建议逐页阅读 5 页 ui-router 文档 ( https://github.com/angular-ui/ui-router/wiki )。

在所有这些序言之后，下面是实际操作:您将设置一个保存历史数据的工厂，并使用 $routeProvider/$stateProvider 中定义的 Controller 来访问和操作该数据。

注意:工厂是一个服务。服务并不总是工厂。命名空间为:

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 有更多的特性，主要是嵌套状态和 View ......我想。