A better AngularJS service to help with breadcrumb-style navigation between views.
This project was built using ng-boilerplate!
Install using Bower:
bower install es-breadcrumbs --save
Include ng-breadcrumbs.min.js in your app.
In order to use breadcrumbs you'll need to use configure your app to use Angular's routeProvider. You'll also need to load the ng-breadcrumbs module. You can then set a label for each route (breadcrumb) within the route options.
var app = angular.module('ab', ['ngRoute', 'ng-breadcrumbs'])
.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/', { templateUrl: 'assets/template/home.html', label: 'Home' })
.when('/stock/:stock', { controller: 'StockController', templateUrl: 'assets/template/stock.html' })
.when('/stock/:stock/detail', {
controller: 'StockDetailController',
templateUrl: 'assets/template/stock-detail.html',
label: 'More Detail'
})
.otherwise({ redirectTo: '/' });Set the breadcrumbs service in your app's main controller.
app.controller('HomeController', [
'$scope',
'breadcrumbs',
function($scope, breadcrumbs) {
$scope.breadcrumbs = breadcrumbs;
...This HTML snippet will display your breadcrumb navigation and leave the last breadcrumb (the page you're currently on) unlinked.
<ol class="ab-nav breadcrumb">
<li ng-repeat="breadcrumb in breadcrumbs.get() track by breadcrumb.path" ng-class="{ active: $last }">
<a ng-if="!$last" ng-href="#{{ breadcrumb.path }}" ng-bind="breadcrumb.label" class="margin-right-xs"></a>
<span ng-if="$last" ng-bind="breadcrumb.label"></span>
</li>
</ol>That's it! You should now have breadcrumb navigation that can even handle nested routes.
To add dynamic route labels, create an options object on the breadcrumbs service or pass one as a parameter within
breadcrumbs.get(), for example:
// Will replace the default label 'Stock Detail' with the dynamic label 'AAPL Details'
breadcrumbs.options = { 'Stock Detail': $routeParams.stock + ' Details' };I hope you find this useful!
«–– Ian
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent