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

 

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

----未校驗