|
| 1 | +#Angular Tutorial# |
| 2 | + |
| 3 | +An angular [bower](http://bower.io/) component for creating simple tutorials. |
| 4 | + |
| 5 | +##Installation## |
| 6 | + |
| 7 | + bower install angular-tutorial |
| 8 | + cd [repo location] |
| 9 | + npm install && bower install && grunt |
| 10 | + |
| 11 | +##Usage## |
| 12 | + |
| 13 | +Add `angular-tutorial` as a module dependency: |
| 14 | + |
| 15 | + angular.module('app','ngTutorial'); |
| 16 | + |
| 17 | +Register a tutorial: |
| 18 | + |
| 19 | + angular.module('app').controller |
| 20 | + ( |
| 21 | + 'AppCtrl', |
| 22 | + [ |
| 23 | + '$scope','$tutorial', |
| 24 | + function($scope,$tutorial) |
| 25 | + { |
| 26 | + $tutorial.register |
| 27 | + ( |
| 28 | + "tutorial1", //id |
| 29 | + {}, //config |
| 30 | + "My Tutorial", //name |
| 31 | + [ //steps |
| 32 | + { |
| 33 | + type: "showMessage", |
| 34 | + message: { |
| 35 | + content:"Step 1", |
| 36 | + buttonText: "Start", |
| 37 | + header: "Welcome!" |
| 38 | + } |
| 39 | + }, |
| 40 | + . |
| 41 | + . |
| 42 | + . |
| 43 | + ] |
| 44 | + ); |
| 45 | + } |
| 46 | + ] |
| 47 | + ); |
| 48 | + |
| 49 | +Trigger a tutorial: |
| 50 | + |
| 51 | + <button type='button' class='btn btn-lin' ng-tutorial ng-tutorial-id='mytutorial'>My Tutorial</button></pre> |
| 52 | + |
| 53 | +##Step Types## |
| 54 | + |
| 55 | +####waitForClick#### |
| 56 | + |
| 57 | +The `waitForClick` step type tells the tutorial to wait for one of the specified targets to be clicked. |
| 58 | + |
| 59 | +Properties |
| 60 | + |
| 61 | +- `selectors` One or more [css selectors](http://www.w3schools.com/cssref/css_selectors.asp) to target (Array) |
| 62 | +- `tooltips` Tooltips to show for the corresponding `selector` (Array) |
| 63 | + - Tooltip properties: |
| 64 | + - `text` Text to display in the tooltip (String) |
| 65 | + - `placement` One of top, right, bottom or left (String) |
| 66 | + |
| 67 | +####waitForNavigate##### |
| 68 | + |
| 69 | +The `waitForNavigate` step type tells the tutorial to wait for a change to `$location.path()`. |
| 70 | + |
| 71 | +Properties |
| 72 | + |
| 73 | +- `path` The value `$location.path()` must be set to to continue (String, required) |
| 74 | +- `selectors` One or more [css selectors](http://www.w3schools.com/cssref/css_selectors.asp) to target (Array) |
| 75 | +- `tooltips` Tooltips to show for the corresponding `selector` (Array) |
| 76 | + - Tooltip properties: |
| 77 | + - `text` Text to display in the tooltip (String) |
| 78 | + - `placement` One of top, right, bottom or left (String) |
| 79 | + |
| 80 | +####showMessage#### |
| 81 | + |
| 82 | +The `showMessage` step type tells the tutorial to show a message using [ui-bootstrap](http://angular-ui.github.io/bootstrap/)'s `$modal` service |
| 83 | + |
| 84 | +Properties |
| 85 | + |
| 86 | +- `message` The message to display (String/Object, required) |
| 87 | + If the message is an Object, the following properties are supported |
| 88 | + - `message` Text to display in the tooltip (String, required) |
| 89 | + - `buttonText` Text for the confirm button (defaults to "Continue") (String) |
| 90 | + - `header` Text for the moda's header (no header will be displayed if unspecified) (String) |
| 91 | + |
| 92 | +####delay#### |
| 93 | + |
| 94 | +The `delay` step type tells the tutorial to wait before proceeding. |
| 95 | + |
| 96 | +Properties |
| 97 | + |
| 98 | +- `delay` The delay in milliseconds to wait (String/Object, required) |
0 commit comments