Getting started

Installation

angular-breadcrumb requires ui-router in minimal version 0.2.0 (when the method $state.get was added).

Download the production version or the development version.

Or download it with bower : open a terminal and run

bower install angular-breadcrumb

Include the js your web page:

<script src="[...]angular-breadcrumb[.min].js"></script>

Add dependency to your app module:

'ncy-angular-breadcrumb'

The module is now installed. It exposes the $breadcrumb service and the ncy-breadcrumb directive.

Configuration

Configure the ui-router (see the ui-router project).

Define a ncyBreadcrumbLabel property to each states

$stateProvider.state('home', {
  url: '/home',
  templateUrl: 'views/home.html',
  controller: 'HomeCtrl',
  data: {
    ncyBreadcrumbLabel: 'Home page'
  }
})

Note : the property ncyBreadcrumbLabel can contains bindings which are evaluated against the current state controller. For example, this state's config :

$stateProvider.state('home', {
  url: '/home',
  templateUrl: 'views/home.html',
  controller: function($scope) {
    $scope.foo='bar';
  },
  data: {
    ncyBreadcrumbLabel: 'State {{foo}}'
  }
})

... will produces State bar.

Every states that can be displayed in the breadcrumb must defined this property. If not, a state inherit the property from his parent. It results a breadcrumb including 2 states with the same label...

Activation

Use the directive ncy-breadcrumb

<div ncy-breadcrumb></div>

Let the magic begin !

See the API reference page for all the configuration options.