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

Ionic入門:導航

by
Difficulty:BeginnerLength:LongLanguages:

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

Final product image
What You'll Be Creating

在這個教程系列裡我們已經介紹了很多東西,包括導航。 可是Ionic還有一些組件能為創建功能更強大的導航提供附加的功能。 在本教程中,我們給應用程序添加一個側拉菜單和選項卡組件,並且我們也來看一下能讓我們應用程序的導航變的更聰明的那些額外的服務。

教程項目文件

GitHub可得到教程項目文件。 該應用程序的一般用途是顯示當地設施的一些信息。 在本教程中,我們使應用程序有能力去顯示圖書館,博物館,公園和醫院。 目前,它只顯示在Chicago內的地點,我們會在下一篇教程中改善它。

你可以從GitHub下載此教程完整的項目。 如果你克隆此項目,你也可以通過使用Git和運行git checkout -b start來一起編寫代碼。 你也可以預覽最終的應用程序。

注意我已經從此系列第三集中提到過的place view中刪除了resolve。 我不想對此舉講解太深,在controller裡加載數據會讓我們的導航更簡單點。

1. 添加一個側拉菜單

一個在手機應用程序中最普遍的導航模式就是側拉菜單。 這就像一個抽屜它能從側邊劃出並且曝露出導航鏈接和其它的內容,比如現在用戶的登陸的狀態。 按照設計,它們是存在於屏幕外並通過某種按鈕被打開的,它們常常使用hamburger圖標,即使有人並不認同對此圖標的使用。

Ionic Side Menu

側拉菜單通常能通過側滑打開或通過側滑關閉。 這個非常有用,但它有時也和其它手勢衝突,你應該注意這種互相衝突的行為。 你應該帶著應用程序的完整視野和經驗去考慮滑動的最優使用,如果有問題就禁用它。

Ionic提供了一些組件,它們能讓設置側拉菜單變的簡單。 你最多能創建兩個側面菜單,一個在左邊一個在右邊。 一個側面菜單是由幾個組件組成的,ionSideMenus, ionSideMenu, 和ionSideMenuContent

如想看一下這個的實際運用,讓我們更新一下www/index.html並且設置一個側拉菜單。 你將用下面的代碼代替已有的內容,這會在現有的代碼中添加一個側拉菜單組件。

要啟用一個側拉菜單,我們從在ionSideMenus裡包裝我們應用程序內容開始。 它啟動Ionic去協調側拉菜單和內容的區域。 然後我們用一個帶side="left"屬性的ionSideMenu去指定它將佔用哪一邊。

在側拉菜單中,我們能放入任何我們想要的內容。 在這種情況下,這也許是最常見的場景,內容就是用一個ionHeaderBar組件和一個ionList組件分別來渲染應用程序的標題和一個鏈接的目錄菜單。 我們還沒有定義設置視圖,所以那個鏈接目前不工作。 另外要注意的是ionItem組件有一個menu-close屬性。 當一個用戶點擊鏈接是它自動地關閉側面菜單,否則側面菜單就保持開著。

ionSideMenuContent組件是用來承載主要內容的區域。 這個內容區域佔用整個屏幕,但是這個組件僅僅只是幫助側拉菜單組件被正確地渲染。 我們也用了drag-content="false"屬性來禁用拖拽手勢因為它們將乾擾滾動目錄菜單和選項卡。

我們也已經使用ionNavButtons對導航欄添加了一個新的按鈕。 這是側拉菜單圖標,它以三條線疊在一起的形式出現在右上端。 此按鈕有menu-toggle="left"屬性,這是用來觸發左側菜單的開合。

現在我們的側拉菜單已經就位,讓我們為應用程序設置視圖添加選項卡來設置下一個主要的導航組件。

2. 擁有單獨導航歷史的選項卡

選項卡是應用程序導航另一個常用的模式。 選項卡易於被用戶理解,因為我們會在很多類型的用戶界面中看到它們,並不只在手機應用程序中。

選項卡可以是有狀態或無狀態的。 一個選項卡,如果它只顯示內容,不記憶任何的變化,它是無狀態的。一個選項卡,如果它維持基於用戶交互的狀態,它是有狀態的(例如,可持續的搜索結果)。 我們看一下如何在Ionic裡建立有狀態的選項卡,因為它們更加複雜,更加強大。

Ionic Tabs

ionTabsionTab組件設置選項卡是相當容易的。 很像側拉菜單,只要你喜歡,你可以放盡可能多的選項卡組件。 沒有硬性限制,但我覺得最多五個較合適。 在小尺寸屏幕的設備上,太多的圖標會讓選取一個選項卡變的困難。

我們將通過建立幾個新文件去設置選項卡。 首先,讓我們建立一個新文件www/views/settings/settings.html去設置一個模板。 在新文件中加入下面的代碼。

