最近做一个微信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. A*寻路算法入门(一)

    大熊猫猪·侯佩原创或翻译作品.欢迎转载,转载请注明出处. 如果觉得写的不好请告诉我,如果觉得不错请多多支持点赞.谢谢! hopy ;) 免责申明:本博客提供的所有翻译文章原稿均来自互联网,仅供学习交流 ...

  2. RabbitMQ消息队列的小伙伴: ProtoBuf（Google Protocol Buffer）

    什么是ProtoBuf? 一种轻便高效的结构化数据存储格式,可以用于结构化数据串行化,或者说序列化.它很适合做数据存储或 RPC 数据交换格式.可用于通讯协议.数据存储等领域的语言无关.平台无关.可扩 ...

  3. Framework启动过程浅析

    浅显的总结一下Framework启动大概过程 总体 Android底层是linux系统,因而在开机时仍然是运行天字第一号进程inti,读取init.rc来创建第一个Dalvik进程zygote,下面是 ...

  4. 【一天一道LeetCode】#88. Merge Sorted Array

    一天一道LeetCode 本系列文章已全部上传至我的github,地址:ZeeCoder's Github 欢迎大家关注我的新浪微博,我的新浪微博 欢迎转载,转载请注明出处 (一)题目 Given t ...

  5. 获取request参数的工具类

    package cn.edu.hactcm.util; import java.io.File; import java.io.FileOutputStream; import java.io.IOE ...

  6. hive语句嵌入python脚本（进行map和reduce，实现左外连接）

    在Hive语句中使用脚本(如python和shell)进行map和reduce:利用命令transform(或者指定map和reduce),配合加入的脚本文件add file 请看:http://ww ...

  7. 【翻译】使用Sencha Touch开发Google Glass应用程序

    原文:Developing for Google Glass with Sencha Touch 作者:Ross Gerbasi Ross Gerbasi is a Senior Engineer a ...

  8. PDA(Windows Mobile)调用远程WebService

    之前用模拟器测试过调用远程的WebService,发现总是提示"无法连接到远程服务器"的错误,不管是Windows Mobile6.0 还是6.5都是一样,按照网上的办法,改注册表 ...

  9. vi/vim下看十六进制文件

    :%!xxd --将当前文本转换为16进制格式. 查看内容是对应的.你可以后面看到对应的字符内容 :%!od --将当前文本转换为16进制格式. :%!xxd -c 12--将当前文本转换为16进制格 ...

  10. LeetCode之“动态规划”：House Robber && House Robber II

    House Robber题目链接 House Robber II题目链接 1. House Robber 题目要求: You are a professional robber planning to ...