最近做一个微信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. 【一天一道LeetCode】#96. Unique Binary Search Trees

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

  2. Libgdx 1.6.1发布，跨平台游戏开发框架

    Libgdx 1.6.1发布 [1.6.1] 英文原文:http://www.badlogicgames.com/wordpress/?p=3694 译文翻译:宋志辉 - Net.newServerS ...

  3. C++ Primer 有感（标准库set类型）

    set容器只是单纯的键的集合,键必须为一.set容器不支持下标操作,而且没有定义maped_type类型.在set容器中,value_type不是pair类型,而是与key_type类型相同的类型. ...

  4. FSG报表打印报错，log文件显示java.sql.SQLException: No corresponding LOB data found

    报错信息: +---------------------------------------------------------------------------+ Plsql 程序的日志信息开始 ...

  5. lua c函数注册器

    lua与c的交互 关于lua和c的交互,主要有两个方面,一是lua调用c的函数,而另一个则是c调用lua函数.而这些都是通过lua stack来进行的. c调用lua 在c里面使用lua,主要是通过l ...

  6. Windows200864位操作系统下的SQLPLUS.EXE 无法找到入口解决办法和Oracle环境变量的设置

    本机环境:Windows2008 64位中文版操作系统+Oracle11G+安装了Oracle32位和64位客户端驱动 问题起源:Path环境变量被360安全卫士优化修复后,整个给清空了,hosts文 ...

  7. mysql 备份和恢复的两条命令

    压缩备份: 1.mysqldump -h localhost -u root -p dbname | gzip > dbname.sql.gz 压缩恢复: 1.gunzip < dbnam ...

  8. Leetcode_48_Rotate Image

    本文是在学习中的总结,欢迎转载但请注明出处:http://blog.csdn.net/pistolove/article/details/44216867 You are given an n x n ...

  9. rhel6.4 安装nodejs和Mysql DB服务

    rhel6.4 安装nodejs和Mysql DB服务 安装好redhat6.4虚拟机后, 安装软件: # yum install gcc-c++ openssl-devel Loaded plugi ...

  10. Material Design5.x动画实现解析篇一

    Material Design设计语言动画篇共推出六种类型的动画效果: 1.Touch feedback(触摸反馈) 2.Reveal effect(揭露效果) 3.Activity transiti ...