I have a page where I show 2 different lists of products using multiple views with each having a controller and template file. My state definition is like this:
.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'}
}
}
)
Each individual list has pagination and sorting filters at the top and these pagination and sorting filters are added to the URL as state parameters. Please tell me how to define these parameters for views of a state so that they can be added to URL and then used in the respective controllers.
If you have any better idea of displaying such a list of products with pagination parameters added to URL, please share your ideas. Any help will be greatly appreciated.
Thanks
NOTE: Please note that, I need to display both the lists on 1 page. Its kind of a homepage and featured Items list and then below that hot deals Items list is displayed and both of these lists have pagination, sorting and few other filters. URL will be something like this. mydomain.com/products/featured-page_1/deals-page_2/perpage_10/
<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>
