Installation can be done via package managers such as npm or yarn
npm install ui-router-breadcrumbs --save
# or
yarn add ui-router-breadcrumbs
import the modules required for ui-router-breadcrumbs. It is necessary to include ngSanitize and ui.router for ui-router-breadcrumbs to work
<link rel="stylesheet" href="../ui-router-breadcrumbs.min.css">
<script src="angular/angular.min.js"></script>
<script src="angular-sanitize/angular-sanitize.min.js"></script>
<script src="angular-animate/angular-animate.min.js"></script>
<script src="../ui-router-breadcrumbs.min.js"></script>
add the uiBreadcrumbs dependency to the module
angular.module('myApp', ['uiBreadcrumbs'])
in your router config
.state('app.home', {
url: '/home',
data: {
label: 'Home', //label to show in breadcrumbs
},
templateUrl: 'templates/home.html'
})
in your html
<ui-breadcrumb></ui-breadcrumb>
you can specify to show or hide abstract states
can provide globally as
app.config(['breadcrumbconfigProvider', function(breadcrumbconfigProvider) {
breadcrumbconfigProvider.setAbstract(false);
}]);
or can be provided as attribute in the directive which will override the default configuration
<ui-breadcrumb abstract=true></ui-breadcrumb>