CODEWITHSUNDEEP
angularjsbreadcrumbsangular-ui-router
faeru
faeru

Reputation: 13

AngularJS and UI-Router multi-level breadcrumbs element

I'm using AngularJS and UI-Router to make a little e-commerce product gallery. It should display a grid of images representing categories of products. When the user selects a category, the grid shall display the child categories of that one, and so on, until the user reaches a level where there are only products. Clicking in a product should display its details. Im using 2 states in UI-Router, one for the gallery and one for the details.

app.config(function($stateProvider){

    $stateProvider
        // Gallery State
        .state('gallery', {
            url: '/products/:category',
            templateUrl: 'views/gallery.html',
            controller: 'galleryCtrl'
        })
        // Details State
        .state('details', {
            url: '/details/:id',
            templateUrl: 'views/details.html',
            controller: 'detailsCtrl'
        });
});

In the 'gallery' state, the controller uses the :category parameter to get from the database all subcategories or products of that category to display in the grid. The 'details' state's controller uses an analog strategy to get the product's information with the :id parameter. Now I want to make a breadcrumb element that shows the 'path' the user went through the gallery. For example, if the user selects the "Computers" category, then the "Notebooks" category and then "Foo Notebook", the breadcrumb should display:

Computers > Notebooks > Foo Notebook

I've found solutions that get the state hierarchy from UI-Router to create the breadcrumb. The problem is, with only the 2 states I created, the breadcrumb wouldn't show all categories, just the last selected one. I don't want to create a state for each category because the number and hierarchy of categories can change. Is there any way to accomplish this?

Upvotes: 1

Views: 1455

Answers (1)

Daniel
Daniel

Reputation: 423

If you're really interested in documenting the way a user got somewhere: One way to go about this would be to create a service and push each state change to a data store in the service and replicated in a $cookieStore -- you can use the state change events for this.

Generally, though, whenever I've done breadcrumbs / hierarchies in the past - there is a definitive way to get to a location. Your example illustrates that; a specific notebook is under a general list category which is in turn under a parent category. So you can infer all parents when you get to a given item page. Not sure which solution best meets your needs.

Upvotes: 1

Related Questions