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

Pocket

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

こんな画面が作れます

Angular-wizard

よくある画面なんですが、コーディングは若干面倒くさかったりします。こんなのがサクッと作れるのです。

使い方

ライブラリの準備

  • bowerを使っているならbower.jsonにangular-wizardと、underscore(またはlodash)を追加します。
  • 直接ファイルを追加するならここからダウンロードして追加します。

underscore.js(またはlodash.js)が依存ライブラリになっているので、忘れず読み込むようにしておきましょう。

モジュールに追加

モジュールにmgo-angular-wizardを追加します。

CSSを設定

bowerで導入した場合はbowerのディレクトリ内にあるCSSを読み込んでおきましょう。

(直接ファイルを追加した場合は、angular-wizard.cssを配置した場所へのパスを書きます)

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

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

127_0_0_1_9000___

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

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

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

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