├── .gitignore ├── images ├── nacho-libre.jpg └── nacho-thanks.jpg ├── README.md ├── app.js ├── index.html ├── app.css └── partials └── wizard.html /.gitignore: -------------------------------------------------------------------------------- 1 | /.idea -------------------------------------------------------------------------------- /images/nacho-libre.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/simpulton/angularjs-wizard/HEAD/images/nacho-libre.jpg -------------------------------------------------------------------------------- /images/nacho-thanks.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/simpulton/angularjs-wizard/HEAD/images/nacho-thanks.jpg -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | angularjs-wizard 2 | ================ 3 | 4 | An AngularJS wizard using the ng-animate directive. 5 | 6 | ## Resources 7 | The companion tutorial for this code is here http://onehungrymind.com/ng-animate-first-look-with-angularjs-wizard/ 8 | For more information on AngularJS please check out http://angularjs.org/ 9 | Great writeup on ng-animate, http://www.yearofmoo.com/2013/04/animation-in-angularjs.html 10 | -------------------------------------------------------------------------------- /app.js: -------------------------------------------------------------------------------- 1 | angular.module('App', ['ngAnimate', 'ui.bootstrap']) 2 | .controller('AppCtrl', function ($modal) { 3 | var app = this; 4 | 5 | app.closeAlert = function () { 6 | app.reason = null; 7 | }; 8 | 9 | app.open = function () { 10 | var modalInstance = $modal.open({ 11 | templateUrl: 'partials/wizard.html', 12 | controller: 'ModalCtrl', 13 | controllerAs: 'modal' 14 | }); 15 | 16 | modalInstance.result 17 | .then(function (data) { 18 | app.closeAlert(); 19 | app.summary = data; 20 | }, function (reason) { 21 | app.reason = reason; 22 | }); 23 | }; 24 | }) 25 | .controller('ModalCtrl', function ($modalInstance) { 26 | var modal = this; 27 | 28 | modal.steps = ['one', 'two', 'three']; 29 | modal.step = 0; 30 | modal.wizard = {tacos: 2}; 31 | 32 | modal.isFirstStep = function () { 33 | return modal.step === 0; 34 | }; 35 | 36 | modal.isLastStep = function () { 37 | return modal.step === (modal.steps.length - 1); 38 | }; 39 | 40 | modal.isCurrentStep = function (step) { 41 | return modal.step === step; 42 | }; 43 | 44 | modal.setCurrentStep = function (step) { 45 | modal.step = step; 46 | }; 47 | 48 | modal.getCurrentStep = function () { 49 | return modal.steps[modal.step]; 50 | }; 51 | 52 | modal.getNextLabel = function () { 53 | return (modal.isLastStep()) ? 'Submit' : 'Next'; 54 | }; 55 | 56 | modal.handlePrevious = function () { 57 | modal.step -= (modal.isFirstStep()) ? 0 : 1; 58 | }; 59 | 60 | modal.handleNext = function () { 61 | if (modal.isLastStep()) { 62 | $modalInstance.close(modal.wizard); 63 | } else { 64 | modal.step += 1; 65 | } 66 | }; 67 | 68 | modal.dismiss = function(reason) { 69 | $modalInstance.dismiss(reason); 70 | }; 71 | }); 72 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | AngularJS Taco Party 5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 |
13 |

Launch the AngularJS Wizard

14 | 15 |
16 | Naaaaaaaaaaacho Libre! 17 |
18 | 21 |
22 | {{app.reason}} 23 |
24 |
25 |
26 |

Summary for {{app.summary.firstName}} {{app.summary.lastName}}

27 | 28 |

Coming: {{app.summary.coming}}

29 | 30 |

Tacos: {{app.summary.tacos}}

31 | 32 |

Toppings:

