试用MobileAngularUI

2 年 ago

雅, 悟

4 minutes

在引入Mobile Angular UI时，只需要阅读文档就可以了，但是如果直接阅读并验证，会发现有很多需要注意的地方要与Demo进行比较。我认为Mobile Angular UI本身是非常棒的，所以我打算在目前为止了解的范围内记下需要注意的地方。

安装

$ bower install --save mobile-angular-ui

使用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版本，但是由于在安装bower时失败，所以我认为升级到最新版本是更好的选择。

如果未安装Node，请参考以下内容。

nodebrewのインストール

请参考Sinmetal的文章，了解使用nodebrew来管理node.js版本的方法。（即使进行搜索也会排在前面）

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

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

请在确认了全部内容之后，执行安装命令，在其中创建一个名为”bower_components”的目录，并确认其中已经创建了所需的文件。

用”复制粘贴”的方式创建示例代码。

在阅读文档的同时尝试通过复制粘贴来推进的源代码如下所示。布局为左侧边栏和上下导航栏。


<!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>

迷住点

以下几点在演示的源代码中没有写明（但是不知怎么地却能正常运行…），如果不在Chrome的开发者工具中确认，是无法知道的。如果自己创建的话，必须要确认，不然会遇到问题。

如果有导航栏，则需要将class=”has-navbar-top”和class=”has-navbar-bottom”添加到内容下方，否则内容将被隐藏在导航栏下方。

请确保加载mobile-angular-ui-desktop.min.css文件，否则无法在桌面上运行，而仅限于移动设备，并且无法实现根据屏幕大小自动调整布局。

请在angular.module中注册mobile-angular-ui。

以下是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: ‘/’
});
}]);

我认为这样就不会有基本布局相关的困扰了。

非常感谢您的帮助。

声音魔术师先生