ionic 學習 一

ionic 依賴angular.在學以前，我對angular進行了一下入門。

最近在看ionic，想作一些筆記，因此，寫下這個隨筆，有什麼不對的請多多指教，剛開始學，後面還會學Apache Cordova，先一個一個來！

學ionic的基礎

javascript html css  angular.js 

一、首先 ionic是什麼？ 

ionic 是一個強大的 HTML5 應用程序開發框架(HTML5 Hybrid Mobile App Framework )。 能夠幫助您使用 Web 技術，好比 HTML、CSS 和 Javascript 構建接近原生體驗的移動應用程序。

ionic 主要關注外觀和體驗，以及和你的應用程序的 UI 交互，特別適合用於基於 Hybird 模式的 HTML5 移動應用程序開發。 

ionic是一個輕量的手機UI庫，具備速度快，界面現代化、美觀等特色。爲了解決其餘一些UI庫在手機上運行緩慢的問題，它直接放棄了IOS6和Android4.1如下的版本支持，來獲取更好的使用體驗。

好吧，有點太官方了。咱們看 Ionic 能給咱們提供什麼?  一個樣式庫，你能夠使用它 來 裝飾你的 HTML 網頁 ，看起來像移動程序的 界面，什麼 header 、content、footer、grid、list。這貌似沒什麼 實質性的東西， sencha touch ，jq 都能提供 。

一個用 angularjs 寫的工具庫，姑且叫它組件庫吧。

固然它 還包含 了angular-animate、angular-resource、angular-sanitize、angular-ui-router，適應移動平臺的模塊庫。

這裏小帶一句 

二、Apache Cordova 是什麼？

Apache Cordova 提供用 Javascript 訪問 移動平臺  的 API 。

其內部是用每一個 平臺下的  web view 組件，運行 程序，而後實現了 每一個平臺下的 一套 CordovaLib  供你寫的程序調用，而後你就能夠 調用 攝像頭、磁盤等 重api。

開始學習。

這裏的css 部份，我就不寫了。之後遇到問題再寫

js部份

http://www.ionic.wang/js_doc-index-id-52.html

這是我感受比較有意思的js方法。網上看到的，記錄一下。

1. 模態對話框 : $ionicModal

模態對話框 : $ionicModal 模態對話框經常使用來供用戶進行選擇或編輯，在模態對話框關閉以前，其餘 的用戶交互行爲被阻止。

在ionic中使用模態對話框有三個步驟：

1.聲明對話框模板

使用ion-modal-view指令聲明對話框模板，對話框模板一般置入 script內以構造內聯模板：

<script id="a.html" type="text/ng-template"> <ion-modal-view> </ion-modal-view> </script>

2.建立對話框對象

服務$ionicModal有兩個方法用來建立對話框對象：

• fromTemplate(templateString,options) - 使用字符串模板
• fromTemplateUrl(templateUrl,options) - 使用內聯模板 這兩個方法返回的都是一個對話框對象。

3.操做對話框對象

對象框對象有如下方法用於顯示、隱藏或刪除對話框：

• show() - 顯示對話框
• hide() - 隱藏對話框
• remove() - 移除對話框
• isShown() - 對話框是否可視？

2. 上拉菜單 : $ionicActionSheet

上拉菜單是一個自屏幕底部向上滑出的菜單，一般用來讓用戶作出選擇。

ionic的上拉菜單由三種按鈕組成，點擊任何按鈕都自動關閉上拉菜單：

取消按鈕 - 取消按鈕老是位於菜單的底部，用戶點擊該按鈕將關閉。一個上拉菜單 最多有一個取消按鈕。 危險選項按鈕 - 危險選項按鈕文字被標紅以明顯提示。一個上拉菜單最多有一個 危險選項按鈕。 自定義按鈕 - 用戶定義的任意數量的按鈕。 在ionic中使用上拉菜單須要遵循如下步驟：

1.定義上拉菜單選項

使用一個JSON對象定義上拉菜單選項，包括如下字段：

• titleText - 上拉菜單的標題文本
• buttons - 自定義按鈕數組。每一個按鈕須要一個描述對象，其text字段用於按鈕顯示
• cancelText - 取消按鈕的文本。若是不設置此字段，則上拉菜單中不出現取消按鈕
• destructiveText - 危險選項按鈕的文本。若是不設置此字段，則上拉菜單中不出現危險選項按鈕
• buttonClicked - 自定義按鈕的回調函數，當用戶點擊時觸發
• cancel - 取消按鈕回調函數，當用戶點擊時觸發
• destructiveButtonClicked - 危險選項按鈕的回調函數，當用戶點擊時觸發
• cancelOnStateChange - 當切換到新的視圖時是否關閉此上拉菜單。默認爲true
• cssClass - 附加的CSS樣式類名稱

2.建立上拉菜單