33 | 34 |
{{topping}} 35 |
36 |
37 |
38 |
39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | -------------------------------------------------------------------------------- /app.css: -------------------------------------------------------------------------------- 1 | body { 2 | padding-top: 40px; 3 | padding-bottom: 40px; 4 | background-color: #f5f5f5; 5 | } 6 | 7 | .modal { 8 | background-color: rgba(0,0,0,0.8); 9 | } 10 | 11 | .alert { 12 | margin-top: 10px; 13 | white-space: nowrap; 14 | } 15 | .alert-container { 16 | -webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s; 17 | transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s; 18 | } 19 | 20 | .form-signin { 21 | max-width: 360px; 22 | padding: 19px 29px 29px; 23 | margin: 0 auto 20px; 24 | background-color: #fff; 25 | border: 1px solid #e5e5e5; 26 | -webkit-border-radius: 5px; 27 | -moz-border-radius: 5px; 28 | border-radius: 5px; 29 | -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.05); 30 | -moz-box-shadow: 0 1px 2px rgba(0,0,0,.05); 31 | box-shadow: 0 1px 2px rgba(0,0,0,.05); 32 | } 33 | 34 | .form-signin .thumbnail { 35 | margin-bottom: 10px; 36 | } 37 | 38 | .modal-body .btn-group { 39 | margin-bottom: 10px; 40 | } 41 | 42 | .slide-frame { 43 | position:relative; 44 | height:200px; 45 | overflow:hidden; 46 | } 47 | 48 | .slide-frame > div { 49 | width:100%; 50 | } 51 | 52 | input[type=text], select { 53 | width: 50% !important; 54 | } 55 | 56 | /* alert animations */ 57 | 58 | .alert.ng-enter, .alert.ng-leave { 59 | -webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s; 60 | transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s; 61 | } 62 | .alert.ng-enter { 63 | opacity: 0; 64 | max-width: 0; 65 | max-height: 0; 66 | padding: 0; 67 | border-width: 0; 68 | margin: 0; 69 | } 70 | 71 | .alert.ng-enter-active { 72 | opacity: 1; 73 | max-width: 100%; 74 | max-height: 100px; 75 | padding: 15px 35px 15px 15px; 76 | border-width: 1px; 77 | margin: 10px 0 20px; 78 | } 79 | 80 | .alert.ng-leave { 81 | opacity: 1; 82 | max-width: 100%; 83 | max-height: 100px; 84 | padding: 15px 35px 15px 15px; 85 | border-width: 1px; 86 | margin: 10px 0 20px; 87 | } 88 | 89 | .alert.ng-leave-active { 90 | opacity: 0; 91 | max-width: 0; 92 | max-height: 0; 93 | padding: 0; 94 | border-width: 0; 95 | margin:0; 96 | } 97 | 98 | /* modal and step animations */ 99 | .wave.ng-enter, .wave.ng-leave { 100 | -webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s; 101 | transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s; 102 | } 103 | 104 | .wave.ng-enter { 105 | position: absolute; 106 | left:-100%; 107 | } 108 | 109 | .wave.ng-enter-active { 110 | left:0; 111 | } 112 | 113 | .wave.ng-leave { 114 | position: absolute; 115 | left:0; 116 | } 117 | 118 | .wave.ng-leave-active { 119 | left:100%; 120 | } -------------------------------------------------------------------------------- /partials/wizard.html: -------------------------------------------------------------------------------- 1 |
2 | 3 |

Taco Party!!!!!

4 |
5 |
6 |
7 |
8 | 9 | 10 | 11 |
12 |
13 |
14 |
15 |
16 | 17 | 18 |
19 | 20 |
21 |
22 |
23 | 24 | 25 |
26 | 27 |
28 |
29 |
30 |
31 | 35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 | 43 | 44 |
45 | 52 |
53 |
54 |
55 | 56 | 57 |
58 | 65 |
66 |
67 |
68 |
69 |
70 |
71 |
72 |

Thanks {{modal.wizard.firstName}} {{modal.wizard.lastName}}!

73 | 74 |
75 |
76 | Thanks! 77 |
78 |
79 |

Coming: {{modal.wizard.coming}}

80 | 81 |

Tacos: {{modal.wizard.tacos}}

82 | 83 |

Toppings:

84 | 85 |
{{topping}} 86 |
87 |
88 |
89 |
90 |
91 |
92 |
93 |
94 |
95 |
96 | Back 97 | {{modal.getNextLabel()}} 98 |
99 | 100 | --------------------------------------------------------------------------------