Angular ui router несколько видов с параметрами маршрута (состояния)

У меня есть страница, на которой я показываю 2 разных списка продуктов, используя несколько представлений, у каждого из которых есть файл контроллера и шаблона. Мое определение состояния выглядит следующим образом:

    .state('all_lists', {
      url: '/lists',
      views: {
      '' : {templateUrl: 'my-lists.html'},
      '[email protected]_lists' : {templateUrl: 'featured.html', controller: 'featuredCtrl'},
      '[email protected]_lists' : {templateUrl: 'deals.html', controller: 'dealsCtrl'}
      }
     }
    )

В каждом отдельном списке есть фильтры разбиения на страницы и сортировки вверху, и эти фильтры разбиения на страницы и сортировки добавляются в URL как параметры состояния. Скажите, как определить эти параметры для представлений состояния, чтобы их можно было добавить в URL-адрес, а затем использовать в соответствующих контроллерах.

Если у вас есть идея лучше отображать такой список продуктов с параметрами страницы, добавленными к URL-адресу, пожалуйста, поделитесь своими идеями. Любая помощь будет принята с благодарностью.

Спасибо

Примечание: Обратите внимание, что мне нужно отображать оба списка на 1 странице. Его вид домашней страницы и списка товаров, а затем ниже этого горячего предложения отображается список товаров, и оба этих списка имеют разбиение на страницы, сортировку и несколько других фильтров. URL-адрес будет примерно таким. mydomain.com/products/featured-page_1/deals-page_2/perpage_10/

ПРИМЕЧАНИЕ 2: После многих исследований и исследований я обнаружил, что это явный случай Параллельных состояний. Скажите, как реализовать параллельные состояния, используя схему параметров 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>

Ответ 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 вообще.

Примечание. Но если вы попытаетесь достичь состояния продукта напрямую, он не активируется, потому что это состояние abstract Как вы можете обрабатывать разбиение на страницы, имея разметку в productHome.html глобально или соответствующие представления.

Если вы сохраняете разбиение на страницы в productHome.html, вы все равно можете получить доступ к массиву productDetails, используя $scope. $parent.productList и повторно использовать ту же переменную области видимости.

Итак, в этом случае вам понравится ваш 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>

Эти три объекта могут обрабатываться в любом из трех контроллеров

itemLength
CurrentPage
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

Введите perpage значение в $rootscope или в productHomeCtrl

Ответ 2

Вам просто нужно указать параметры на url и вызвать их в контроллере

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