最近做一个微信App形式的业务平台,之前从别人的推荐文中知道了mobile angualar ui这个东西，这次纯做mobile Web就试用了一下，之前PCWeb中用过AngularJS，HybridApp中用过ionic，这次做这个mobile web也想过ionic，不过ionic的文档明示，ionic只面向iOS和Android，在浏览器环境上支持有限，最后就用了这个Mobile Angular UI，Mobile Angular UI的基础HTML模板是：

<body ng-app="myApp">  

  <!-- Sidebars -->

  <div class="sidebar sidebar-left"><!-- ... --></div>

  <div class="sidebar sidebar-right"><!-- ... --></div>  

  <div class="app">

    <div class="navbar navbar-app navbar-absolute-top"><!-- Top Navbar --></div>

    <div class="navbar navbar-app navbar-absolute-bottom"><!-- Bottom Navbar --></div>  

    <!-- App body -->  

    <div class='app-body'>

      <div class='app-content'>

        <ng-view></ng-view>

      </div>

    </div>

  </div><!-- ~ .app -->  

  <!-- Modals and Overlays -->

  <div ui-yield-to="modals"></div>  

</body>

这个模板包括了左滑动菜单、右滑动菜单、顶部和底部导航菜单，中间的的子View和下部Modal界面，基本包含MobileWeb的主要设计方式。

Mobile Angular UI里面的SharedState及其相关的ui-*命令虽然可以和ng的控制器和$scope相互交互，但是除了SharedState包装成AngularJS服务，其本质上不是基于angularjs的那种控制器模块模式构建的，官方文档中说的很明白:

SharedState acts as a BUS between UI elements to share UI related state that is automatically disposed when all scopes requiring it are destroyed. 
Data structures retaining statuses will stay outside angular scopes thus they are not evaluated against digest cycle until its necessary.
Also although statuses are sort of global variables SharedState will take care of disposing them when no scopes are requiring them anymore. 
Any SharedState method is exposed through Ui object in $rootScope. 
      从文档可见：SharedState保管的变量是全局的，不想$scope中的变量有其控制器作用域，当然也可以通过SharedState在$scope和state 变量之间建立引用关系。不过一般通过Ui对象来对state变量做操作。

Mobile Angular UI最大的新意也就这个SharedState及其相关的ui-*命令了，不过官网文档认真看一遍，也就got it了，Mobile Angular UI目前提供的UI组件相对来讲还是比较基本的，当然官网也推荐了Topcoat CSS框架作为补充使用，不过Mobile Angular UI目前提供的设施来构建各种交互组件还是很方便的，再就是MobileWeb目前的设计方式都是一个section一个section的简单布局和简单交互，所以Mobile Angular UI还是足够可用了。

