Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Ionic
Code

Ionic入門:服務

by
Difficulty:BeginnerLength:LongLanguages:
This post is part of a series called Getting Started With Ionic.
Getting Started With Ionic: JavaScript Components

Chinese (Traditional) (中文(繁體)) translation by Qiang Ji (you can also view the original English article)

Final product image
What You'll Be Creating

1.服務簡介

在此Ionic系列第一第二部分,我們設置了本地開發環境和用一些Ionic組件,比如基本的導航和目錄組件,開發了幾個用來加載一個公園目錄的視圖。 在此教程中,我們將探討一下Ionic如何提供一些服務,這些服務允許你程序化管理應用程序和界面。

之前,我們演示了Ionic如何通過組件提供交互功能,這些組件是作為HTML元素被使用的(作為Angular指令被實施的)。 然而,有一些界面元素作為組件隨著HTML被實例化並沒有意義,比如一個加載器或者操作表疊加。

讓我們從服務在你應用程序中扮演的角色開始吧。 我已經確定三個在Ionic中主要的服務類型。

  • 組件服務
  • 委託服務
  • 輔助服務

組件服務

組件服務授權組件的使用,但它們是使用JavaScript管理的,而不是使用HTML去聲明它們(就像我們看到的ionNavBar那樣)。 換句話說,你將通過向控制器添加代碼來運用這些組件。 我們將在下面的例子中使用其中的兩個。

將這些服務看作具有生命週期的組件是有用的。 通常,你希望它們在特定的時間點加載,完成加載後,它們會被刪除。 比如,$ionicModal允許你創建一個模態。 模態有一個生命週期,它們會基於特定原因被打開和關閉。 你可能有一個要求用戶登錄的模態,或者他們可以關閉模態以跳過它,從而完成生命週期。

委託服務

有些組件有一個可以修改或管理組件的委託服務。 你可能希望在創建組件後可以程序化地操作它,這些服務旨在實現這種操作。 它們被這樣命名就是因為它們將行為委託給組件。

ionNavBar組件有一個叫做$ionicNavBarDelegate的委託服務。 此服務含有幾種方法,其中一個例子是title()方法,它允許你更新導航欄的標題。 每個委託服務可用功能的範圍各不相同,但是它們應該很容易在文檔中按名稱找到。

輔助服務

最後一類是可提供一些輔助的功能或信息的服務。 它們只有幾個而且和之前兩種服務類別不太一樣。 比如:

  • $ionicPlatform:幫助你與設備硬件交互
  • $ionicGesture:允許你處理手勢事件
  • $ionicPosition:告訴你元素在屏幕上的位置

這些輔助服務傾向於幫你開發邏輯或處理交互。 它們自己不會生成或修改組件。

在本片教程裡我們也會看一下其它的一些東西:

  • CSS組件,僅僅是視覺效果並且它不提供像其它JavaScript組件所提供的功能性邏輯。
  • Ionic事件,我們能利用它介入事件,比如,當視圖加載時或已完成加載時。
  • 更多的導航功能,它們使導航,管理狀態和嚮導航欄添加按鈕變的容易。

源文件

在此篇教程中,我們將會擴展在之前教程中已經開發的應用。 提醒一下,該應用旨在向用戶提供有關他們當地的公共設施,比如圖書館和公園的信息。 此應用程序已顯示在Chicago的公園目錄,現在我們將使其能夠顯示加載指示器,查看個別公園詳細信息,打開操作菜單和執行一些基本的分享功能。

你可以在GitHub上查看完成的項目。 最終的應用程序也可預覽

你可以用Git下載或查看源文件。 當你有了源文件,你需要運行npm install來設置項目。 如果你用Git查看代碼,你可接著編寫代碼如果你運行git checkout -b start來恢復代碼庫到最後一部分結束的地方。 一旦你有了源文件,你可以通過運行ionic serve啟動Ionic服務器。

2. 實現一個加載指示器

目前,此應用加載數據且無限滾動組件顯示一個小的旋轉指示器直到數據加載完成。 可我們實際上想覆蓋整個應用程序,這樣讓應用程序在加載數據時變的很明顯。

