AngularJSアプリケーションにチュートリアルを簡単に導入する
Intro.jsをAngularJSのDirectiveにしたAngular Intro.jsを利用して、簡単にチュートリアルを実現する方法を試してみました。
-
こんなのできました ⇒ http://hkusu.github.io/AngularJS_intro_demo
導入手順
- 開発環境 は Mac OS X (Mavericks)とします。
- 今回は Yeoman の generator-angular で作成した雛型アプリケーションが既にある前提で、Bowerで angular-intro.js を追加する手順を説明します。
- 雛型アプリケーションを用意する方法については、前に投稿したこのあたりを参考にしてください。
Bower で angular-intro.js をインストール
-
一応、
bower searchで確認$ bower search intro
-
この中の
angular-intoro.jsをインストール$ bower install angular-intro.js --save
-
すると
intor.jsとangular-intro.jsがインストールされます。
index.htmlから読み込む
-
CSSファイルの読み込み
-
JavaScriptファイルの読み込み
※もしくはGruntで $grunt bower-install とすると自動で index.html に記載が追加されます。
AngularJSに組み込む
-
app.jsを編集します。
チュートリアルの設定をする（Controller側）
- 公式のサンプルを元に、チュートリアルを仕込みたいページのコントローラに設定を書きます。
-
今回は AngularJS雛型環境のTOPページである
scripts/controllers/main.jsに書いてみます（ほぼ公式のコピペ）。
チュートリアルの設定をする（View側）
-
TOPページである
views/main.htmlに書きます。 -
この例だと、ページ表示時に自動でチュートリアルを表示（
ng-intro-autostart="true"）するようにしています。任意のタイミングへ変更したい場合はここをfalseにして、実行したいタイミングで View か Controller からCallMe()メソッドをコールすればOKです。 -
チュートリアル時にフォーカスしたいHTML要素に、
id="step1"〜 を指定していきます。例えば、 -
以上で完了です。
$grunt serveして動作を確認してみます。
注意
- CSSフレームワークを利用している、またははCSSの組み方によっては、フォーカスがずれてしまうようです。
ほか
- 今回のソースはこちら（GitHub）に置いておきます。
- 自分の作ったアプリケーションにも導入してみました。
- http://hkusu.github.io/gp-kao-catalog/
- [つかいかた]リンクを押してみてください。
- ただ上にも書いたとおりCSSフレームワークの影響かフォーカスがずれてしまうので、それとなくごまかしてます^^;
- http://hkusu.github.io/gp-kao-catalog/