mobile angualar ui的简单使用的更多相关文章

  1. jquery mobile扁平化设计样式--Jquery mobile Flat UI介绍

    jquery mobile扁平化设计样式--Jquery mobile Flat UI介绍 这几天开发的web app使用了jquery mobile,jquery mobile自带的样式比较适合做企 ...

  2. WeX5的简单介绍及UI的简单讲解

    WeX5的简单介绍及UI的简单讲解 (2016-01-13 14:49:05) 标签: it 分类: WeX5的初步自学 一.WeX5的简单讲解 1.WeX5是前端快速开发框架,可开发跨端运行应用.是 ...

  3. iOS开发UI篇—简单的浏览器查看程序

    iOS开发UI篇—简单的浏览器查看程序 一.程序实现要求 1.要求 2. 界面分析 (1) 需要读取或修改属性的控件需要设置属性 序号标签 图片 图片描述 左边按钮 右边按钮 (2) 需要监听响应事件 ...

  4. iOS开发UI篇—简单介绍静态单元格的使用

    iOS开发UI篇—简单介绍静态单元格的使用 一.实现效果与说明 说明:观察上面的展示效果,可以发现整个界面是由一个tableview来展示的,上面的数据都是固定的,且几乎不会改变. 要完成上面的效果, ...

  5. 微信小程序初探【类微信UI聊天简单实现】

    微信小程序最近很火,火到什么程度,只要你一打开微信,就是它的身影,几乎你用的各个APP都可以在微信中找到它的复制版,另外官方自带的跳一跳更是将它推到了空前至高的位置.对比公众号,就我的感觉来说,有以下 ...

  6. [mobile angular ui 1.2]桌面环境下如何自动隐藏左侧的sidebar？how to hide left sidebar on desktop browser by default?

    使用mobile angular ui 1.2开发,在默认情况下,桌面浏览器中sidebar-left是默认打开的,怎么才能在程序初始打开时关闭sidebar-left呢? 目前我找到的唯一可行办法就 ...

  7. react UI交互 简单实例

    <body><!-- React 真实 DOM 将会插入到这里 --><div id="example"></div> <!- ...

  8. twrp 2.7.0 ui.xml简单分析，布局讲解，第一章

    twrp 的ui.xml文件在bootable/recovery/gui/devices/$(DEVICE_RESOLUTION)/res目录里面 下面我主要分析的是720x1280分辨率的界面布局及 ...

  9. Android开发学习之路--UI之简单聊天界面

    学了很多的ui的知识,这里就来实现个聊天的界面,首先来实现个layout的xml,代码如下: <?xml version="1.0" encoding="utf-8 ...

随机推荐

  1. 用 Freemarker 生成 word 文档

     阅读目录 添加图片 自定义载入模板 1.       用word写一个需要导出的word模板,然后存为xml格式. 2.       将xml中需要动态修改内容的地方,换成freemarker的 ...

  2. String之常量池小结

    1.String 常量池 String使用private final char value[ ]实现字符串的存储,也就是说String创建对象之后不能够再次修改此对象中存储的字符串内容,因而Strin ...

  3. UNIX环境高级编程——时间和日期

    由UNIX内核提供的基本时间服务是计算自国际标准时间公元1970年1月1日00:00:00以来经过的秒数.这种秒数是以数据类型time_t表示. 1.     time函数返回当前时间和日期: tim ...

  4. Linux Debugging（三）: C++函数调用的参数传递方法总结（通过gdb+反汇编）

    上一篇文章<Linux Debugging:使用反汇编理解C++程序函数调用栈>没想到能得到那么多人的喜爱,因为那篇文章是以32位的C++普通函数(非类成员函数)为例子写的,因此只是一个特 ...

  5. 看到个有趣的方法批量下载rtf模板

    一般想要批量下载rtf模板我们都是用fndload来实现或者 perl download.pl来实现,今天看到一个比较有趣的方法 Hi, Blob column 'template file data ...

  6. 软考之路--J2SE，从HelloWorld到传世代码

    "Hello World"程序指的是只在计算机屏幕上输出"Hello, World!"(意为"世界,你好!")这行字符串的计算机程序.hel ...

  7. 20_Android中apk安装器，通过WebView来load进一个页面,Android通知，程序退出自动杀死进程，通过输入包名的方式杀死进程

     场景:实现安装一个apk应用程序的过程.界面如下: 编写如下应用,应用结构如下: <RelativeLayout   编写activity_main.xml布局: <Relative ...

  8. PO订单审批通过API

    DECLARE l_return_status VARCHAR2(1); l_exception_msg VARCHAR2(4000); BEGIN mo_global.set_policy_cont ...

  9. LeetCode之“链表”：在O(1)时间删除链表节点

    下边讨论暂不包括尾节点. 一般来说,我们要删除链表中的一个节点是需要知道其上一节点的.但我们真的需要吗? 其实我们可以将待删节点的下一节点的值和指向的下一节点赋予待删节点,然后删除待删节点的下一节点. ...

  10. LeetCode之“链表”：Reverse Linked List && Reverse Linked List II

    1. Reverse Linked List 题目链接 题目要求: Reverse a singly linked list. Hint: A linked list can be reversed ...