$ionicLoading服務對覆蓋和阻隔用戶與應用程序交互直到數據加載完成是非常有用的。 它也是可配置的。 比如你能聲明一個加載圖標或顯現一些文字,是否你要或不要暗背景,是否它應該在顯示一段時間後自動地隱藏。 你能在下面的截圖中看到加載指示器在操作。

Ionic Loader Overlaying the App

修改www/views/places.js去使用加載指示器。 首先,我們需要通過添加一個$ionicLoading函數參數給我們的控制器注入服務。 此服務很簡單,它只有兩個方法,show()hide()。 就像你在這段代碼中看到的那樣,我們可通過調用那兩個方法顯示或隱藏加載器。

$ionicLoading.show()方法在控制器被加載後立即被調用,這意味著加載器立刻被顯示。 現在我們需要告訴加載器在數據加載後隱藏,你看到此代碼就在$broadcast之後。

你也許注意到$ionicLoad.hide() 方法在每一次數據加載時被調用。 這不會有問題。 因為加載器已經被隱藏,此調用沒有任何效果。

我們現在已經實現了一個Ionic服務。 很簡單。 是嗎? 一些服務有點複雜,我們使用操作表來寫另一個例子。 在我們做之前,我們擴展我們的應用程序使其擁有兩個視圖,針對查看註解目錄和查看單個註解。

3. 添加註解視圖

我們下一步會寫一個新的視圖,此視圖將顯示一個具體公園的更多細節。 信息隨公園而異,但我們將專注於獲取圖片,網站,電話和地址信息。 添加此視圖的結果如下所示。

Place View Showing Park Details

要創建新視圖,請創建www/views/place/place.js,並包含你在下面看到的內容。 這是place視圖控制器和狀態的定義。

如果你看一下config()方法,你會看到我們正在聲明一個新的狀態。 這是ui-router在操作中,那麼你應該查閱ui-router文檔,了解有關聲明狀態的所有詳細信息。

此對象定義顯示我們正在使用/places/:place_id的網址。 當你看到前面帶冒號的URL部分,比如:place_id時,ui-router會將此部分路徑標記為狀態參數。 此狀態能夠使用$stateParams對象獲取數值並提供給你。 比如,/places/12345會導致$stateParams.place_id = '12345'

你已經看過定義的其他部分,除了resolve屬性。 這是一個允許您請求在創建狀態之前調用各種函數的功能。 它接受鍵和函數值的對象,因此在這裡我們將Place作為鍵,並將函數的結果分配給它。

在此函數中,它可以接受參數注入,這類似於你能用控制器所做的事情。 在這裡,$http$stateParams服務被注入。 然後,該函數使用通過URL傳遞的place_id的值,構建並返回HTTP請求。 這實際上是在places視圖中完成的,不是控制器。

此解析功能足夠聰明,可以確定如果你返回一個promise,它將等待此promise在創建狀態之前被解析。 換種說法,$http.get() 返回一個加載數據的promise,並且ui-router會一直等待直到數據在創建狀態和傳遞Place到控制器之前變的可用。 解析功能對在應用中提前加載數據非常有用,這是一個如何使用它的很基本的示例。

現在我們已經定義了狀態,聲明了控制器並將結果數據從Place(這是在狀態中被解析的)分配給vm.place。 我們還需要為此狀態創建模板,因此創建www/views/place/place.html並向其中添加以下內容。

此模板通過使用ionView包裝內容開始,因此Ionic導航系統可以正確地跟踪它。 它還根據地點的名稱分配標題。 ionContent封裝器包含主要內容,你會注意到模板使用CSS類而不是元素來創建卡組件。

上一部分中,我們討論了僅僅是CSS類的一些組件。 卡組件就是這樣一個例子。 在概念上,它就像一個列表。 內部內容如同列表一樣垂直堆疊,但是樣式更像是一張卡片。 這將利用卡片樣式,其中包括文檔中所述的圖像支持,圖標和其它整潔佈局的功能。

有幾個ngIf指令的使用,因為不能保證返回的數據會有一個電話號碼或網站。 ngIf指令確保不顯示空值。 它還使用ngHrefngSrc正確構建鏈接。

