开始学习Angular Mobile UI

介绍

Mobile AngularUI 可以让你使用Twitter Booostrap和Angular JS来开发混合移动App和桌面应用程序.

下面是是一些贯穿整个项目的步骤,我强烈的建议你去继续阅读,然后去阅读详情 开始指导.

动过实例学习

Demo是一个学习Mobile Angular UI的一个很好的方式.

你可以从这里下载资源:https://github.com/mcasimir/mobile-angular-ui/tags.

打开下载好的文档浏览demo文件夹下面的文件

如果你很熟悉Angular,只需要查看index.html和demo.js就可以是是你准备好开发自己的应用

学习如何引入和引入的什么文件

Mobile Angular UI重新分配了部分Twitter Bootstrap里面的CSS.Bootstrap已经被扩充到友好的支持移动组件,并且通过这里将这些规则分割成了三部分:

• mobile-angular-ui-base.css: Mobile rules 
• mobile-angular-ui-hover.css: Hover rules
• mobile-angular-ui-desktop.css: Desktop rules

这样你就可以有目标的只引入你设备需要的文件

JS

Mobile Angular JS由三个基础的angular模块组成

• core: 任何一个手机和桌面应用程序都可以适用这些特性
• components: angular指令与服务支持外来组件.
• gestures: 致力于更容易的处理触碰事件.

core和components都是:mobile-angular-ui.js的一部分,然而gestures分布于一个分开的文件中:mobile-angular-ui.gestures.js

获取更多文件内容

主要概念

样式和组件

Mobile Angular UI与Twitter的Bootstrap紧密相关.

Mobile Angular UI实际上是抓取的bootstrap.css的资源并且简单操作从视觉和感觉上达到移动端友好的效果.他不仅保留了大部分的原始组件一遍可以关联他们文档中的基础样式和组件.

更多更新的关于bootstrap的基础组件

• Sidebars
• Navbars with Absolute positioning
• Overlays
• Scrollable Areas
• Switches

并且重写的boostrap是他对于angular更加的友好.

那些原来默认被隐藏的组件现在都默认展示,这使得他更加容易的与ng-if/ng-show/ng-hide一体化

所以当意识到这一点,Mobile Angular UI bootstrap组件更像是

• Modals
• Dropdowns

总是被呈现,除非你什么也不做.

阅读更多与boostrap3不同之处

布局

看一下demo/index.html将会向你完全展示Mobile Angular UI应用布局的结构

他与任何一个bootstrap都很像,但是你也会发现一些工具条,导航代码占位符和内部页面继承的不同之处

阅读更多基础布局

滚动条

在Mobile Angular UI中全部的滚动条都完全废除了.这样就更容易处理多样的竖状滚动条并且适应导航栏

你可以使用Scrollable Areas使得滚动条可用.

移动标记

捕捉模块揭露服务和命令将会帮助你复制主要和详尽的模型

捕捉模块揭示指令通过使用uiContentFor和uiYieldTo指令是你可以提取那些被用在其他部分的标记

他提供了一种可以复制和移动一块标记去其他文件的方法

状态分享服务和ui-*指令

你必须事先知道和学习Mobile Angular UI组件不局限于几百条命令的单一列举

也不像他大部分的UI框架那样需要用同样的方法创建大部分的组件

Mobile Angular UI将会给你一个极大的灵活性去定制App的行为和小工具,甚至不用去学习不同的语法和不用自己写JS代码(看到这我就方了呀)

任何一个开始使用angular.js开发人员都将从引用以下代码开始

app.controller(function($scope){
  $scope.activeTab = 1;

  $scope.setActiveTab = function(tab){
    $scope.activeTab = tab;
  };
});

<div class="tab-nav">
  <a ng-click="setActiveTab(1)">Tab1</a>
  <a ng-click="setActiveTab(2)">Tab2</a>
  <a ng-click="setActiveTab(3)">Tab3</a>
</div>
<div class="tabs">
  <div ng-if="activeTab == 1">Tab1</div>
  <div ng-if="activeTab == 2">Tab2</div>
  <div ng-if="activeTab == 3">Tab3</div>  
</div>

Mobile Angular UI提供给你一个更加通用好管理的方式去做:Sharestate服务和ui-*命令

ShareState允许使用最基本的angular和富angular命令去创建复杂的组件,这样你就有能力去做:

• 只用HTMl就可以创建复杂的组件
• 使你的控制器脱离UI逻辑
• 使得ng-click可以做其他的事情
• 任何一个时间都可以触发UI的动作
• 把组件状态发送给URL
• 用剩下的UI分享组件的情形

<div class="tab-nav" ui-state='activeTab'>
  <a ui-set="{activeTab: 1}">Tab1</a>
  <a ui-set="{activeTab: 2}">Tab2</a>
  <a ui-set="{activeTab: 3}">Tab3</a>
</div>
<div class="tabs">
  <div ui-if="activeTab == 1">Tab1</div>
  <div ui-if="activeTab == 2">Tab2</div>
  <div ui-if="activeTab == 3">Tab3</div>
</div>

ui-state创建了一种可以在声明的被绑定的元素内可以随时访问的全局变量

看完文档和其他部分的例子你就可以知道如何去用ui-*命令创建一般的组件像是:折叠框,标签,下拉等

手势和触碰

Angular Mobile UI意图解决开发在手机上使用的html是遇到的大部分一般问题.

只是将mobile-angular-ui引用到你的app中就已经获得到

• 可靠快速的触碰滚动
• 快速点击
• 预防闪动和/触碰乱跳

----未校验