22 |
41 |
42 |
23 |
40 |
24 | angular-breadcrumb
25 |
39 | -
26 |
- Sample 27 |
- Docs
28 | - Contribute
29 |
43 |
54 |
55 |
56 |
44 | 
45 |
46 |
53 |
47 |
48 |
49 |
50 |
51 |
52 | 
57 |
58 |
59 |
60 |
61 |
62 |
63 |
64 |
65 |
66 |
67 |
68 |
69 |
--------------------------------------------------------------------------------
/sample/views/booking_day.html:
--------------------------------------------------------------------------------
1 | | Id | 5 |Room | 6 |7 | |
|---|---|---|
| {{reservation.reservationId}} | 12 |{{getRoom(reservation.roomId).roomNumber}} | 13 |View | 14 |
2 |
3 |
12 |
--------------------------------------------------------------------------------
/sample/views/booking_list.html:
--------------------------------------------------------------------------------
1 | Reservation {{reservation.reservationId}}
4 |-
5 |
- Id
- {{reservation.reservationId}} 6 |
- Guest
- {{reservation.guestName}} 7 |
- Room
- {{room.roomNumber}} 8 |
- From
- {{reservation.from | date:'mediumDate'}} 9 |
- To
- {{addDays(reservation.nights, reservation.from) | date:'mediumDate'}} 10 |
2 |
6 |
7 |
3 |
5 | Booking
4 |
8 |
15 |
--------------------------------------------------------------------------------
/sample/views/home.html:
--------------------------------------------------------------------------------
1 |
9 |
11 |
12 |
13 |
14 | Description
2 |
3 |
6 |
7 | angular-breadcrumb is a module for AngularJS, which generates a breadcrumb for any page of your application. It is strongly based on the UI-router framework and its hierarchical tree of states.
Browse to the sample to see the example above working.
5 |Key features
8 |-
9 |
- Build a breadcrumb with a step for each state in the current state's hierarchy, 10 |
- Display a human readable label for each step and allows angular binding in it, 11 |
- Work with minimal configuration, 12 |
- Allow custom template (default is a predefined Bootstrap 3 breadcrumb template). 13 |
16 |
17 | 
View on GitHub
18 |
19 |
20 | 
Download (0.5.0)
21 |
22 |
--------------------------------------------------------------------------------
/sample/views/room_detail.html:
--------------------------------------------------------------------------------
1 | View on GitHub
18 |
19 |
20 | Download (0.5.0)
21 |
22 | Room {{room.roomNumber}}
2 |-
3 |
- Id
- {{room.roomId}} 4 |
- Number
- {{room.roomNumber}} 5 |
- Type
- {{room.type}} 6 |
Edition room {{room.roomId}}
2 |New room
3 | 4 | 33 | -------------------------------------------------------------------------------- /sample/views/room_list.html: -------------------------------------------------------------------------------- 1 |Rooms
2 | 3 || Id | 7 |Number | 8 |Type | 9 |10 | | |
|---|---|---|---|---|
| {{item.roomId}} | 15 |{{item.roomNumber}} | 16 |{{item.type}} | 17 |View | 18 |Edit | 19 |
Sample
2 |
3 |
17 |
22 |
--------------------------------------------------------------------------------
/src/.jshintrc:
--------------------------------------------------------------------------------
1 | {
2 | "curly": true,
3 | "eqeqeq": true,
4 | "immed": true,
5 | "latedef": true,
6 | "newcap": true,
7 | "noarg": true,
8 | "sub": true,
9 | "undef": true,
10 | "unused": true,
11 | "boss": true,
12 | "eqnull": true,
13 | "node": true,
14 | "globals": {
15 | "angular": true
16 | }
17 | }
--------------------------------------------------------------------------------
/src/angular-breadcrumb.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | function isAOlderThanB(scopeA, scopeB) {
4 | if(angular.equals(scopeA.length, scopeB.length)) {
5 | return scopeA > scopeB;
6 | } else {
7 | return scopeA.length > scopeB.length;
8 | }
9 | }
10 |
11 | function parseStateRef(ref) {
12 | var parsed = ref.replace(/\n/g, " ").match(/^([^(]+?)\s*(\((.*)\))?$/);
13 | if (!parsed || parsed.length !== 4) { throw new Error("Invalid state ref '" + ref + "'"); }
14 | return { state: parsed[1], paramExpr: parsed[3] || null };
15 | }
16 |
17 | var $registeredListeners = {};
18 | function registerListenerOnce(tag, $rootScope, event, fn) {
19 | var deregisterListenerFn = $registeredListeners[tag];
20 | if ( deregisterListenerFn !== undefined ) {
21 | deregisterListenerFn();
22 | }
23 | deregisterListenerFn = $rootScope.$on(event, fn);
24 | $registeredListeners[tag] = deregisterListenerFn;
25 | }
26 |
27 | function $Breadcrumb() {
28 |
29 | var $$options = {
30 | prefixStateName: null,
31 | template: 'bootstrap3',
32 | templateUrl: null,
33 | templateLast: 'default',
34 | templateLastUrl: null,
35 | includeAbstract : false
36 | };
37 |
38 | this.setOptions = function(options) {
39 | angular.extend($$options, options);
40 | };
41 |
42 | this.$get = ['$state', '$stateParams', '$rootScope', function($state, $stateParams, $rootScope) {
43 |
44 | var $lastViewScope = $rootScope;
45 |
46 | // Early catch of $viewContentLoaded event
47 | registerListenerOnce('$Breadcrumb.$viewContentLoaded', $rootScope, '$viewContentLoaded', function (event) {
48 | // With nested views, the event occur several times, in "wrong" order
49 | if(!event.targetScope.ncyBreadcrumbIgnore &&
50 | isAOlderThanB(event.targetScope.$id, $lastViewScope.$id)) {
51 | $lastViewScope = event.targetScope;
52 | }
53 | });
54 |
55 | // Get the parent state
56 | var $$parentState = function(state) {
57 | // Check if state has explicit parent OR we try guess parent from its name
58 | var parent = state.parent || (/^(.+)\.[^.]+$/.exec(state.name) || [])[1];
59 | var isObjectParent = typeof parent === "object";
60 | // if parent is a object reference, then extract the name
61 | return isObjectParent ? parent.name : parent;
62 | };
63 |
64 | // Add the state in the chain if not already in and if not abstract
65 | var $$addStateInChain = function(chain, stateRef) {
66 | var conf,
67 | parentParams,
68 | ref = parseStateRef(stateRef),
69 | force = false,
70 | skip = false;
71 |
72 | for(var i=0, l=chain.length; iThis app is a basic information system for hotel. Its main purpose is to illustrate how work the
4 | module angular-breadcrumb in various situations.
Here is the state machine :
6 | ─ home (defined as prefix in the breadcrumb) 7 | ─ sample 8 | ─ booking (override his parent state to 'sample' in the breadcrumb) 9 | └── booking.day (use the angular date filter in label) 10 | └── booking.day.detail (open a popup, not displayed in breadcrumb) 11 | ─ room (override his parent state to 'sample' in the breadcrumb) 12 | └── room.detail (view included in root's view instead of parent's one, variable in breadcrumb label) 13 | └── room.detail.edit (allow to see the working parameterized link for parent 'room.detail')14 | 15 |
For more information, see the sample app's configuration.
16 |View A
', ncyBreadcrumb: {label: 'State A'}})
106 | .state('A.B', {url: '/b', controller: 'BCtrl', template: 'View B
', ncyBreadcrumb: {label: 'State {{tripleB}}'}})
107 | .state('A.B.C', {url: '/c', ncyBreadcrumb: {label: 'State C'}}) // no controller
108 | .state('A.B.D', {url: '/d', controller: function($scope) {$scope.tripleD='DDD';}, template: 'View D
', ncyBreadcrumb: {label: 'State {{tripleD}}'}}); // inline controller
109 | }).controller('ACtrl', function($scope) {
110 | $scope.tripleA = 'AAA';
111 | }).controller('BCtrl', function($scope) {
112 | $scope.tripleB = 'BBB';
113 | });
114 |
115 | /**
116 | * Module with html configuration.
117 | */
118 | angular.module('ncy-html-conf', ['ngSanitize']).config(function($stateProvider) {
119 | $stateProvider
120 | .state('html', {url: '/html', ncyBreadcrumb: {label: 'Html is interpreted'}});
121 | });
122 |
123 | angular.module('ncy-sample-conf', ['ncy-sample', 'ngMock']).config(function($urlRouterProvider) {
124 | // New module to override the otherwise of the sample app.
125 | // (we don't want to deal with the location according to each state)
126 | $urlRouterProvider.otherwise(function() {
127 | return false;
128 | });
129 | }).run(function($httpBackend) {
130 | // Due to templateUrl definitions in $state configuration,
131 | // httpBackend will try to load the view for each state asked.
132 | $httpBackend.when('GET', 'views/home.html').respond('dummy home view');
133 | $httpBackend.when('GET', 'views/sample.html').respond('dummy sample view');
134 | $httpBackend.when('GET', 'views/room_list.html').respond('dummy room_list view');
135 | $httpBackend.when('GET', 'views/room_detail.html').respond('dummy room_detail view');
136 | $httpBackend.when('GET', 'views/room_form.html').respond('dummy room_form view');
137 | });
138 |
139 | /**
140 | * Module with multiple views related to one state and interpolated labels
141 | */
142 | angular.module('ncy-multiple-interpolation-conf', []).config(function($stateProvider) {
143 | $stateProvider
144 | .state('A', {
145 | url: '/a',
146 | views: {
147 | 'a@': {
148 | template: 'View A
',
149 | controller: 'ACtrl'
150 | }
151 | }
152 | })
153 | .state('A.B', {
154 | url: '/b',
155 | views: {
156 | 'b@': {
157 | template: 'View B
',
158 | controller: 'BCtrl'
159 | }
160 | },
161 | ncyBreadcrumb: {
162 | label: 'State {{tripleB}}'
163 | }
164 | });
165 | }).controller('ACtrl', function() {
166 | }).controller('BCtrl', function($scope) {
167 | $scope.tripleB = 'BBB';
168 | });
169 |
--------------------------------------------------------------------------------
/test/mock/test-ui-router-sample.js:
--------------------------------------------------------------------------------
1 | /*jshint undef: false */
2 |
3 | /**
4 | * Module with the ui-router sample conf.
5 | * Code is taken from https://github.com/angular-ui/ui-router/tree/master/sample
6 | * and has been merged in this functionnal module in order to test
7 | * the angular-breadcrumb with the sample of ui-router.
8 | */
9 | angular.module('ncy-ui-router-conf', ['ngMock'])
10 | .factory('utils', function () {
11 | return {
12 | findById: function findById(a, id) {
13 | for (var i = 0; i < a.length; i++) {
14 | if (a[i].id === id) {
15 | return a[i];
16 | }
17 | }
18 | return null;
19 | },
20 |
21 | newRandomKey: function newRandomKey(coll, key, currentKey){
22 | var randKey;
23 | do {
24 | randKey = coll[Math.floor(coll.length * Math.random())][key];
25 | } while (randKey === currentKey);
26 | return randKey;
27 | }
28 | };
29 | })
30 | .factory('contacts', ['utils', function (utils) {
31 | var contacts = {
32 | "contacts":[
33 | {"id": 1, "name": "Alice", "items": [
34 | {"id": "a", "type": "phone number", "value": "555-1234-1234"},
35 | {"id": "b", "type": "email", "value": "alice@mailinator.com"}
36 | ]},
37 | {"id": 42, "name": "Bob", "items": [
38 | {"id": "a", "type": "blog", "value": "http://bob.blogger.com"},
39 | {"id": "b", "type": "fax", "value": "555-999-9999"}
40 | ]},
41 | {"id": 123, "name": "Eve", "items": [
42 | {"id": "a", "type": "full name", "value": "Eve Adamsdottir"}
43 | ]}
44 | ]
45 | };
46 | var factory = {};
47 | factory.all = function () {
48 | return contacts;
49 | };
50 | factory.get = function (id) {
51 | return contacts.then(function(){
52 | return utils.findById(contacts, id);
53 | });
54 | };
55 | return factory;
56 | }])
57 | .config(function($stateProvider, $breadcrumbProvider) {
58 | $breadcrumbProvider.setOptions({
59 | prefixStateName: 'home'
60 | });
61 |
62 | $stateProvider.state("home", {
63 | url: "/",
64 | template: 'Welcome to the UI-Router Demo
' + 65 | 'Use the menu above to navigate. ' +
66 | 'Pay attention to the $state and $stateParams values below.
Click these links—Alice or ' + 68 | 'Bob—to see a url redirect in action.
' 69 | 70 | }) 71 | .state('about', { 72 | url: '/about', 73 | templateProvider: ['$timeout', function ($timeout) { 74 | return $timeout(function () { 75 | return 'UI-Router Resources
- ' +
76 | '
- Source for this Sample ' + 77 | '
- Github Main Page ' + 78 | '
- Quick Start ' + 79 | '
- In-Depth Guide ' + 80 | '
- API Reference ' + 81 | '
Contact ID: ' + $stateParams.contactId + ''; 125 | }] 126 | } 127 | }, 128 | ncyBreadcrumb: { 129 | parent: 'contacts.list' // Override the parent state (only for the breadcrumb). 130 | } 131 | }) 132 | .state('contacts.detail.item', { 133 | url: '/item/:itemId', 134 | views: { 135 | '': { 136 | templateUrl: 'app/contacts/contacts.detail.item.html', 137 | controller: ['$scope', '$stateParams', '$state', 'utils', 138 | function ( $scope, $stateParams, $state, utils) { 139 | $scope.item = utils.findById($scope.contact.items, $stateParams.itemId); 140 | 141 | $scope.edit = function () { 142 | $state.go('.edit', $stateParams); 143 | }; 144 | }] 145 | }, 146 | 'hint@': { 147 | template: ' This is contacts.detail.item overriding the "hint" ui-view' 148 | } 149 | } 150 | }) 151 | .state('contacts.detail.item.edit', { 152 | views: { 153 | '@contacts.detail': { 154 | templateUrl: 'app/contacts/contacts.detail.item.edit.html', 155 | controller: ['$scope', '$stateParams', '$state', 'utils', 156 | function ( $scope, $stateParams, $state, utils) { 157 | $scope.item = utils.findById($scope.contact.items, $stateParams.itemId); 158 | $scope.done = function () { 159 | $state.go('^', $stateParams); 160 | }; 161 | }] 162 | } 163 | } 164 | }); 165 | }) 166 | .run(function($httpBackend) { 167 | // Due to templateUrl definitions in $state configuration, 168 | // httpBackend will try to load the view for each state asked. 169 | $httpBackend.when('GET', 'app/contacts/contacts.html').respond('dummy contacts view'); 170 | $httpBackend.when('GET', 'app/contacts/contacts.list.html').respond('dummy contacts.list view'); 171 | $httpBackend.when('GET', 'app/contacts/contacts.detail.html').respond('dummy contacts.detail view'); 172 | $httpBackend.when('GET', 'app/contacts/contacts.detail.item.html').respond('dummy contacts.detail.item view'); 173 | $httpBackend.when('GET', 'app/contacts/contacts.detail.item.edit.html').respond('dummy contacts.detail.item.edit view'); 174 | }); 175 | -------------------------------------------------------------------------------- /test/mock/test-utils.js: -------------------------------------------------------------------------------- 1 | /*jshint undef: false */ 2 | 3 | var goToState, goToStateAndFlush, stringifyStateChain; 4 | 5 | beforeEach(function() { 6 | module('ncy-angular-breadcrumb', 'ui.router.state', 'ngMock', 'ng'); 7 | }); 8 | 9 | // Helpful function for tests : navigate to a state 10 | beforeEach(module(function() { 11 | return function($state, $rootScope) { 12 | goToState = function(state, stateParams) { 13 | $state.transitionTo(state, stateParams); 14 | $rootScope.$digest(); 15 | }; 16 | }; 17 | })); 18 | 19 | /** 20 | * Due to templateUrl definitions in $state configuration, 21 | * httpBackend will try to load the view for each state asked. 22 | */ 23 | beforeEach(module(function() { 24 | return function($httpBackend, $state) { 25 | 26 | // Helpful function for navigate within states. 27 | goToStateAndFlush = function(state, stateParams) { 28 | $state.transitionTo(state, stateParams); 29 | $httpBackend.flush(); 30 | }; 31 | }; 32 | })); 33 | 34 | stringifyStateChain = function(states) { 35 | var names = []; 36 | angular.forEach(states, function(state) { 37 | names.push(state.name); 38 | }); 39 | return names.join(' --> '); 40 | }; -------------------------------------------------------------------------------- /test/spec/conf-basic-test.js: -------------------------------------------------------------------------------- 1 | /*jshint undef: false */ 2 | 3 | describe('Simple conf', function() { 4 | 5 | beforeEach(function() { 6 | module('ncy-basic-conf'); 7 | }); 8 | 9 | it('must have some states defined', inject(function($state) { 10 | expect($state.get('A').name).toBe('A'); 11 | expect($state.get('A.B').name).toBe('A.B'); 12 | })); 13 | 14 | it('allows state transition in test', inject(function($state) { 15 | var oldState = $state.current.name; 16 | goToState('A.B'); 17 | var newState = $state.current.name; 18 | 19 | expect(newState).not.toBe(oldState); 20 | expect(newState).toBe('A.B'); 21 | })); 22 | 23 | }); -------------------------------------------------------------------------------- /test/spec/conf-sample-test.js: -------------------------------------------------------------------------------- 1 | /*jshint undef: false */ 2 | 3 | describe('Sample conf', function() { 4 | 5 | beforeEach(function() { 6 | module('ncy-sample-conf'); 7 | }); 8 | 9 | it('must have some states defined', inject(function($state) { 10 | expect($state.get('home').name).toBe('home'); 11 | expect($state.get('room').name).toBe('room'); 12 | })); 13 | 14 | it('allows state transition in test', inject(function($state) { 15 | var oldState = $state.current.name; 16 | goToStateAndFlush('room'); 17 | var newState = $state.current.name; 18 | 19 | expect(newState).not.toBe(oldState); 20 | expect(newState).toBe('room'); 21 | })); 22 | 23 | }); -------------------------------------------------------------------------------- /test/spec/conf-ui-router-sample-test.js: -------------------------------------------------------------------------------- 1 | /*jshint undef: false */ 2 | 3 | describe('Ui-router\'s sample conf', function() { 4 | 5 | beforeEach(function() { 6 | module('ncy-ui-router-conf'); 7 | }); 8 | 9 | it('must have some states defined', inject(function($state) { 10 | expect($state.get('home').name).toBe('home'); 11 | expect($state.get('contacts.list').name).toBe('contacts.list'); 12 | expect($state.get('contacts.detail.item.edit').name).toBe('contacts.detail.item.edit'); 13 | })); 14 | 15 | it('allows state transition in test', inject(function($state) { 16 | console.log('current : ', $state.current); 17 | 18 | var oldState = $state.current.name; 19 | goToStateAndFlush('contacts.list'); 20 | var newState = $state.current.name; 21 | 22 | expect(newState).not.toBe(oldState); 23 | expect(newState).toBe('contacts.list'); 24 | })); 25 | 26 | }); 27 | -------------------------------------------------------------------------------- /test/spec/directive-basic-test.js: -------------------------------------------------------------------------------- 1 | /*jshint undef: false */ 2 | 3 | describe('Breadcrumb directive with basic conf', function() { 4 | 5 | var element, scope; 6 | 7 | beforeEach(function() { 8 | module('ncy-basic-conf'); 9 | }); 10 | 11 | beforeEach(inject(function($rootScope, $compile) { 12 | element = angular.element('
');
16 | var compile = $compile(element);
17 | scope = $rootScope.$new();
18 | compile(scope);
19 | scope.$digest();
20 | }));
21 |
22 | it('renders the correct state chain and views content', inject(function () {
23 | goToState('A.B');
24 | scope.$emit('$viewContentLoaded');
25 | scope.$digest();
26 |
27 | console.info('Directive content : ' + element.text());
28 |
29 | expect(element.text()).toContain('AState BBBView AView B');
30 | }));
31 | });
32 |
33 | describe('when the parent view located after child view ', function () {
34 | beforeEach(inject(function ($rootScope, $compile) {
35 | element = angular.element('
');
36 | var compile = $compile(element);
37 | scope = $rootScope.$new();
38 | compile(scope);
39 | scope.$digest();
40 | }));
41 |
42 | it('renders the incorrect state chain', inject(function () {
43 | goToState('A.B');
44 | scope.$emit('$viewContentLoaded');
45 | scope.$digest();
46 |
47 | console.info('Directive content : ' + element.text());
48 |
49 | expect(element.text()).not.toContain('State BBB');
50 | }));
51 | });
52 | });
53 | });
54 |
55 | describe('Breadcrumb directive with multiple-interpolation conf', function() {
56 | beforeEach(function () {
57 | module('ncy-multiple-interpolation-conf', function ($controllerProvider) {
58 | $controllerProvider.register('ACtrl', function ($scope) {
59 | $scope.ncyBreadcrumbIgnore = true;
60 | });
61 | });
62 | });
63 |
64 | describe('when ncyBreadcrumbIgnore property equals true on parent view scope', function () {
65 | describe('when the parent view located before child view ', function () {
66 | beforeEach(inject(function ($rootScope, $compile) {
67 | element = angular.element('
');
68 | var compile = $compile(element);
69 | scope = $rootScope.$new();
70 |
71 | compile(scope);
72 | scope.$digest();
73 | }));
74 |
75 | it('renders the correct state chain and views content', inject(function () {
76 | goToState('A.B');
77 | scope.$emit('$viewContentLoaded');
78 | scope.$digest();
79 |
80 | console.info('Directive content : ' + element.text());
81 |
82 | expect(element.text()).toContain('AState BBBView AView B');
83 | }));
84 | });
85 |
86 | describe('when the parent view located after child view ', function () {
87 | beforeEach(inject(function ($rootScope, $compile) {
88 | element = angular.element('
');
89 | var compile = $compile(element);
90 | scope = $rootScope.$new();
91 |
92 | compile(scope);
93 | scope.$digest();
94 | }));
95 |
96 | it('renders the correct state chain and views content', inject(function () {
97 | goToState('A.B');
98 | scope.$emit('$viewContentLoaded');
99 | scope.$digest();
100 |
101 | console.info('Directive content : ' + element.text());
102 |
103 | expect(element.text()).toContain('AState BBBView BView A');
104 | }));
105 | });
106 | });
107 |
108 | });
109 |
--------------------------------------------------------------------------------
/test/spec/directive-object-parent-test.js:
--------------------------------------------------------------------------------
1 | /*jshint undef: false */
2 |
3 | describe('Breadcrumb directive with object parent conf', function() {
4 |
5 | var element, scope;
6 |
7 | beforeEach(function() {
8 | module('ncy-object-parent-conf');
9 | });
10 |
11 | beforeEach(inject(function($rootScope, $compile) {
12 | element = angular.element('
| {{step.ncyBreadcrumbLabel}} | ' + 74 | '{{step.ncyBreadcrumbLink}} | ' + 75 | '
' +
109 | '' +
110 | '' +
111 | '