ionTabs組件是用來包裹ionTab組件的。 有一些CSS的類能定義選項卡的樣子,比如在頂部或底部放置選項卡,使用有標題或無標題的圖標,還有其它的一些。 這裡,我們已經決定在頂部使用預設stable顏色有標題圖標的選項卡。

ionTab組件有一些能被用來定義行為的屬性。 它支持許多功能, 比如在上面顯示一個小的通知徽章,使其連接到狀態,圖標行為和更多的功能。 我們的每個標籤都有一個title,一個圖標類名,在激活狀態下是(icon-on),在非激活狀態下是(icon-off),和用ui-sref連接到一個狀態的連接。

在每個選項卡里都有另一個ionNavView。 這似乎有點不對因為我們在index.html裡已經設置一個ionNavView。 我們正在做的是申明一個狀態可以被渲染的額外的地方,這可以認為是一個子視圖。

每個選項卡都能有它自己的導航歷史,因為每個ionNavView都是獨立於其它的ionNavView。 每個選項卡也有一個獨一無二的名字,以方便我們定義某些狀態可出現在有名字的ionNavView裡。

你也許已經註意到在這個頁面裡並沒有ionView,這在我們使用有狀態的選項卡時很重要。 當你以這種方式使用ionTabs時,這是不需要的。只有在你使用無狀態選項卡時,也就是CSS組件,你會需要它。

我們現在需要設置一些額外的狀態來使這個例子工作起來。 在www/views/settings/settings.js創建另一個文件並且加入一下代碼。

你能看到我們正在設置一些新的狀態,但是這些狀態和到目前為止與我們已經定義的其它狀態顯現出不同。 第一個狀態是一個抽象的狀態,它本質上是一個不能被自己直接加載的狀態,並且它也不能有子狀態。 通過選項卡的界面來看,對我們來說這是合理的。因為settings狀態是用來加載所有的選項卡組件模版,但用戶只會停留在其中一個選項卡,而不是整個選項卡組件。 他們總是在看當前激活的選項卡,這包含另一個狀態。 所以使用抽象的選項卡狀態使我們能夠正確地配置這些導航。

其它三個狀態被定義為settings.[name]。 這允許我們在這些狀態中間定義一個父子的關係,本質上這反映出ionTabsionTab組件之間的父子關係。 這些狀態使用視圖屬性,它是一個有名字的,可被視圖使用的,帶一個屬性的對象。

你在ionNavView的模版中提供的名字應該和這個屬性名一樣。 該屬性的值是相同的狀態定義,它不帶被正常聲明的url。 通過合併這兩個,url也形成了父子關係。 所以所有這些子狀態被渲染成/settings/preferences

你需要用腳本標記把settings.js加入index.html。 一但你這樣做了,你將看到一些報錯因為我們正在引用一些我們還沒有創建的的文件。 讓我們完成我們的選項卡模版。

我們需要創建三個文件。 前兩個是靜態內容所以我們不會講它們太多的細節。 創建一個文件www/views/settings/tab.about.html並且加入一下內容。

這包含一個顯示一些信息的模版。 它有GitHub項目和許可證的鏈接。 它看上去就像這樣。

About Tab

創建另一個文件www/views/settings/tab.license.html並且加入一下內容。

這包含此代碼的MIT許可證內容。 有一個簡單卡片組件包含這個內容。 它看上去像這樣。

License State

最終的模版包含一些表單元素。 我會對它講多點細節。 創建一個文件www/views/settings/tab.preferences.html並且加入以下內容。

這個視圖包含一個切換按鈕的目錄,它顯示此應用程序能顯示的四種地點的類型,博物館,公園,圖書館和醫院。 每個切換按鈕允許你從此目錄中啟用或禁用一個地點類型。 切換按鈕是一個CSS組件。 我們只需要使用一個複選框輸入通過這些特別的標記和CSS類結構就能使它們展現成移動設備的切換按鈕。

Preference Toggle Buttons

這個視圖有一個控制器,它在settings.js被聲明,它注入一個我們還未創建的Types service。 我們將通過添加一個service到www/js/app.js把它修復。

此service含有一個地點類型的數組。 每個地點類型有一個地點類型名字的屬性和是否此地點類型被啟用或禁用。 我們在切換按鈕ngModel中使用啟用屬性來跟踪狀態,如果屬於那個類型的地點應該被顯示。

在此刻,你可以打開側拉菜單並且導航到設置鏈接。 你能看到兩個選項卡,preferences和about。 在preferences選項卡中,你能啟用或禁用地點類型。

如果去about選項卡,你可以選擇許可證來看它是如何在選項卡內導航到另一個路徑的。 如果你在瀏覽許可證之後在preferences和about選項卡中轉換,你能看到選項卡會記住你曾經在瀏覽許可證的狀態即使你已離開,這演示了這些選項卡是有狀態的性質。

