mobile angualar ui的简单使用
来源:互联网 发布:四大网络交流平台 编辑:程序博客网 时间:2024/06/02 03:51
<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);"> 最近做一个微信App形式的业务平台,之前从别人的推荐文中知道了mobile angualar ui这个东西,这次纯做mobile Web就试用了一下,之前PCWeb中用过AngularJS,HybridApp中用过ionic,这次做这个mobile web也想过ionic,不过ionic的文档明示,ionic只面向iOS和Android,在浏览器环境上支持有限,最后就用了这个Mobile Angular UI,Mobile Angular UI的基础HTML模板是:</span>
<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还是足够可用了。
0 0
- mobile angualar ui的简单使用
- jQuery Mobile的简单使用
- JQuery UI的简单使用
- JQuery UI的简单使用
- angualar.js指令与控制器间的通信(@、=、&)以及在指令内部使用$watch监听参数变化
- 使用Theos做一个简单的Mobile Substrate Tweak
- 使用Theos做一个简单的Mobile Substrate Tweak
- CocoStudio UI编辑器的简单使用
- UI控件-UIView的简单使用
- iOS UI篇 xib的简单使用
- UI基础---ScrollView的简单使用
- 使用 CasperJS 进行简单的 UI 测试
- Jquery UI 中的dialog的简单使用
- AngularJS ui-sref的简单使用
- UI -- 协议传值(简单的使用)
- Jquery Mobile UI之列表的学习
- jQuery Mobile 和 Kendo UI 的比较
- SOAP UI 简单使用
- 字符串反转
- uva 1001 dijkstra
- noip2010 数字统计 (统计某一数字区间中,2出现的次数)
- smali代码初识
- hdu3635
- mobile angualar ui的简单使用
- linux下的各种函数库略读(POSIX C和ANSI C、GNU C以及ISO C、glib、libc、glibc)
- 数据库JDBC的连接
- 操作系统的中断与异常(陷阱)
- 数组存储字符串
- 自学QT之键盘事件
- 32位的VS通过odbc数据源访问64位Oracle
- test7.17
- 操作Excel工具类(基于Apache的POI类库)