Multiple views in angular.js app

Question

Problem

I am trying to build a product list with (initially) the following features:

• Serverside pagination
• Serverside filtering

There are a number of problems with what I have at the moment, but the primary thing is that I can't seem to separate the views in the best way. At the moment whenever the page is changed, the category list is updated (and if any items are checked, they are unchecked).

How do I load the category list only on load of the page?

Thanks

Code

index.html:

<div ng-app="relv">
    <div ng-view></div>
</div>

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
<script src="//cdn.jsdelivr.net/angularjs/1.0.2/angular-resource.min.js"></script>
<script src="/angular/app.js"></script>
<script src="/angular/services.js"></script>
<script src="/angular/controllers.js"></script>
<script src="/angular/filters.js"></script>
<script src="/angular/directives.js"></script>

app.js:

'use strict';
angular.module('relv', ['relv.filters', 'relv.services', 'relv.directives']).
  config(['$routeProvider', function($routeProvider) {
    $routeProvider.when('/products', {templateUrl: '/angular/partials/product_list.html', controller: ProductListCtrl});
    $routeProvider.when('/products/:page', {templateUrl: '/angular/partials/product_list.html', controller: ProductListCtrl});
    $routeProvider.otherwise({redirectTo: '/products'});
  }]);

product_list.html:

<div id="category_list">
    <label ng-repeat="category in categories">
        <input type="checkbox" name="category" ng-model="filterCategories[category.id]"> {{ category.name }}
    </label>
</div>
{{ filterCategories }}

Product list, page {{ page }}.
<br><br>
<ul>
    <li ng-repeat="product in products">
        <a href="#/product/{{ product.id }}">{{ product.name }}</a><br>
        <span ng-repeat="category in product.categories">{{ category.name }}</span>
    </li>
</ul>

<a href="#/products/{{ page-1 }}">Previous page</a>
<a href="#/products/{{ page+1 }}">Next page</a>

controllers.js:

'use strict';

function ProductListCtrl($routeParams, $scope, ProductList, CategoryList) {
    $scope.page = $routeParams.page ? parseInt($routeParams.page) : 1;
    $scope.products = ProductList.query({'page': $scope.page});
    $scope.categories = CategoryList.query();
    $scope.filterCategories = {};
}
ProductListCtrl.$inject = ['$routeParams', '$scope', 'ProductList', 'CategoryList'];

services:js:

'use strict';

angular.module('relv.services', ['ngResource']).
    factory('Product', function($resource){
        return $resource('http://endpoint/api_dev.php/products/:productId.json', {}, {
            query: {method:'GET', params:{lang:'en'}, isArray:false}
        });
    }).
    factory('ProductList', function($resource){
        return $resource('http://endpoint/api_dev.php/products.json', {}, {
            query: {method:'GET', params:{lang:'en', page: ':page'}, isArray:true}
        });
    }).
    factory('CategoryList', function($resource){
        return $resource('http://endpoint/api_dev.php/categories.json', {}, {
            query: {method:'GET', params:{lang:'en'}, isArray:true}
        });
    })
;

Answer 1

If you always want the category list to be visible, put this code into index.html, above <ng-view>:

<div id="category_list">
    <label ng-repeat="category in categories">
        <input type="checkbox" name="category" ng-model="filterCategories[category.id]"> {{ category.name }}
    </label>
</div>
{{ filterCategories }}

Then it will not change on route changes -- only the part inside ng-view will change.

Update: put the code that loads the categories into a new controller:

function CategoryCtrl($scope, CategoryList) {
    $scope.categories = CategoryList.query();
    $scope.filterCategories = {};
}

index.html:

<div ng-controller="CategoryCtrl">
  <div id="category_list">
     <label ng-repeat="category in categories">
        <input type="checkbox" name="category" ng-model="filterCategories[category.id]"> {{ category.name }}
     </label>
  </div>
{{ filterCategories }}
</div>

<div ng-app="relv">
    <div ng-view></div>
</div>

Answer 2

Whenever you change views you are swapping the html of the whole page, including the checkboxes.

Break the html code into two views: master and detail (minor change).

Where the Master has the checkboxes and pager and the Detail has the Product list.

This way, angularjs only swaps html code (view) related to the products, not the categories.

This question in the Google forums talks about this issue

Updated: Example moving categories out of the detail view

<div id="category_list">
    <label ng-repeat="category in categories">
        <input type="checkbox" name="category" ng-model="filterCategories[category.id]"> {{ category.name }}
    </label>
</div>
{{ filterCategories }}

<div ng-app="relv">
    <div ng-view></div>
</div>


<a href="#/products/{{ page-1 }}">Previous page</a>
<a href="#/products/{{ page+1 }}">Next page</a>


<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
...

Alternatively

Don't use views in this case, group your products and change the data using a repeater (similar to paging, see my other answer with an example here).