此篇教程的最後一步是更新地點目錄視圖,它使用Types service來加載你想要的地點類型的地點並且使用歷史service來控制什麼時候重新加載,什麼時候使用緩存。

3.緩存和使用歷史Service

Ionic默認緩存最後10個視圖並且把它們保存在內存裡。 許多應用程序甚至還沒有那麼多數量的狀態,這意味著你的整個應用程序可以在內存裡運行。 這很有用因為它意味著Ionic不必在導航去其它視圖前再一次渲染那​​些視圖,這樣可以提升應用程序的運行速度。

這會導致一些行為問題,因為你可能會想任何時候當狀態被訪問,你的狀態總是重新加載和從新初始化控制器。 由於只有10個視圖被緩存,如果你有20個視圖,只有最後10個會被緩存。 那意味著你不能保證一個視圖在或者不在一個緩存裡。 所以你應該避免在生命週期鉤子之外,在你的控制器裡運行配置邏輯。 你也可以用$ionicConfigProvider設置緩存策略。

有時你需要看一下用戶的導航歷史來確定該做什麼。 比如在這個應用程序中,如果用戶點擊一個地點然後再回到目錄, 我們想要保留緩存地點目錄。 如果我們自動地對每一次訪問刷新目錄,用戶可能會在他們滾動和瀏覽一個地點之後丟失他們目錄中的地點。

另一方面,如果一個用戶導航去設置頁面然後再回到地點目錄,我們會想要刷新目錄因為他們也許已經改變了他們想要顯示的地點類型。

我們將使用一個生命週期事件的組合,這是我們之前已經看到的用$ionicHistory service去添加一些邏輯,那些邏輯將幫助確定地點狀態在什麼時候應該重新加載目錄。 我們也想用Types service來幫助我們加載那些用戶想要看的地點類型。

打開www/views/places/places.js並且更新它使它匹配下面的代碼。 我們需要改變數據加載的方式並且使用$ionicHistory service去檢查歷史記錄,從而決定該什麼時候重新加載。

首先,我們已經修改了為我們的API建立URL的方式,以此改變從只加載公園到加載被請求的地點類型。 如果你跟之前的版本對比,它主要使用angular.forEach來循環每個類型並且把它添加到URL。

我們也已經修改了$ionicLoading service的行為方式。 在任何時候vm.load()方法被調用時,我們觸發它,而不是在控制器最初運行時立即運行它。 這很重要,因為控制器將被緩存並且在默認下是不會重新加載數據的。

最大的變化是$ionicView.beforeEnter生命週期事件處理器。 這個事件在視圖就要變成下一個活躍視圖之前被觸發,並且允許我們做一些設置。 我們用$ionicHistory.forwardView() 方法來得到關於最後一個用戶瀏覽過的視圖的信息。

如果它是第一次加載,那麼它就是空的,否則它會返回一些有關最後狀態的數據。 我們然後檢查是否之前的狀態是地點狀態,如果是,我們就用緩存的目錄結果。 還有,因為我們有不到10個狀態,我們知道它們會一直被保存在內存裡。

否則,它將重置緩存並且觸發一個新的數據加載。 這意味著任何時候我從設置頁面返回地點視圖,它將加載數據。 取決於你應用程序的設計,你可能想去設計不同的關於如何處理緩存和重新加載的條件規則。

歷史service提供更多的信息,諸如整個歷史棧,修改歷史的能力,關於當前狀態的細節,和更多其它的信息。 你能使用這個service去調教用戶在應用程序中導航的體驗。

我們將對我們的地點模版做兩個其它小的調整。 打開www/views/places/places.html並且把標題變為Local Places

下一步,更新無限滾動組件,添加一個屬性immediate-check,用來防止無限滾動組件在加載數據的同時發生初始的加載。 這基本上可以幫助防止重複的數據請求。

在這個時刻,我們已經創建了一個十分堅固的有很多好用功能的應用程序。 我們將用最後一個教程結束這個系列,在最後一個教程裡我們會看一下Cordova和設備功能的整合,比如訪問GPS數據。

結論

Ionic的導航總是從聲明一些狀態開始。 公開導航可以有許多方式,正如我們在此篇教程中看到的。 這是我們在本教程中所涵蓋的:

  • 側拉菜單組件使創建一個或兩個可按需或用手指滑動激活的側拉菜單變得容易。
  • 標籤可以是無狀態或有狀態的。 有狀態標籤可以有一些帶不同導航歷史記錄的個體視圖。
  • 標籤有許多如何顯示圖標和圖標名的配置選項。
  • 一個切換按鈕是一個CSS組件,它就像一個複選框,只是它是針對移動設備設計的。
  • 你可以使用$ionicHistory service去學習更多關於應用程序的導航歷史來定制用戶的體驗。
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.