开始学习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中就已经得到到

 

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

----未校验