|
1 | 1 | # crumble
|
2 | 2 |
|
3 |
| -*A highly customizable breadcrumb service for AngularJS with ngRoute. Gets you back home the way __you__ want.* |
| 3 | +*A highly customizable breadcrumb service for AngularJS 1.x with ngRoute. Gets you back home the way __you__ want.* |
4 | 4 |
|
5 |
| -While other breadcrumb services for ngRoute make many assumptions about your application, crumble provides sensible defaults but also provides you with the means to customize every detail of the service. |
| 5 | +crumble allows you to generate dynamic breadcrumbs for your application. |
| 6 | +It provides sensible defaults but also allows you to [customize](#customization) every detail of the service to match your app's structure. |
6 | 7 |
|
7 | 8 |
|
8 |
| -## Quick start |
| 9 | +## Setup |
9 | 10 |
|
10 |
| -Install crumble using [Bower]. Have [ngRoute] up and running. |
11 |
| -~~~ |
12 |
| -bower install angular-crumble --save |
13 |
| -~~~ |
14 |
| -crumble can also be used with [npm] and [Browserify]. It follows the conventions described in this [npm blog post]. |
| 11 | +### Using a Module System |
15 | 12 |
|
16 |
| -Add breadcrumb labels. With [interpolation][$interpolate]. |
17 |
| -~~~js |
18 |
| -$routeProvider.when('/', { |
19 |
| - label: 'Hello {{name}}!', |
20 |
| - // controller, template, ... |
21 |
| -}) |
| 13 | +Install crumble using your favourite package manager |
22 | 14 | ~~~
|
23 |
| - |
24 |
| -Generate the breadcrumbs for the current path using the given context for interpolation. |
25 |
| -~~~js |
26 |
| -crumble.update({ |
27 |
| - name: 'crumble' |
28 |
| -}); |
| 15 | +yarn add angular-crumble || npm i -S angular-crumble |
29 | 16 | ~~~
|
30 | 17 |
|
31 |
| -Output the breadcrumbs. |
32 |
| -~~~html |
33 |
| -<a ng-repeat="bc in crumble.trail" ng-href="#{{bc.path}}"> |
34 |
| - {{bc.label}} |
35 |
| -</a> |
| 18 | +Require `crumble` in your AngularJS module's dependencies |
| 19 | +~~~js |
| 20 | +angular.module('app', [require('angular-crumble')]); |
36 | 21 | ~~~
|
37 | 22 |
|
38 |
| -Also check out how you can **[customize crumble](#customization)** to make it fit your needs. |
39 |
| - |
| 23 | +crumble follows the conventions described in this [npm blog post]. |
40 | 24 |
|
41 |
| -## Setup |
| 25 | +### Using Plain Old Script Tags |
| 26 | +Have [ngRoute] up and running. |
42 | 27 |
|
43 |
| -Install crumble using [Bower]. Have [ngRoute] up and running. |
| 28 | +Download crumble using [Bower] or just manually. |
44 | 29 | ~~~
|
45 | 30 | bower install angular-crumble --save
|
46 | 31 | ~~~
|
47 | 32 |
|
48 |
| -Include `crumble.js` in your HTML if you don't use [wiredep] or something similar. |
| 33 | +Load `crumble.js` from your HTML. |
49 | 34 |
|
50 | 35 | ~~~html
|
51 |
| -<script src="bower_components/angular-crumble/crumble.js"></script> |
| 36 | +<script src="path/to/crumble.js"></script> |
52 | 37 | ~~~
|
53 | 38 |
|
54 | 39 | Require `crumble` in your AngularJS module's dependencies
|
@@ -188,14 +173,12 @@ This repository uses the [Node.js Style Guide][nsg]. Contributions have to follo
|
188 | 173 |
|
189 | 174 | ## License
|
190 | 175 |
|
191 |
| -Copyright (c) 2014 Raphael von der Grün. Licensed under the MIT License. |
| 176 | +Copyright (c) 2014–2017 Raphael von der Grün. Licensed under the MIT License. |
192 | 177 |
|
193 | 178 |
|
194 | 179 | [Bower]: http://bower.io/
|
195 |
| -[wiredep]: https://github.com/taptapship/wiredep |
196 | 180 | [ngRoute]: https://docs.angularjs.org/api/ngRoute
|
197 | 181 | [$interpolate]: https://docs.angularjs.org/api/ng/service/$interpolate
|
198 | 182 | [nsg]: https://github.com/felixge/node-style-guide
|
199 | 183 | [npm]: https://www.npmjs.com/
|
200 |
| -[Browserify]: http://browserify.org/ |
201 | 184 | [npm blog post]: http://blog.npmjs.org/post/114584444410
|
0 commit comments