Angular Breadcrumbs

Breadcrumbs in Angular

Click Here for TL;DR

Breadcrumbs are a trail of history of your navigation through something. In our example, a single page web app. I have started creating a breadcrumb module anyone can use in there angular application. It is still a work in progress so feel free to tear it apart with criticism! I’d love to hear everyones thoughts and make it better.

This module is for Angular applications that use uiRouter. A version for ngRoute is coming soon!

You can find the Git Repo Here.

Breacrumbs Installation/Use

bower install jsc-breadcrumbs --save

This will give you access to jscBreadcrumbs and all of it’s dependencies along with saving it in your `bower.json` file.

Include script file and css file:

<script src="lib/jsc-breadcrumbs/jsc-breadcrumbs.min.js"></script>
<script src="lib/jsc-breadcrumbs/jscbreadcrumbs.css"></script>

To use jscBreadcrumbs, first include it in your module:

angular.module('myApp', ['jscBreadcrumbs']);

How It Works:

jscBreadcrumbs stores the previous states and their parameters in sessionStorage. The storing of both states and parameters allows you to travel back is states and not lose any dynamic data such as URL params (or any other parameters you set).

The directive allows you to either create a back button or a breadcrumb trail. Below are examples of using both.

Include the directive in your index.html file or it’s equivalent:

<jsc-breadcrumbs backbutton="true"></jsc-breadcrumbs/>

<jsc-breadcrumbs breadcrumbtrail="true"></jsc-breadcrumbs/>

That’s it! Now a back button or breadcrumb trail will appear to navigate your user back through there travel history.

Features

There is a JSCBreadcrumbs Service that makes some methods available to you. To use this service include JSCBreadcrumbs in your controller dependency injection.

Currently these methods include:

JSCBreadcrumbs.breadcrumbs() -> returns breadcrumbs array
JSCBreadcumbs.breadcrumbsPop() -> removes the last item on the breadcrumb array

You can also add params to each state that will affect the breadcrumbs behavior. Below is an example:

1
2
3
4
5
6
7
8
9
10
11
12
13
    $state('dashboard', {
        url : '/dashboard',
        templateUrl : 'dashboard.html',
        controller : 'DashboardCtrl',
        data : {
            breadcrumbs : {
                doNotShow : true,
                doNoteStore : true,
                name : 'Dashboard',
                reset : true
            }
        }
    });

The doNotShow param will hide the back button or breadcrumb trail (the back button is also hidden when no breadcrumbs are stored)
The doNotStore param will not store that state in the breadcrumb history.
The name param will use that value as the name for that state in the breadcrumb trail.
The reset param will tell breadcrumbs to reset when entering that state.

This breadcrumbs module is new and has a ways to go (A GitHub Pages will be set up soon). Here are some links to some more established breadcrumb modules:

JSCBreadcrumbs

angular-breadcrumb

ng-breadcrumbs

In The End

You can check out the GitHub Repo and the README.md to learn all about how to use jscBreadcrumbs (Breadcrumbs for Angular Apps that use UI Router).

JSCBreadcrumbs

Pro Tip: Updating Bower Package

Updating your bower package is quick and easy!

1
2
3
4
5
6
7
8
# commit your changes
git commit -am "Made some awesome new changes, now its even awesomer"

# tag the commit
git tag -a v0.0.2 -m "Release version 0.0.2"

# push to GitHub
git push origin master --tags

You can also quickly bump your version numbers throughout your files using: grunt-contrib-bump

Source: bob.yexley.net

One thought on “Breadcrumbs in Angular

Leave a Reply

Your email address will not be published. Required fields are marked *