介紹css
Mobile AngularUI 可讓你使用Twitter Booostrap和Angular JS來開發混合移動App和桌面應用程序.html
下面是是一些貫穿整個項目的步驟,我強烈的建議你去繼續閱讀,而後去閱讀詳情 開始指導.git
動過實例學習github
Demo是一個學習Mobile Angular UI的一個很好的方式.bootstrap
你能夠從這裏下載資源:https://github.com/mcasimir/mobile-angular-ui/tags.app
打開下載好的文檔瀏覽demo文件夾下面的文件框架
若是你很熟悉Angular,只須要查看index.html和demo.js就能夠是是你準備好開發本身的應用ide
學習如何引入和引入的什麼文件工具
Mobile Angular UI從新分配了部分Twitter Bootstrap裏面的CSS.Bootstrap已經被擴充到友好的支持移動組件,而且經過這裏將這些規則分割成了三部分:佈局
mobile-angular-ui-base.css
: Mobile rules mobile-angular-ui-hover.css
: Hover rulesmobile-angular-ui-desktop.css
: Desktop rules這樣你就能夠有目標的只引入你設備須要的文件
JS
Mobile Angular JS由三個基礎的angular模塊組成
core和components都是:mobile-angular-ui.js的一部分,然而gestures分佈於一個分開的文件中:mobile-angular-ui.gestures.js
主要概念
樣式和組件
Mobile Angular UI與Twitter的Bootstrap緊密相關.
Mobile Angular UI其實是抓取的bootstrap.css的資源而且簡單操做從視覺和感受上達到移動端友好的效果.他不只保留了大部分的原始組件一遍能夠關聯他們文檔中的基礎樣式和組件.
更多更新的關於bootstrap的基礎組件
而且重寫的boostrap是他對於angular更加的友好.
那些原來默認被隱藏的組件如今都默認展現,這使得他更加容易的與ng-if/ng-show/ng-hide一體化
因此當意識到這一點,Mobile Angular UI bootstrap組件更像是
老是被呈現,除非你什麼也不作.
佈局
看一下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命令去建立複雜的組件,這樣你就有能力去作:
使得ng-click能夠作其餘的事情
<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中就已經得到到
----未校驗