ui-breadcrumb v0.0.4

AngularJS Breadcrumb

Automatic breadcrumb generation based on ui-router.

Installation

Using bower:

bower install ui-breadcrumb --save

Using npm:

npm install ui-breadcrumb --save

Usage

Currently ui-breadcrumb provides a simple directive to render the breadcrumb.

<ui-breadcrumb></ui-breadcrumb>

Examples

Config

Here is a list of general configuration for ui-breadcrumb.

angular.module('app').config(function ($breadcrumbProvider) {
    $breadcrumbProvider.setOptions({
    
        // Should it include abstract states as well?
        includeAbstract: false,
        
        // A custom template url. By default we're using bootstrap3.
        templateUrl: 'ui-breadcrumb/template/bootstrap3.html'
        
    });
});

Breadcrumbs

Below is full ui-breadcrumb API's examples.

angular.module('app.part').config(function ($breadcrumbProvider) {
    $stateProvider
        .state('app', { 
            url: '',
            abstract: true,
            // ...
            breadcrumb: {
                label: 'My App',    // You can pass a simple string as label.
                force: true         // If you have "includeAbstract: false" you can still force some states.
            }
        })
        .state('app.contact', { 
            url: '/list',
            // ...
            breadcrumb: {
                skip: true         // You can skip a specific state as well.
            }
        })
        .state('app.contact.list', {
            url: '/list',
            // ...
            breadcrumb: {
                label: 'Contacts',
                stateOptions: {
                    reload: true    // You can pass stateOptions to use in ui-sref-opts.
                                    // Visit: http://angular-ui.github.io/ui-router/site/#/api/ui.router.state.$state
                                    //      and take a look at go() method "options" for all possible options.
                }
            }
        })
        .state('app.contact.person', {
            url: '/:personId',
            // ...
            breadcrumb: {
                // You can also pass an injectable function (or annotated-array like angular services)
                label: function ($stateParams, personsApi) {
                    return personsApi.get($stateParams.personId).then(function (person) {
                        return person.fullName;
                    });
                },
                parent: 'app.contact.list' // You can explicitly set a parent. An injectable function is allowed here too ;)
            }
        })
    ;
});

Contributing

First, you need to install node and npm.

npm install
npm install -g bower grunt-cli
bower install

Now you can visit examples/index.html for some examples.

Build

You can build using command below:

grunt build

Checklist

• Library core
• Write unit tests
• Write e2e-tests
• Write an API doc
• Provide complete examples
• A directive to add breadcrumb in page's <title>.
• Add only-last/except-last options to ui-breadcrumb directive. (Is it a good idea?)

License

MIT License