AngularJSで簡単なウィザード画面を作るならangular-wizardが便利

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

こんな画面が作れます

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を配置した場所へのパスを書きます)

wizardstepディレクティブでビューを書く


    
        

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!!

するとこんな画面が表示されます

127_0_0_1_9000___

下部のプログレスバーはちょっとスタイルが使いづらい気がするので、実際使うときは自前でスタイルを組む方が良い気がします。

コントローラから操作する場合はこんな感じに書きます

WizardHandlerをインジェクションすることでウィザードにアクセスすることができます。

angular.module('app')
.controller('SampleController', function($scope, WizardHandler) {
  $scope.backToFirst = function() {
    WizardHandler.wizard().goTo(0);
  };
});

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