最近做一个微信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. 手机广告投放（phone advertising）唯一标识

    手机标示,为了识别用户,方面advertising. 使用设备id,相当于暴露用户隐私.慢慢已不允许使用.. (长时间跟踪用户无异于暴露用户隐私,虽然大量数据适合兴趣建模,广告个性化推荐.但复杂多样会 ...

  2. C语言实现万年历

    给出你想知道的年份,便可以计算出该年对应的每个月每个日所对应的星期数,是不是感觉很好玩 ? #include <stdio.h> #include<stdlib.h> long ...

  3. 在mysql数据库中创建oracle scott用户的四个表及插入初始化数据

    在mysql数据库中创建oracle scott用户的四个表及插入初始化数据 /* 功能:创建 scott 数据库中的 dept 表 */ create table dept( deptno int ...

  4. 【Android 应用开发】Android 平台 HTTP网速测试 案例 API 分析

    作者 : 万境绝尘 转载请注明出处 : http://blog.csdn.net/shulianghan/article/details/25996817 工信部规定的网速测试标准 : 除普通网页测速 ...

  5. Get/POST方法提交的长度限制

     1.    Get方法长度限制 Http Get方法提交的数据大小长度并没有限制,HTTP协议规范没有对URL长度进行限制.这个限制是特定的浏览器及服务器对它的限制. 如:IE对URL长度的限制 ...

  6. STL - string（典型操作demo）

    1String概念  string是STL的字符串类型,通常用来表示字符串.而在使用string之前,字符串通常是用char*表示的.string与char*都可以用来表示字符串,那么二者有什么区别呢 ...

  7. tomcat整合apache

    历时4个多小时,终于把tomcat与apache整合起来了. 中间出了各种各样的问题,现记录一下,也希望能对后来者有点帮助. 背景 apache与tomcat的区别联系大家都知道: tomcat能处理 ...

  8. mysql进阶(十七)Cannot Connect to Database Server

    Cannot Connect to Database Server 缘由 由于不同的项目中使用的数据库用户名与密码出现了不一致的情况,在其中之前较早一个项目执行过程中出现"The user  ...

  9. Java-instanceof总结

    纸上得来终觉浅,绝知此事要躬行  --陆游    问渠那得清如许,为有源头活水来  --朱熹 instanceof其实是Java的一个二元操作符,用于判断左边的对象是否是右边这个特定的类或者它的子类的 ...

  10. Linux 删除目录与文件

    Linux 删除目录与文件 在当前目录下查找所有.svn的目录 $ find . -type d -name ".svn" 删除当前目录下所有.svn的目录 $ find . -t ...