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

Ionic 入門:JavaScript 組件

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

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

Final product image
What You'll Be Creating

在本教程中,我們將創建我們的第一個 Ionic 應用程序,並學習一些 Ionic JavaScript 組件的基本知識。 這些組件可讓你的應用程序易於使用一些功能,比如導航和導航欄,無限滾動和名單列表。 如果你還未設置 Ionic 或者需要重新回憶一下怎樣使用 Ionic CLI,你可以復習一下本系列的第一篇教程

何為組件?

組件這個專業術語在前段開發中有點被濫用了,因為很多框架對於組件的描述都有它們自己的理解。 事實上,Web 組件作為一個正式的 HTML 標準使這個概念更加複雜,所以讓我們明確地定義一下,在 Ionic 中組件是什麼。

在一般意義上,一個組件是一組被某種形式的編碼約定封裝的功能的實現。 換句話說,你可以認為一個組件就是從應用程序的其餘部分分離一個特殊功能的方式。 你可以想一想為何在HTML中有不同類型的表單輸入並且它們中的每一個就是一種擁有特殊功能類型的組件。

在 Ionic 中,有兩種​​類型的組件,CSSJavaScript。 CSS 組件是通過一組 CSS 類實現的,這組 CSS 類可用來修改一個元素從而給它一個特殊的外觀,比如標題欄。

JavaScript 組件是以 Angular directives 的形式在技術上被實現的並以 HTML 元素的形式在應用程序中被使用。 它們帶來了一組豐富的功能。 這通常包括用戶與它或應用程序進行交互或以其它方式管理該組件的能力。 比如選項卡,它可以基於用戶的選擇讓內容顯示或者隱藏。

在本篇教程中,我們將著重於一些JavaScript組件。 在本系列的後續教程中,我們會詳細講解 CSS 組件。

有時候,Ionic 會以 CSS 和 JavaScript 組件同時存在的形式去實現一個組件,比如選項卡組件。 這意味著你來決定用哪一個。 我一般建議選用以 JavaScript 實現的組件。 在大多數的情況下,使用 JavaScript 組件的代價是可以忽略不計的,並且我相信它們使你的代碼更易於使用。

源文件

在本教程中,我們將從頭創建一個應用程序並且我們將在本系列的以後篇幅中繼續改善這個應用程序。 這個應用程序的假設是創建一個提供城市資訊的應用程序,它可以為用戶提供有關本地設施的資訊,比如圖書館和公園。

在此教程中,我們從創建一個應用程序開始,此應用程序可顯示一個Chicago內公園的列表,並使用無限滾動保持加載盡可能多的結果。 我們將在以後的教程中擴展此應用程序的功能集。

我已經創建了一個提供此應用程序所需資訊的 API。 此 API 基於Google Maps API。 你可以自己運行這個 API,但是它需要從Google得到一個定制的API密匙,操作指南能在 API 項目中找到。 如果在使用提供的API中遇到問題,比如有人濫用了API而超出此API的使用限數,只要運行你自己的API就能解決這個問題。

你可以在Heroku上預覽可運行的程序,在GitHub上查看完整的項目。 但我鼓勵你跟誰我一起來創建這個程序。

1. 設置項目

首先,你需要啟動一個新項目。 我們可以通過運行下面的命令來啟動一個新項目:

這會下載一個啟動包, 此啟動包含有一個空的Ionic模版可讓我們開始開始創建(專為我的書Ionic in Action創建)。 進入目錄,cd civinfo, 運行ionic serve

你現在可以在http://localhost:8100(或者在Ionic設定的端口上)預覽一個空白的程序。 我建議打開瀏覽器的開發者工具以確認你能看見一個空白的屏幕。 是的,它應該是一個白屏。 我也建議使用Chrome的設備模擬器來預覽你的程序。

2.設置基本導航組件

導航是非常重要的,所以我們應該從這裡開始設計我們的應用程序。 主要的導航組件有ionNavBarionNavView。 大多數的應用程序都有一個設計特徵,那就是有一個帶有不同標題和操作按鈕的導航欄,然後其餘部分專門留給當前視圖的內容。

ionNavBarionNavView組件有些內置的智能可幫助我們提供那些功能。 在最後,我們的應用程序將會有幾個導航路徑,但在此教程中我們只創建一個。

Ionic在底層使用UI Router管理導航和路由。 如果你熟悉它你就會在Ionic裡認出它。 這裡面有很多細微的差別,但我們在此教程中保持簡單。 最普通和簡單的用法就是把你應用程序裡每一個不同的頁面定義成一個狀態,這是用Ionic/UI Router的方式去定義一個特別的視圖。

為了讓我們開始使用UI Router,我們首先在www/index.html加入兩個導航組件,就像你在下面看到的,把它們放進正文中。

一旦你對index.html加點代碼,你可以重載應用程序並且你應該看到在應用程序的頂部會出現一個綠色的條欄。

App Showing Just the Navigation Bar Which Is Green

