−ゆめログ− | ゆめみスタッフブログ

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 して動作を確認してみます。

  • デモ ⇒ http://hkusu.github.io/AngularJS_intro_demo

注意

• CSSフレームワークを利用している、またははCSSの組み方によっては、フォーカスがずれてしまうようです。

ほか

• 今回のソースはこちら（GitHub）に置いておきます。
  • https://github.com/hkusu/AngularJS_intro_demo
• 自分の作ったアプリケーションにも導入してみました。
  • http://hkusu.github.io/gp-kao-catalog/
    • [つかいかた]リンクを押してみてください。
  • ただ上にも書いたとおりCSSフレームワークの影響かフォーカスがずれてしまうので、それとなくごまかしてます^^;