$ionicActionSheet服務的show()方法用來建立上拉菜單，返回一個函數，調用該 返回函數能夠關閉此菜單。

3.彈出框 : $ionicPopup

彈出框一般用於提醒、警告等，在用戶響應以前其餘交互行爲不能繼續。與模態 對話框覆蓋整個屏幕空間不一樣，彈出框一般僅佔據一部分屏幕空間。

在ionic中，使用$ionicPopup服務管理彈出框：

$ionicPopup.show(options) .then(function(){ //這個函數在彈出框關閉時被調用 });

show()方法返回的是一個promise對象，當彈出框關閉後，該對象被解析，這意味着 then()方法指定的參數函數此時將被調用。

show()方法的參數options是一個JSON對象，能夠包括如下字段：

• title - 彈出框標題文本
• subTitle - 彈出框副標題文本
• template - 彈出框內容的字符串模板
• templateUrl - 彈出框內容的內聯模板URL
• scope - 要關聯的做用域對象
• buttons - 自定義按鈕數組。按鈕老是被置於彈出框底部
• cssClass - 附加的CSS樣式類

簡化的特定彈出框

除了show()方法，$ionicPopup還針對一些特定場景提供了簡化的方法，這些方法不須要 自定義按鈕，只須要設置title和template便可：

• alert(options) - 警告彈出框，僅包含一個按鈕供關閉彈出框
• confirm(options) - 確認彈出框，包含一個取消按鈕和一個確認按鈕
• prompt(options) - 輸入提示彈出框，包含一個文本輸入框、一個取消按鈕和一個確認按鈕

4.浮動框 : $ionicPopover

浮動框一般用以非侵入的方式提供當前視圖的額外信息。

在ionic中使用浮動框的幾個步驟：

1.聲明模板

須要首先利用ion-popover-view指令聲明一個模板內容：

 <ion-popover-view> <!--模板內容--> </ion-popover-view>

2.建立浮動框對象

使用$ion-popover服務的如下方法建立浮動框對象：

• fromTemplate(templateString,options) - 使用模板字符串構造浮動框
• fromTemplateurl(templateUrl,options) - 使用內聯模板構造浮動框

注意：這兩個方法返回的都是promise對象，在浮動框對象被構造 成功後獲得解析，這時能夠獲取浮動框對象：

 $ionicPopover.fromTemplate(...) .then(function(popover){ //popover參數是浮動框對象 });

3.操做浮動框對象

浮動框對象提供如下方法：

show() - 顯示浮動框 hide() - 關閉浮動框 remove() - 移除浮動框 isShown() - 浮動框是否處於顯示狀態？

5.載入指示器 : $ionicLoading

當進行耗時的操做時，能夠使用載入指示器提示用戶操做進行中，並暫時阻止交互。 載入指示器一般會疊加一個半透明的幕布層以便阻止用戶的交互。

在ionic中，使用$ionicLoading服務操做載入指示器：

• show(options) - 顯示載入指示器
• hide() - 隱藏載入指示器

顯示參數

show()方法的options參數是一個JSON對象，能夠包含以下字段：

• template - 模板字符串
• templateUrl - 內聯模板的Url
• scope - 要綁定的做用域對象
• noBackdrop - 是否隱藏背景幕
• hideOnStateChange - 當切換到新的視圖時，是否隱藏載入指示器
• delay - 顯示載入指示器以前要延遲的時間，以毫秒爲單位，默認爲0，即不延遲
• duration - 載入指示器持續時間，以毫秒爲單位。時間到後載入指示器自 動隱藏。默認狀況下， 載入指示器保持顯示狀態，知道顯示的調用hide()方法

參數配置服務 : $ionicLoadingConfig

若是要在多處都使用載入指示器，統一對options參數進行配置是一個更好的方法，這樣 在應用時直接調用show()方法而沒必要傳遞參數了。這經過定義一個constant provider來實現：

 angular.module("ezApp", ["ionic"]) .constant("$ionicLoadingConfig",{ template : "default loading template ..." })

$ionicLoading服務會經過注入器查找這個常量，若是存在就使用其值做爲參數進行顯示。

6.背景幕 : $ionicBackdrop

在浮動框、載入指示器中咱們已經接觸過背景幕。它是一個覆蓋全屏的半透明圖層，用來 阻止用戶的交互行爲。

咱們能夠使用*$ionicBackdrop*服務單獨地使用背景幕：

• retain() - 保持背景幕
• release() - 釋放背景幕 爲何不是show()和hide()呢？

在UI中可能有多個指令/元素都使用背景幕，爲每一個指令都建立單獨的背景幕是不明智的。

事實上，$ionicBackdrop服務在DOM中只保留有一個背景幕。每次當使用retain()方法時， 只是給背景幕加一次鎖，release()方法只是給背景幕解一次鎖。若是retain()被調用三次， 背景幕將一直顯示，直到release()也被調動三次後才隱藏。