
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/