Mobile Angular UIを導入する時は、ドキュメントを読めば良いのですが、そのまま読み進めて検証するとDemoと比較しながら進めなければいけないぐらいにはハマリポイントがたくさんありました。Mobile Angular UI自体は素晴らしいものだと思いますので、現時点で分かっている範囲でハマりポイントをメモしておこうと思います。

インストール

$ bower install --save mobile-angular-ui

bowerを使ってインストールをするようですが、bowerはnode.jsが入ってないと使えないようなので、node.jsのバージョンも確認しておいた方が良いです。
それから、node.jsをインストールするには、nodebrewを使うことをおすすめしますので、環境の確認が必要です。

環境の確認

MobileAngularUIをインストールするはずが、違うものをインストールする羽目になるので、自分が何をしているのかわからなくなるかもしれませんが、大丈夫です。よくあることらしいです。

bowerのバージョン確認

$ bower -v

すでにインストール済みの場合は、以降は必要ありません。

bowerのインストール

$ npm -g install bower

コマンドが失敗する場合は、以降を参照して下さい。

nodeのバージョン確認

$ node -v

現時点での最新バージョン0.11.13を使いました。v0.11.2が最初に入っていましたが、v0.11.2だとbowerのインストールで失敗したので最新バージョンに上げた方が良いと思います。

nodeもインストールされていない場合は、以下を参照して下さい。

nodebrewのインストール

sinmetalさんの記事、node.jsのversionを管理するためにnodebrewを利用するを参照して下さい。（検索しても上位にきます）

nodebrewを使ったnode.jsのインストール

$ nodebrew install v0.11.13
$ nodebrew use v0.11.13

ここまで全て確認した後、インストールのコマンドを実行すると、bower_componentsというディレクトリが作成され、中に必要なファイルが作られているのを確認して下さい。

サンプルコードを"コピペで"作る

ドキュメントを読みながらコピペで進めてみたソースコードが以下のものです。左のサイドバーと、ナビゲーションバーが上下にあるというレイアウトになっています。

index.html


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>mobile angular ui sample</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimal-ui" />
    <meta name="apple-mobile-web-app-status-bar-style" content="yes" />
    <link rel="stylesheet" href="../mobile-angular-ui/dist/css/mobile-angular-ui-hover.min.css" />
    <link rel="stylesheet" href="../mobile-angular-ui/dist/css/mobile-angular-ui-base.min.css" />
    <link rel="stylesheet" href="../mobile-angular-ui/dist/css/mobile-angular-ui-desktop.min.css" />
    <script src="angular.min.js">
    </script>
    <script src="angular-route.min.js">
    </script>
     <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular-touch.min.js"></script>
    <script src="../mobile-angular-ui/dist/js/mobile-angular-ui.min.js">
    </script>
    <script src="app.js"></script>
    <script src="controllers.js"></script>
</head>
<body ng-app="sampleApp" class="has-sidebar-left">
<!-- Sidebars -->

<div class="sidebar sidebar-left" toggleable parent-active-class="sidebar-left-in" id="mainSidebar">
   <h1 class="app-name">mobile angular ui sample</h1>

  <div class="scrollable">
    <div class="scrollable-content">
      <div class="list-group" toggle="off" bubble target="mainSidebar">
        <a class="list-group-item" href="#/">Home <i class="fa fa-chevron-right pull-right"></i></a>
        <a class="list-group-item" href="#/route1">Route1 <i class="fa fa-chevron-right pull-right"></i></a>
        <a class="list-group-item" href="#/route2">Route2 <i class="fa fa-chevron-right pull-right"></i></a>
        <!-- ... -->
      </div>

    </div>
  </div>
</div>

<div class="app has-navbar-top has-navbar-bottom">

  <!-- Navbars -->
  <div class="navbar navbar-app navbar-absolute-top">

      <div class="navbar-brand navbar-brand-center" yield-to="title">
        <span>mobile angular ui sample</span>
      </div>

      <div class="btn-group pull-left">
        <div ng-click="toggle('mainSidebar')" class="btn btn-navbar sidebar-toggle">
          <i class="fa fa-bars"></i> Menu
        </div>
      </div>

<!--       <div class="btn-group pull-right" yield-to="navbarAction">
        <div class="btn btn-navbar">
          <i class="fa fa-plus"></i> New
        </div>
      </div>
 -->  </div>

  <div class="navbar navbar-app navbar-absolute-bottom">
    <div class="btn-group justified">
      <a href="#/route1" class="btn btn-navbar btn-icon-only"><i class="fa fa-home fa-navbar"></i></a>
      <a href="#/route2" class="btn btn-navbar btn-icon-only"><i class="fa fa-list fa-navbar"></i></a>
    </div>
  </div>

  <div class="app-body">
      <ng-view class="app-content"></ng-view>
  </div>
</div>
</body>
</html>

ハマりポイント

以下の点はdemoのソースコードに書かれていなくて（でも、なぜかちゃんと動いている…）ChromeのDevToolで確認しないとわかりません。自分で作成する場合は確認しないとハマります。

左サイドバーがある場合は、class="has-sidebar-left"を入れないとサイドバーがapp-bodyの下に隠れてしまう。
ナビゲーションバーがある場合はclass="has-navbar-top"、class="has-navbar-bottomがないとナビゲーションバーの下にコンテンツが隠れてしまう。
mobile-angular-ui-desktop.min.cssを読み込むようにしておく。
1. これがないとデスクトップでも動かすという前提にならないので、モバイル限定になってしまって画面サイズに合わせてレイアウトが変わるという動きが実現できません。

mobile-angular-uiをangular.moduleで登録しておく

以下のようにjsのコードを記述します。

app.js

var sampleApp = angular.module('sampleApp', [
'ngRoute',
'mobile-angular-ui',
'sampleControllers'
]);
sampleApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/', {
    templateUrl: "home.html",
    controller: 'HomeCtrl'
}).
when('/route1', {
    templateUrl: 'route1.html',
    controller: 'Route1Ctrl'
}).
when('/route2', {
    templateUrl: 'route2.html',
    controller: 'Route2Ctrl'
}).
otherwise({
    redirectTo: '/'
});
}]);

これで基本的なレイアウト関連でハマることはないと思います。

ご協力ありがとうございました。

soundTrickerさん

MobileAngularUIを使ってみる

インストール

環境の確認

サンプルコードを"コピペで"作る

ハマりポイント

ご協力ありがとうございました。