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 をインストールしてください。

Homebrewでインストールする場合の例
$ 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。

将 Mobile Angular UI 集成到 AngularJS 中。

在 app.js 中添加 mobile-angular-ui。

暂时在这里测试一下。

启动本地服务器。

$ grunt serve

只要显示如下，就表示 AngularJS 的运行确认是OK的。

下一步，让我们展示Mobile Angular UI的示例。

这里有一个可以实际操作的样例（GitHub Pages）。

想法或印象

由于目前提供的功能还比较有限，所以现阶段使用 Twitter BootStrap 等自己编写可能更快。
而且，如果要使用 CSS 框架，我认为移动端的 CSS 框架如 ionic 或 Onsen UI 目前功能更丰富。

除此之外

• 今回のソースは GitHub に置いておきます⇒https://github.com/hkusu/AngularJS_mobileUI_demo

ionic と Onsen UI の導入方法については、以前に書いたので宜しければ参考にしてください。

ionic（AngularJSベース）のアプリケーション開発環境を構築（Qiita）

onsen ui（AngularJSベース）のアプリケーション開発環境を構築（Qiita）