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);
  };
});

ソースも簡単なので、ディレクティブはこんな風に書くんだなーと参考になりました。