你還會注意到tel://協議的使用,當在電話上使用時,應提示用戶在選擇號碼時呼叫該號碼。 這是一個方便的功能,易於使用,並在一個物理設備上能很好地整合。 計算機上的某些程序(如Skype)也可能會嘗試處理為你撥打電話,這具體取決於你的設置。

這應該給我們一個可工作的視圖,但我們如何導航到它? 我們需要做一些小的修改,以使導航從places視圖開始。

4.在視圖之間導航

ui-router提供了一個ui-sref指令,用於將項目與另一個狀態鏈接。 在這種情況下,我們希望places視圖列表中的每個條目都鏈接到相應的place視圖。

打開www/views/places/places.html並添加鏈接到每個地點的指令。 使用新屬性更新ionItem

ui-sref指令有一種格式,你可以通過其名稱而不是像使用href那樣通過某個URL鏈接到另一個狀態。 這很方便,因為URL可能會改變。 它還可以接受用於構建URL的參數,在我們的示例中,我們要傳遞place.place_id屬性。 ui-sref將屬性作為對象,所以state-name({param:value})是語法。

現在預覽此應用並選擇公園,它會導航到新的place視圖,你可以查看地址欄以查看網址是否添加了place_id值。 但是,我們現在有一個問題。 我們如何回到目錄中?

我們使用ionNavBackButton功能為我們提供一個自動返回按鈕。 打開www/index.html並在ionNavBar中添加以下代碼段。 這將添加一個返回按鈕,只有當有一個地方要返回時才會顯示。

Ionic的導航聰明到足以在你使用應用程序時跟踪導航的歷史。 如果的確有一個可返回的之前視圖,它將顯示返回按鈕。 否則,它將被簡單地隱藏。

我們還想聲明,places視圖不應該顯示後退按鈕,我們可以通過在www/views/places/places.html中添加hideBackButton指令來實現。

當你在瀏覽器中開發和預覽時,有時歷史記錄會重置。 比如當你位於place視圖並且在編輯器中保存更改時,瀏覽器會自動重新加載並重置歷史記錄。 在這種情況下,後退按鈕不會按預期顯示。 你可以通過返回到目錄並刷新以直接設置歷史記錄來解決此問題。

我們取得了不錯的進展,但現在,當你點擊目錄中的條目時,它會等待直到API調用返回數據後才轉換到新的視圖。 它可能看起來很快,但有時,如果API很慢,它就很慢。 它可能會導致有人認為應用程序被卡住,變慢,或者沒有註冊它們的點擊事件,因為它沒有立即開始對點擊做出反應。 我們通過一些生命週期事件來解決這個問題,它們能幫助我們在這段時間內設置和顯示一個加載指示器。

5.在頁面切換期間添加加載指示器

為了提供更好的用戶體驗,我們將在為place視圖加載數據時使用$ionicLoading服務來覆蓋應用程序。 為了知道何時顯示和隱藏加載器,我們使用生命週期事件

這些事件基於導航事件觸發,例如在進入視圖之前/之後或在離開視圖之前/之後。 你可以在這些時間點執行任何可能需要的操作,例如重置某些數據或使用它提交使用信息。

為了演示它,讓我們在places視圖中添加一個事件偵聽器,在開始導航到place視圖時處理觸發加載指示器事件。 打開www/views/places/places.js並將以下內容添加到控制器。 你還需要確保$scope在控制器函數參數中被聲明,因此它是可用的。

這是一個範圍事件偵聽器,它偵聽$ionicView.beforeLeave事件(請參閱Angular範圍事件)。 Ionic將此事件廣播到你的控制器,並調用此處被聲明的匿名函數。 此函數簡單地調用$ionicLoading.show() 方法以啟用加載指示器。

這會觸發加載指示器在用戶點擊條目時立即顯示。 現在我們向place視圖添加類似的代碼,以便在視圖完成加載時隱藏加載指示器程序。 打開www/views/place/place.js並將以下內容添加到控制器。 你需要將$ionicLoading$scope添加到控制器函數作為參數,因為它們當前未被注入。

在完成進入視圖時,它偵聽不同的範圍事件,並調用隱藏加載器的函數。 加載指示器會在用戶點擊要查看的地方直到視圖完全被加載之間的時間內被顯示。 你可以嘗試使用其它事件,看看它們什麼時候會被觸發。