你已經定義了一個ionNavBar組件,此組件會自動出現在屏幕頂端。 稍後,當我們創建單獨的views時,這些views將能夠通過一個標題和額外的按鈕顯示。 它足夠聰明知道那個導航欄在不同設備裡應該有多高。 當導航欄的高度在不同平台下不一致時, 這會非常有用。 此導航欄會被賦於一個bar-balanced的CSS類從而顯示綠色。

然後,會有個ionNavView,這是渲染每個view內容的位置標記。 一旦我們定義了一個view,它將會在這裡渲染生成的標記,並且它會自動調整利用在導航欄被安置後剩下的可用空間。

導航欄組件是JavaScript組件的例子(也被稱為Angular指令)。 它們看上去就像定制的HTML標籤,當它們在一起使用時,它們會足夠聰明地去保持標題欄與當前的view同步,並基於用戶的導航選擇渲染正確的內容。 去看它在實際中的運用,不過,我們需要加一些狀態。 讓我們通過建立第一個狀態去顯示一個公園目錄開始。

3. 添加公園目錄view

此應用程序的主要目的是展示一個有關市民資源的目錄。 起初, 這將是一個公園的目錄,但我們將會對它擴展成一個包括其它類型的資源,比如圖書館。 我們想在這個view中納入一些特性:

  • 更新導航欄的標題
  • 使用API​​去導入一個公園目錄
  • 顯示一個適合手機格式的目錄
  • 允許加載更多的東西如果滾動到目錄底部,使用無線滾動
  • 顯示每個目錄條的圖片

步驟 1:設置地點狀態,控制器,和模版

現在我們針對此view有一些目標,讓我們開始添加我們的JavaScript文件,它們將會與此view註冊。 在www/views/places/目錄下建立一個新的places.js文件,並且加入以下代碼:

我們使用$stateProvider.state()函數為UI Router聲明一個新的state 函數。 這個只可在Angular的angular.config()函數內被配製的 函數。 當你聲明一個state,你首先對route傳遞一個字符串,在本例中如places。 然後你將傳遞一個帶有不同屬性的對象,此對象定義state,比如一個URL, 一個控制器,和一個模版。 想了解所有可能的配置選項,你可以看一下UI Router文檔

我們已經聲明了一個新的state,命名它為places,賦予它一個/places的路徑URL,用controller as命名一個controller,並且加載一個templateUrl。 這是相當普遍的state定義並且你會看到它與其它state以相同的方式使用。 在這裡被聲明的控制器沒有任何內容,但很快我們將會加點東西進去。

模版是view的一個重要部分,是用來描述view可視的方面。 大多數view的邏輯和行為將會在控制器和模板中被管理。 我們的state宣稱我們想為模板加載一個HTML文件,但我們還沒有創建這個文件。 讓我們在www/views/places/目錄下創建一個新的places.html文件,並且加入以下代碼。

到目前為止我們已經在這個模板中聲明了ionViewionContent組件。 ionView組件是一個你可以安置一個模板的包裹,這個模板就是你之前聲明的想要被載入進ionNavView組件的那個模板。 view-title屬性也是用來傳遞導航欄應該顯示的標題。

ionContent組件是一個有用的內容的包裝,它有助於確保view的內容可以佔據所有可用的屏幕空間,幫助管理頁面滾動,並能使其它不太常用的行為顯而易見。 當此view被加載時,你將看見導航欄標題顯示的是“Local Parks”。

現在我們需要確認應用程序通過在index.html裡引用place.js去加載腳本運行。 我建議就在</head>標籤之前引用。

你可以打開應用程序,但你還看不到這個view。 要看這個view,請導航到http://localhost:8100/#/places。 與state定義相對應的URL能被用來導航到一個應用程序的路徑。 應用程序應該如下圖,標題為"Local Parks"。

App Places View Showing Title In Navigation Bar

這並不能讓人興奮,但這代表了最基本的view,你可能在大部分的時間都會用到。 現在讓我們加載數據並在屏幕上顯示它們。

步驟 2: 載入數據

在我們能夠做更多其它事情之前,我們需要載入一些數據。 我們需要添加一個Angular服務,用來幫助我們管理物理位置。 在一篇未來的教程中,一個用戶的所在地將會被設備檢測到。 在那之前,我們將手動把這個地點設為Chicago,這是我最喜歡的城市之一。

打開www/js/app.js並且在此文件的最後加入下面的服務。 它應該跟在angular.module中現有方法形成鏈接。

這是一個Angular服務,此服務返回一個對象,此對象與Google Maps API有關Chicago的返回數據匹配。 我們現在擁有了地理位置的細節,那麼我們就能夠載入公園的數據了。

下面我們將更新controller,從API中載入目錄。 為簡單起見 我在controller中使用$http服務載入數據。 最佳實踐則是把它拿出來放入一個服務中。 再次打開www/views/places/places.js並且這樣更新controller。

