带有路由（状态）参数的Angular ui路由器多个视图答案

【问题标题】：Angular ui router multiple views with route(state) parameters带有路由（状态）参数的Angular ui路由器多个视图
【发布时间】：2016-11-22 07:20:20
【问题描述】：

我有一个页面，其中我使用多个视图显示 2 个不同的产品列表，每个视图都有一个控制器和模板文件。我的状态定义是这样的：

    .state('all_lists', {
      url: '/lists',
      views: {
      '' : {templateUrl: 'my-lists.html'},
      'featured@all_lists' : {templateUrl: 'featured.html', controller: 'featuredCtrl'},
      'deals@all_lists' : {templateUrl: 'deals.html', controller: 'dealsCtrl'}
      }
     }
    )

每个单独的列表在顶部都有分页和排序过滤器，这些分页和排序过滤器作为状态参数添加到 URL。请告诉我如何为状态视图定义这些参数，以便可以将它们添加到 URL 中，然后在相应的控制器中使用。

如果您对在 URL 中添加分页参数的产品列表有更好的想法，请分享您的想法。任何帮助将不胜感激。

谢谢

注意： 请注意，我需要在 1 页上显示两个列表。它是一种主页和特色项目列表，然后在热交易项目列表下方显示，这两个列表都有分页、排序和其他一些过滤器。 URL 将是这样的。 mydomain.com/products/featured-page_1/deals-page_2/perpage_10/

注意 2： 经过大量研究和调查，我发现这是一个明显的Parallel States案例。请告诉我如何使用我目前使用的 URL 参数方案来实现并行状态。

<html>
  <head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
    </head>
  <body>
    <div id="content">
      <h1>Products Homepage</h1>
      <h3>Some common filters for both lists</h3>
    <div id="featured">
      <h2>Featured List</h2>
      <div>pagination and other filters</div>
      <ul>
        <li>item 1</li>
        <li>item 2</li>
        <li>item 3</li>
        <li>item 4</li>
        <li>item 5</li>
      </ul>
      </div>
      <div id="deals">
        <h2>Hot Deals List</h2>
      <div>pagination and other filters for hot deals</div>
      <ul>
        <li>item 1</li>
        <li>item 2</li>
        <li>item 3</li>
        <li>item 4</li>
        <li>item 5</li>
      </ul>
      </div>
    </div>
    </body>
  </html>

【问题讨论】：

您需要这些参数来允许用户添加书签还是因为您希望人们手动编写这些 url？
我需要 URL 中的参数以使应用程序在不使用本地或会话存储的情况下保持其状态，并且用户还可以为应用程序的任何状态添加书签。请注意，除了分页和排序之外，还有一些高级过滤器作为参数添加到 URL。
您的写作方式类似于缩略图视图和列表视图。你能显示一个示例网址吗？你只想要分页吗？或者如果您接受任何其他替代方案我可以建议您。让我知道您的完整要求，因为我已经为我的应用程序实现了这个。
@AbdulHaseeb 你在吗？

标签： angularjs angular-ui-router multiple-views

【解决方案1】：

与其将其作为多个视图，不如将它们作为子视图，父视图是抽象的。看下面的代码，

$stateProvider
    .state("product", {
        url: '/product',
        templateUrl: "/Views/productHome.html",
        abstract: true,
        controller: "productHomeCtrl"
    })
    .state('product.thumbnailview', {
        url: '/producttv',
        templateUrl: "/Views/thumbnailview.html",
        controller: "thumbnailViewCtrl",
        params: {
            param1: null,
            param2: null
        }
    })
    .state('product.listview', {
        url: '/productlv',
        templateUrl: "Views/listview",
        controller: "listViewCtrl",
        params: {
            param1: null,
            param2: null
        }
    })

现在您可以通过在各自的控制器中分别注入 stateParams 服务来使用参数。 注意： 此外，您的产品状态永远不可能有 stateParams。

注意：但是如果您尝试直接进入产品状态，它将不会被激活，因为它是抽象状态如何通过全局或相应视图中的 productHome.html 标记来处理分页。

如果您将分页保留在 productHome.html 中，您仍然可以使用 $scope.$parent.productList 访问 productDetails 数组并重用相同的范围变量。

所以在这种情况下，您的 productHome.html 会喜欢这个

<div> 
    <div > MENU OPTIONS </div>
    <div ng-view>   </div>
    <ul uib-pagination total-items="itemLength" ng-model="currentPage" ng-change="pageChanged()"></ul>
</div>

这三个对象可以在三个控制器中的任何一个中处理

项目长度
当前页面
pageChanged()

缩略图和列表视图都将包含仅用于布局目的的标记。

<div>
    <div> Thumbnail or List markup </div> very simple you can play with bootstrap grid layout.
</div

更新 1

对于这样的路线

//mydomain.com/products/featured-page_1/deals-age_2/perpage‌_10/

使用我的解决方案，您可以像这样处理它

//mydomain.com/products/featured/page_1/deals/age_2/

所以你的孩子状态将是

$stateProvider
    .state("product", {
        url: '/product',
        templateUrl: "/Views/productHome.html",
        abstract: true,
        controller: "productHomeCtrl"
    })
    .state('product.featured/', {
        url: '/featured/:number',
        templateUrl: "/Views/featured.html",
        controller: "featuredCtrl",
        params: {
            number: null,
        }
    })
    .state('product.deals', {
        url: '/deals/:number',
        templateUrl: "Views/deals.html",
        controller: "dealsCtrl",
        params: {
            number: null
        }
})

在 featuredCtrl 中，您可以使用

访问这些参数

$stateParam.number

在 dealsCtrl 中，您可以使用

访问这些参数

$stateParam.number

在 $rootscope 或 productHomeCtrl

中有 perpage 值

【讨论】：

非常感谢您的详细回答。请注意，我必须在 1 页上显示两个列表。如果我使用多个状态，那么如何将它们显示在 1 页上。请检查已编辑的问题摘要。
路由中你想要的参数是什么？？
带参数的 URL 将是这样的：//mydomain.com/products/featured-page_1/deals-page_2/perpage_10/
其中哪些是参数？？以及您希望在哪个控制器中使用哪个参数？
在 /products/ 之后所有 URL 段都是参数，我通过在参数名称中添加“viewname-”、“featured-”和“deals-”前缀来区分参数，以便我可以获取各个控制器中的参数

【解决方案2】：

你只需要在url上指定参数并在控制器中调用它们

.state('all_lists', {
  url: '/lists?dealPage&featPage&otherParam',
  views: {
  '' : {templateUrl: 'my-lists.html'},
  'featured@all_lists' : {templateUrl: 'featured.html', controller: 'featuredCtrl'},
  'deals@all_lists' : {templateUrl: 'deals.html', controller: function($scope, $stateParams) {
     $scope.page= $stateParams.dealPage;
     $scope.otherParam= $stateParams.otherParam;
  }}
  }
 }
)

【讨论】：

我怎么知道'page'参数属于哪个视图？因为 $stateParams.page 将在两个视图控制器中使用。
恐怕你必须为每个视图添加一个页面参数，以便将每个列表分页状态存储在 URL 中，这感觉有点棘手，但其他 Web 框架喜欢这样做JSF，ASPMVC。