angular-wizardを使えばサクッとウィザード画面が作れます。
目次
こんな画面が作れます

よくある画面なんですが、コーディングは若干面倒くさかったりします。こんなのがサクッと作れるのです。
使い方
ライブラリの準備
- bowerを使っているならbower.jsonに
angular-wizard
と、underscore
(またはlodash
)を追加します。 - 直接ファイルを追加するならここからダウンロードして追加します。
underscore.js
(またはlodash.js
)が依存ライブラリになっているので、忘れず読み込むようにしておきましょう。
モジュールに追加
モジュールにmgo-angular-wizard
を追加します。
angular.module('app', [ 'ngCookies', 'ngResource', 'ngSanitize', 'ngRoute', 'mgo-angular-wizard' // <-これ ])
CSSを設定
bowerで導入した場合はbowerのディレクトリ内にあるCSSを読み込んでおきましょう。
(直接ファイルを追加した場合は、angular-wizard.css
を配置した場所へのパスを書きます)
wizard
、step
ディレクティブでビューを書く
This is the first step
Here you can use whatever you want. You can use other directives, binding, etc.
Continuing
You have continued here!
Even more steps!!
するとこんな画面が表示されます

下部のプログレスバーはちょっとスタイルが使いづらい気がするので、実際使うときは自前でスタイルを組む方が良い気がします。
コントローラから操作する場合はこんな感じに書きます
WizardHandler
をインジェクションすることでウィザードにアクセスすることができます。
angular.module('app')
.controller('SampleController', function($scope, WizardHandler) {
$scope.backToFirst = function() {
WizardHandler.wizard().goTo(0);
};
});
ソースも簡単なので、ディレクティブはこんな風に書くんだなーと参考になりました。