這個controller有一個vm.load()方法,用來執行HTTP請求和在vm.places中存儲請求的結果。 當你保存並運行以上代碼,你能在瀏覽器的開發者工具中看見這個HTTP請求的執行。 即使你對Angular並不陌生,你也許也看不懂這種在vm變量中存儲數據的確切方法。 如有需要,我建議去回顧一下John Papa的文章,關於為什麼這是一個被建議的方法。

為了顯示數據,我們也需要去更新模板和遍歷所有的公園列表。 打開www/views/places/places.html並且更新它如下。

在模板中,我們使用ionListionItem組件。 ionList組件是最有用的組件之一,因為列表目錄在手機中是非常常見的設計選擇(由於小尺寸屏幕)和在縱向顯示中的典型應用。 就像一個HTML的列表目錄使用ulliionList可包含任何數量的ionItem組件。

目錄列表能採用一些不同的顯示風格,在這個例子中目錄列表的個體通過對ionItem聲明一個item-avatar層疊樣式類在左邊顯示一個圖像。 同樣的方法可以在即時通信應用程序中被使用,你有一個帶個人頭像的對話目錄列表。

ionItem裡,你顯示名字和地址。 默認的風格是使用CSS自動砍去任何溢出邊界的文本,使目錄列表個體保持一樣的高度。

App Showing All Items In a List

我們已經載入了一個公園的目錄列表,並使用ionListionItem把它們顯示為一個目錄列表。 我們能再往前進一步去使用一個無限滾動,當用戶滾動到目錄列表尾部時加載額外的結果(如果它們存在)。

步驟 3: 對目錄列表添加無限滾動

我們可以使用ionInfiniteScroll組件讓目錄列表基於滾動至底部自動加載額外的內容。 此組件應放置在一個目錄列表的最後,監視著當用戶滾動到目錄列表最後,然後調用一個能加載額外內容的函數。 它也有一個內建的載入指示動畫,用來表示更多的內容將被加載。 當加載結束,此載入指示動畫將被隱藏。

為了讓這個能工作,我們的API也不得不支持分頁。 在這種情況下,Google Maps API提供一個訪問令牌,它必須被提交給Google Maps API去加載下一組內容。 我們需要更新controller去管理這個邏輯,所以讓我們開始更新www/views/places/places.js如下。

我們已經添加了一個新屬性,vm.canLoad,這是一個布爾變量代表是否有額外的內容可以加載。 默認的是true。 在一個請求被返回之前,我們不知道是否有額外的內容。

vm.load()函數被更新附帶一個訪問令牌,如果有的話。 響應處理程序現在將結果連接成陣列。 這意味著內容的第二個頁面在第一個頁面之後被加載。 在任何時候如果有更多的內容能被加載,Google Maps API將返回一個next_page_token。 如果那個屬性不見了,我們可以假設沒有更多的內容可被加載,並且vm.canLoad被設為false。 無限滾動組件使用這個值去確定何時停止加載更多的內容。

最後的變化就是這行額外的代碼$scope.$broadcast('scroll.infiniteScrollComplete')。無限滾動組件不知道HTTP請求何時完成或到底什麼時候它能安全地禁止加載符號。 因此,組件將偵聽事件以更新自己。 在這個情況下,scroll.infiniteScrollComplete事件告知組件停止加載動畫,並且繼續監測用戶是否滾動目錄列表至底部。

最後要做的是在模板中起用它。 打開www/views/places/places.html並且在ionList的最後和ionContent組件中間添加下面的代碼。

無限滾動組件現在在你的模板中被啟用了。 它開始監測何時組件是可見的,這也在加載時被觸發因為沒有什麼是可見的,然後無限滾動組件可見。 它調用在on-infinite中被聲明的函數一次當它變的可見時(這裡它是vm.load())並且它會在滾動完成事件已被觸發之前等待。

ngIf被用來禁止無限滾動只要API已經返回所有可能的結果。 在那種情況下,滾動至底部不再觸發更多資源的加載。

當使用無限滾動時,重要的事情是使用ngIf去禁止它。 它能容易地實現這樣的組件,就是它能試著加載,在加載,永遠不停。

這就完成了places view。 回頭看看,通過在模板中的12行HTML代碼和在controller中大約20行的JavaScript代碼,有相當多的功能被啟用了。

總結

我們已經看了一些個組件,這些組件你將會在你的Ionic應用程序中用到。

  • Ionic JavaScript組件是作為HMTL元素被使用的,並且能與HTML協調一致地工作。
  • Ionic有ionNavViewionNavBar去支持與不同views協調的導航。
  • ionListionItem組件讓創建手機友好的目錄變的容易。
  • ionInfiniteScroll組件自動地觸發一個去加載額外的東西並添加它們到目錄中的調用。

在下篇教程中我們將會看看Ionic提供的一些有用的服務,比如加載指示和popovers。

創建一個Ionic 模板並贏取$1000

如果你已經熟悉了Ionic框架,你也許會考慮進入Envato之最想要的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.