我是否正确使用状态？

Question

我有一个 angular 应用程序，其主页显示了一系列内容。每件事都有一个类型。在导航中，有对应于每种事物类型的选择器。单击这些选择器之一会导致家庭控制器过滤显示给所选类型的事物。因此，我认为选择器对应于主页的状态。

现在，我想将这些状态中的每一个映射到 url 路由：myapp.com/home 以默认（未过滤）状态加载主页，myapp.com/home/foo 打开主页foo 类型选择器激活的页面，从那里切换到 myapp.com/home/bar 会切换到 bar 过滤状态 而无需重新加载页面。

这是最后一点 - 在不重新加载页面的情况下触发 "state" 更改，这特别难以理解。关于这个主题有很多 SO/forum 个问题，但是 none 已经很切题了，所以我想知道我是否以错误的方式思考这个问题：我应该考虑这些 "states" 作为状态呢？有更简单的方法吗？

此外，我愿意使用 ngRoute 或 ui.router - 有没有关于其中一个或另一个可以使实现更简单的东西？

Answer 1

使用ui-router，你可以这样处理：

$stateProvider
  .state('home', {
    url: "/home",
    controller: "HomeController",
    templateUrl: "home.html"
    // .. other options if required
  })
  .state('home.filtered', {
    url: "/{filter}",
    controller: "HomeController",
    templateUrl: "home.html"
    // .. other options if required
  })

这会创建一个过滤状态作为主状态的子状态，这意味着您可以将过滤状态的 URL 视为 /home/{filter}。其中 filter 是一个状态参数，然后可以使用 $stateParams.

访问该参数

因为你不想切换视图，所以你将 $stateParams 注入你的控制器，观察 $stateParams.filter，然后按照你的意愿做出反应。

$scope.$watch(function () { return $stateParams.filter }, function (newVal, oldVal) {
    // handle it
});

我是否正确使用状态？

Am I using states correctly?

angularjs

angular-ui-router