Yeoman の AngularJSテンプレに Mobile Angular UI を組み込む

Mobile Angular UI はその名のとおり、AngularJS ベースの、モバイル向けUIフレームワークです。

> ライブラリの紹介ページ:http://mobileangularui.com/
> 使い方などのドキュメント:http://mobileangularui.com/docs/

こちらでデモが見れます。

> デモページ:http://mobileangularui.com/demo/

今回は Yeoman の AngularJS テンプレートに Mobile Angular UI を組み込んでみたので、その方法について書きます。

前提

  • 開発環境 は Mac OS X (Mavericks)とします。
  • Yeoman と Yeoman の generator-angular を使います。

    • もしまだ入ってなければ、次のようにセットアップしてください。

      $ npm install -g yo grunt-cli bower
      $ npm install -g generator-angular
      
    • 上記でもし npm コマンドがなければ、Homebrew か何かで Node.js をインストールしてください。

      $ brew install node
      

導入手順

① まず、Yeoman で AngularJS アプリケーションの雛型を作成します。

次のようににコマンドを実行。

$ yo angular --minsafe

次のように聞かれますが、

紹介ページをみると ngRoute は必要らしいので、それだけ残し、それ以外は競合すると面倒そうなので外しておきます。

雛型の生成が終わると、次のような構成になっているはずです。

② Bower で Mobile Angular UI をいれます。

$ bower install mobile-angular-ui --save

インストールが終わると、次のような構成になっているはずです。
(なんか Bootstrap や jQuery ほか追加されているけど、内部で使ってるのかな?)

③ index.html から Mibile Angular UI の CSS と JavaScript を読み込みます。

  • CSS

    • mobile-angular-ui-base.min.css を追加

  • JavaScript

    • mobile-angular-ui.min.js を追加

④ AngularJS に Mobile Angular UI を組み込みます。

app.jsmobile-angular-ui を追加。

⑤ いったん、ここで動作確認してみます。

ローカルサーバを起動します。

$ grunt serve

次のように表示されれば、とりあえず AngularJS の動作確認はOKです。

⑥ 次に、Mobile Angular UI のサンプルを表示してみます。

  • もともと app/styles/main.css に記載されている AngularJS テンプレートの内容は消して空にします。

  • AngularJS テンプレートでのメインページは app/views/main.html です。このファイルに Mobile Angular UI のライブラリに含まれているデモページのソースを張りつけてみます。

    • 今回は forms.html の中身を張りつけました。

  • 次のように表示されればOKです。

実際に動かせるサンプルはこちら (GitHub Pages)

感想

まだ提供されている機能が少ないので、いま時点では Twitter BootStrap 等を使って自分で書いた方が早いかも。
またどうせCSSフレームワークを使うなら、ionicOnsen UI のようなモバイル用CSSフレームワークの方が、いま時点では機能が豊富かと思います。

ほか


Comments are closed.