開始學習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中就已經得到到

 

• 可靠快速的觸碰滾動
• 快速點擊
• 預防閃動和/觸碰亂跳

----未校驗