我們在本教程中做的最後一件事是設置一個操作表共享按鈕,它允許你發佈到Twitter,Facebook或電子郵件和分享公園的信息。

6.使用操作表服務的分享按鈕

操作表對於提供一系列額外選項非常有用。 使用操作表的目的通常是在你想要顯示一個分組操作的情況下,(在我們的示例中)提供共享公園信息方式的一系列選項。 我們將創建的操作表看起來像這樣。

Ionic Action Sheet in Action

操作表服務比加載服務複雜一些,因為它處理配置和用戶輸入。 打開www/views/place/place.js並將這個新方法添加到你的控制器。 你還需要確保$ionicActionSheet會被注入到你的控制器。

openSheet()方法負責創建操作表。 它通過調用$ionicActionSheet.show()來實現操作表創建,它返回一個存儲在sheet上的函數。 這允許你在稍後完成工作後通過調用sheet()關閉它。 show()方法接受一個具有多個屬性的對象,我們將對其進行細分。 有幾個遵循此模式的Ionic服務的示例,如modals和popovers,所以你總是可以關閉它們。

該表使用titleText屬性管理標題,通常用於告知用戶如何使用按鈕。 cancelText屬性接受用於啟用取消按鈕的字符串。 如果你不聲明此屬性,它將不會選擇取消按鈕。 你也可以通過點擊按鈕之外的背景幕來取消。

要聲明這些按鈕,你可以使用buttons屬性,這是一個具有text屬性的對像數組。 它們按照聲明的順序顯示,因此它們以此進行排序。

buttonClicked屬性接受一個函數,它傳遞所選按鈕的索引(因為它在buttons中被聲明)。 因此,你可以根據傳遞的索引確定要做什麼。 在此函數中,檢查索引,並打開Facebook,Twitter或使用mailto:去觸發電子郵件客戶端。

它可以在Facebook,Twitter或電子郵件應用程序中打開這些鏈接,這取決於用戶設置和設備,但它將至少打開應用程序外部的鏈接(在外部瀏覽器中)。 最後一個是調用sheet()方法,它關閉操作表。

操作表現在可以操作了,但我們仍然需要添加一個按鈕來觸發它。 為此,我們在調用vm.openSheet()的place視圖中添加導航欄按鈕。 打開www/views/place/place.html,並在ionViewionContent之間添加ionNavButtons代碼片段。

這裡是另一個有用的Ionic導航功能,它允許你對特定的視圖使用ionNavButtons添加導航欄按鈕。 內部的任何按鈕都添加到導航欄,你可以對它們出現在哪一側進行配置。

在這個時間點上,一切都工作了。 用戶可以打開操作表與朋友分享公園的信息。

結論

在本教程中,我們介紹了Ionic服務及其使用方法。 一路上,我們發現了Ionic許多其它的功能:

  • Ionic服務在控制器中被調用並且它通常具有獨立於當前視圖的生命週期。
  • $ionicLoading服務非常有用,它在你應用程序加載數據或必須阻止用戶界面時顯示和隱藏加載指示器。
  • $ionicActionSheet服務向用戶提供覆蓋應用程序的按鈕列表,以便輕鬆訪問重要的操作。
  • Ionic導航功能還包括ionNavBackButton,在可以返回時自動顯示後退按鈕。 ionNavButtons允許你將導航欄按鈕添加到特定視圖。
  • Ionic有CSS組件,像卡組件,它沒有特殊的交互功能,只是通過聲明CSS類使用。

在下一期中,我們將進一步探討Ionic的一些導航功能。

創建一個Ionic模版贏$1000

如果你已經熟悉了Ionic框架, 那麼你也許想考慮一下進入藝平台最想要的Ionic模版大賽。 怎麼做?創建一個獨特的Ionic模板,並在2016年4月27日之前提交給 Envato 市場。

最好的5個模板會獲得$1000獎勵。 有興趣嗎? 在大賽的網站上可以了解到更多的有關比賽要求和指南的詳細信息。

Envato qr branded
关注我们的公众号
Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.