CODEWITHSUNDEEP
javascriptangularjsangular-ui-router
rtbm
rtbm

Reputation: 536

AngularJS Changing the particular view by $stateProvider from ui.router

I'm writing full stack e-commerce store with AngularJS and express.js, and I'm searching help of somebody more experienced with $stateProvider and ngAnimate.

Currently I'm having a trouble with $stateProvider and two columns layout.

I've got root view abstract state which is named 'pages'. This state includes base app template with view named 'main'. On state change event the 'main' view is transitioning to the next one with CSS transition by the ngAnimate module and it's all OK with regular one column page.

The trouble I'm experiencing is within the two-column layout included in the 'main' view. With the partial template of two columns view, ngAnimate was transitioning whole content, so column was unnecessary transitioned with the products view.

What I've done, I've created a sub-state and divided its template into two views. Right now the 'sidebar' view is including partial with categories of products, and the second one, the 'content' is a products list.

The products list view contents is depending on sub-state of products state, based on abstract state descibed above.

Right now the products list is changing correctly with transition attached to the 'content' view but the column 'sidebar' is unnecessary reloaded.

Is it possible to change state with changing only the content of particular view or are you having other ideas?

Live demo: http://rtbm.space:3000/#/products

Code: https://github.com/rtbm/angular-express-store/tree/master/public/assets/src/web/modules

The modules described above are pages and products.

Upvotes: 2

Views: 170

Answers (1)

Tob
Tob

Reputation: 332

You could use a more hierarchical route-structure:

.state('pages.products.category', {
    abstract: true,
    url: '/category',
    templateUrl: 'assets/dist/web/modules/products/partials/products.category.html',
    controller: 'ProductsCategoryController',
    controllerAs: 'productsCategoryCtrl',
    resolve: {
        CategoriesData: function(CategoriesService) {
            return CategoriesService.query();
        }
    }
})
.state('pages.products.category.content', {
    url: '/:categoryId',
    templateUrl: 'assets/dist/web/modules/products/partials/products.list.html',
    controller: 'ProductsListController',
    controllerAs: 'productsListCtrl',
    resolve: {
        ProductsData: function($stateParams, ProductsService) {
            return ProductsService.query({
                categoryId: $stateParams.categoryId
            });
        }
    }
})

Now the products.category.html should contain only one <ui-view>. The result is that the abstract parent state pages.products.category (and therefore the category's side nav) isn't reloaded every time you click on a category link in the side nav.

I hope this helps!

Upvotes: 1

Related Questions