Skip to content
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 

README.md

angular-breadcrumbs

A better AngularJS service to help with breadcrumb-style navigation between views.

The full source code to the following example can be checked out from the 'gh-pages' brach.

Step 1: Include angular-breadcrumbs

Include angular-breadcrumb.min.js in your app under the angular.min.js reference

Step 2: Set up routing

In order to use breadcrumbs you'll need to use configure your app to use Angular's routeProvider. You'll also need to include the breadcrumbs service. You can then set a label for each route (breadcrumb) within the route options.

  var app = angular.module('ab', ['services.breadcrumbs'])
    .config(['$routeProvider', function($routeProvider) {
      $routeProvider
        .when('/', { controller: 'HomeController', templateUrl: 'vw/home.html', label: 'Home' })
        .when('/stock/:stock', { controller: 'StockController', templateUrl: 'vw/stock.html', label: 'Stock' })
        .when('/stock/:stock/detail', { controller: 'StockDetailController', templateUrl: 'vw/stock-detail.html', label: 'Stock Detail' })
        .otherwise({ redirectTo: '/' });

Step 3: Make the breadcrumb object available to your app

Set the breadcrumb object in your app's main controller.

  app.controller('HomeController', ['$scope', 'breadcrumbs', function($scope, breadcrumbs) {
    $scope.breadcrumbs = breadcrumbs;

Step 4: Display the breadcrumbs within your app

This HTML snippet will display your breadcrumb navigation and leave the last breadcrumb (the page you're currently on) unlinked.

  <ol class="breadcrumb">
    <li ng-repeat="breadcrumb in breadcrumbs.getAll()"><a href="#{{breadcrumb.path}}" ng-hide="$last">{{breadcrumb.label}}</a><span ng-show="$last">{{breadcrumb.label}}</span></li>
  </ol>
  <div ng-view ng-cloak></div>

That's it! You should now have breadcrumb navigation that can even handle nested routes.

I hope you find this useful.

Thanks, Ian

About

A better AngularJS service to help with breadcrumb-style navigation between views.

Resources

License

Releases

No releases published

Packages

No packages published
You can’t perform that action at this time.