用 HTML、CSS 和 JavaScript 做移動應用，Ionic 是一個強大的工具。本教程將以完成一個實際的完整移動應用的過程為例，講授 ionic 的主要特性。最終，你將很好地掌握 ionic，從而構建漂亮而功能豐富的APP。
Ionic 是基於 Angular 框架的，本教程針對熟悉 Angular 並且有一定 Web 應用開發基礎的人員。如果你需要了解Angular相關知識，推薦你閱讀Todd Motto的文章 《AngularJS Tutorial: A Comprehensive 10,000 Word Guide》，該文章假設讀者已有NodeJS的相關知識。
在本教程中你將會學習如何構建一個股票報價應用。你可以在 這裡預覽完整地應用，並且可以在 gnomeontherun/ionic-definitive-guide 看到整個專案的原始碼。你可以通過改變瀏覽器的大小或者使用 Chrome 瀏覽器的 模擬裝置特性 提前看看這個應用在移動裝置上的表現。
Ionic，期盼已久的混合應用開發SDK
Ionic 是用來構建使用 HTML、CSS 和 JavaScript 開發的 混合應用 的，而不是原生語言（安卓使用Java語言，iOS可用Swift語言）。開發原生應用的時候，可以 使用帶有介面元件的 SDK，比如 標籤頁 和 複合列表。這些都是使用移動應用熟悉的介面控制元件，而 Ionic 正提供了一整套控制元件去構建混合移動應用。
然而，Ionic絕不僅僅只是一些介面元件。它還：
- 提供強大的命令列工具去管理專案。
- 通過使用 SASS 技術，便捷地定製化使用者介面。
- 由專業團隊發起和維護，有強大的社群支援。
- 整合了靈活的“ ions ”結構（額外的元件和功能）。
- 包含一整套圖示。
另外，Ionic 有一整個完整的服務平臺來支援移動應用的開發，比如 Creator 提供了視覺化拖拽/拖放設計模式，View可以釋出APP預覽/測試版本給大眾，Push 可以十分簡便的新增推送訊息通知。最近，Ionic增加了 Deploy 和Analytics，目前還在內部測試階段。你完全可以認為 Ionic 一個能夠提供給 APP 開發人員完整服務功能的平臺。
安裝 Ionic
首先，我們需要安裝 Ionic。在本教程中，我們將會在瀏覽器裡預覽，而不是在移動裝置上（不過你可以根據 Ionic 開發文件 上的詳細步驟，在移動裝置上執行程式）。在安裝Ionic之前，你的系統需要安裝 Node。（注意：io.js 可能執行不正確）。在命令列終端執行以下命令：
|
1 |
$ npm install -g ionic |
這裡，Node 包管理器（ NPM ）會下載並安裝 Ionic 命令列工具。它是構建 Ionic 應用的基礎，並且我們後面還會用來建立、預覽、構建應用。現在，我們來瀏覽Ionic的幾個主要特性。
Ionic components & services
在構建我們自己的APP之前，我們將會快速瀏覽Ionic的主要特性。Inoic 提供了兩個主要特性：components 和 services。
Ionic Components
Components 是使用標籤和 CSS 類標識的使用者介面元素，比如標籤頁、標題欄、幻燈片、側滑選單等等。這些元件要麼是 CSS 類（比如 CSS 框架 Bootstrap ），要麼使用 Angular 指令實現。一些 CSS 元件（input、card、button）沒有提供額外的功能，但是 Ionic 提供了更好的樣式展現使其能在移動裝置上表現的更好。指令元件（sidemenu、list、slidebox）是可以像 HTML 標籤一樣使用的。
|
1 2 3 4 5 6 7 8 9 10 |
<-- Card: CSS Component Example --> <div> <div>Basic card!</div> </div> <!-- SlideBox: Directive Component Example --> <ion-slide-box slide-interval="10000" does-continue="true"> <ion-slide>Slide 1</ion-slide> <ion-slide>Slide 2</ion-slide> </ion-slide-box> |
在上面的兩個例子中，第一個是現在在很多 google 應用中可以看到的卡片效果。僅僅是用 CSS 類就可以將樣式做出效果。第二個是一個滑動框，用指令和 HTML 標籤配合實現。在側滑框的例子中還包括了一些屬性，比如slide-interval 指定了滑動框的配置（在這個例子中指定了每個滑動框展示的時間間隔）。
Services 是在 JavaScript 中宣告來操作使用者介面元素的，通過了 Angular 的 Service 結構來提供。通常用在控制器中，提供有顯示時間限制的介面元素（比如彈出視窗、彈出對話方塊、進度條）。就和 Angular 的 services 一樣，Ionic 的 services 全部以 $ 開頭，而且在下面的例子中，你可以看到 services 都是根據功能來準確地命名。
|
1 2 3 4 5 6 7 8 |
function Controller($scope, $ionicSlideBoxDelegate) { $scope.next = function() { $ionicSlideBoxDelegate.next(); } $scope.previous = function() { $ionicSlideBoxDelegate.previous(); } } |
在這個控制器中，作用域下有兩個方法使用 service 來控制滑動框（任何管理元件的 services 都叫做代理 services ）。這樣開發人員就可以讓任意的按鈕去更改滑動框中的內容，比如下面兩個按鈕。
|
1 2 |
<button ng-click="next()">Next</button> <button ng-click="previous()">Previous</button> |
其他的 services 可以用來建立一個新的視覺化的內容，比如載入提示框。這將在當前檢視中注入需要新增的內容以建立所需的效果，在這個例子中我們新增了一個覆蓋整個螢幕的載入提示資訊，並在2秒鐘之後自動隱藏。
|
1 2 3 4 5 6 7 8 |
function Controller($timeout, $ionicLoading) { $ionicLoading.show({ template: 'Loading' }); $timeout(function() { $ionicLoading.hide(); }, 2000); } |
現在，我們就來建立一個工程，然後動手實踐這些內容。如果任何時候你想檢視工程原始碼，都可以去 GitHub 上檢視gnomeontherun/ionic-definitive-guide。
新建一個Ionic工程
Let the fun begin! The first thing is to generate a new project. The Ionic CLI we installed before will help us do this.
讓我們愉快地開始吧！第一件事就是新建一個工程。我們之前安裝的 Ionic 命令列工具就可以派上用場了。
|
1 2 3 |
$ ionic start stocks https://github.com/ionic-in-action/starter $ cd stocks $ ionic serve |
這個命令可以建立一個空白的叫做 stocks 的 APP 工程，基於我在我的書 《動手學習Ionic》 中建立的 starter APP 工程。這個空白的 starter APP 對於新建工程是個理想的選擇。ionic serve 命令可以在瀏覽器中開啟剛剛新建的 app，但它僅僅是一個空白的頁面。不要擔心，我們現在就來把它補充完整。
安裝 Sass 做樣式
Ionic 一個十分有用的特性就是可以使用 Sass 定製化預設元件和預製顏色。官方推薦你以同樣地方式利用 Ionic 提供的變數和自動生成器寫你自己的樣式表。
新工程不會預設支援 Sass。執行一以下命令，可以讓工程支援 Sass。
|
1 |
$ ionic setup sass |
這行命令將會根據 scss/ionic.app.scss 檔案生成一個新的 CSS 檔案，放在 css/ionic.app.css。然後 index.html 會加重新生成的 CSS 檔案。最後，當你構建 app 的時候，它會使 Ionic 命令自動生成樣式檔案，所以你一定要記住這一點。
我們教程中的 app 需要一些樣式，所以你需要把 scss/ionic.app.scss 中內容改為以下內容。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 |
// Override variables $light: #eee; $lighter: #fff; $darker: #363636; $assertive: #B33F33; $balanced: #70AB23; $positive: #366091; // The path for our ionicons font files, relative to the built CSS in www/css $ionicons-font-path: "../lib/ionic/fonts" !default; // Include all of Ionic @import "www/lib/ionic/scss/ionic"; // Dark theme for backgrounds. .view, .pane, .modal { background: $darker; } // Style the form inside of the footer bar .bar-search { padding: 0; form { display: block; width: 100%; } .item { padding: 3.75px 10px; } } // Make the item-dark style default by extending it back on top of item .item { @extend .item-dark; } // .item-reorder .button.icon { color: $light; } // Make inputs nicer on dark .item-input { input { margin-right: 30px; padding-left: 5px; background: $darker; color: $light; } .input-label { color: $light; } } .item-input-wrapper { background: $darker; input { color: $lighter; } } // Make toggler nicer on dark .toggle .track { background-color: $dark; border-color: $darker; } .toggle input:checked + .track { background-color: $positive; border-color: $positive; } // Remove a bottom border .tabs-striped .tabs { border-bottom: 0; } // Allow the tabs to be as wide as needed .tab-item { max-width: none; } // Styles for the quote component .quote { background: $darker; padding: 5px; border-radius: 4px; display: block; position: absolute; top: 1px; right: 16px; text-align: center; width: 90px; height: 50px; color: $lighter; .spinner svg { margin-top: 6px; } &.positive { background: $balanced; color: $light; } &.negative { background: $assertive; color: $light; } .quote-change { font-size: 0.8em; color: $light; } } |
在這個樣式檔案最上面，是用自定義的顏色重寫了 Ionic 變數（我們的應用的不會出現和 Ionic 預設樣式一樣的顏色）。樣式檔案空白處都新增了註釋，當我們完成了這個 app，再回過頭來看會更容易。
這將會建立 app 全部的樣式檔案。儘管在專案任何階段都可以構建 Sass，但是最好在專案開始時就以這一步開始。接下來，將會開始建立起頁面導航的基礎。
新增 Ionic 的頁面導航元件
導航是所有 app 的核心，Ionic 提供了一些功能強大的 components 用來導航。在本例中，你將會使用到 ionTabs 和ionNavView components 去生成頁面底部的標籤頁，實現不同頁面的之間的導航。而 ionSideMenus component 通常用來展示一組可以導航的連結。
Ionic 使用了目前流行的 ui-router 專案做路由，它比 Angular 核心自帶的 ngRouter 功能更強大。Ionic 在 ui-router 基礎上封裝了一項增強功能，就是將其放入 Ionic 的 components 和 services 中。這決定了根據 states 確定路由的方式，它是一個在 app 中描述瞭如何將控制器、檢視、模板和一些其他細節聯絡以來的地方。這一點我們看過一些例子之後會更加清楚。
ionNavView component 通常位於 Ionic app 導航的中心位置，通過和一些其他元件配合工作，可以讓你手動直觀地實現導航。開啟 www/index.html 檔案，將 body 標籤下的內容修改為以下內容。
|
1 2 3 4 5 6 7 8 9 |
<body ng-app="App"> <!-- The ionNavBar updates the title and buttons as the application state changes --> <ion-nav-bar> <!-- The ionNavBackButton knows when to show or hide based on current state --> <ion-nav-back-button></ion-nav-back-button> </ion-nav-bar> <!-- Primary ionNavView which will load the views --> <ion-nav-view></ion-nav-view> </body> |
這裡我們看到了三個 components，ionNavView, ionNavBar 和 ionNavBackButton。ionNavBar 包含了頁面頂部內容，比如 ionNavBackButton 返回按鈕和 state 標題。導航欄在 app 中是很常見的，使用者在不同檢視間導航時，它能夠自動更新標題，並且在使用者可以返回歷史頁面的時候顯示返回按鈕。
現在如果你儲存了這些更改，返回看瀏覽器，會回看到一個藍色的導航條在頁面頂部。ionNavBar 預設是灰色的，但是我們通過增加 bar-positive 類選擇器，它採用了另一種顏色。這裡有一系列預製顏色供不同的元件使用，並且你會在整個例子中看到它們。
這個例子目前還是不能使用的，因為我們還沒有定義任何 states 去實際載入內容（因此是一個空白頁面）。讓我們來建立第一個 state 吧！
新增標籤頁 state
現在我們來新增標籤頁 state 的模板。你需要定義模板，包含了標籤頁 component tabs.quotes 和tabs.portfolio 兩種 states。你需要建立檔案 www/views/tabs/tabs.html，並加入下面的程式碼。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!-- ionTabs wraps the ionTab directives --> <ion-tabs> <!-- Quotes tab --> <ion-tab title="Quotes" icon-on="ion-ios-pulse-strong" icon-off="ion-ios-pulse" ui-sref="tabs.quotes> <!-- ionNavView for the quotes tab --> <ion-nav-view name="quotes"></ion-nav-view> </ion-tab> <!-- Portfolio tab --> <ion-tab title="Portfolio" icon-on="ion-ios-paper" icon-off="ion-ios-paper-outline" ui-sref="tabs.portfolio"> <!-- ionNavView for the portfolio tab --> <ion-nav-view name="portfolio"></ion-nav-view> </ion-tab> </ion-tabs> |
這裡的 ionTabs 包括兩個 ionTab components，這樣將會顯示兩個標籤。屬性宣告瞭當前tab頁面展示選中和不選中的圖示樣式，ui-sref 屬性表示它將連結到某個頁面。每個 ionTab 裡包含了一個 ionNavView component，它必須有名字。只可以有一個 ionNavView 可以沒有名字，他就是在 index.html 中的那個（預設展示的）。
接下來，當你建立完標籤，就需要定義 states 分別去匹配這幾個頁面。這樣做可以使每一個標籤有自己獨立的導航歷史，這點在以後會有更進一步的展示。
現在來建立檔案 www/views/tabs/tabs.js，並加入下面的 JavaScript 程式碼，其中定義了 “tabs” state。
|
1 2 3 4 5 6 7 8 9 10 |
angular.module('App') .config(function($stateProvider) { $stateProvider .state('tabs', { abstract: true, url: '/tabs', templateUrl: 'views/tabs/tabs.html' }); }); |
tabs 是 abstract（抽象）的，就像你在標籤中看到的，它是唯一支援巢狀的ionNavView components。這意味著你永遠不能直接跳轉到 tabs state，但是事實上你一直在它的子頁面 state 下。換句話說，這表示你總是會直接跳轉到兩個tab頁下的某一個，因為只有選中某個導航標籤才是有意義的。
可是到目前為止，螢幕上還是空白的。記住，tabs state 設定為 abstract，所以只有當它導航至子頁面 state 中你才能看到介面。這意味著下一步我們要建立第一個子頁面 state，那麼我們就可以看到tab頁面和一些非常有意思的事情發生了。
新增services
但是，等等！你需要一些 Angular services 知識來幫助管理這個 app，而這裡我不打算花太多時間在這上面。你可以瀏覽註釋看它們是怎麼工作的，從事 Angular 的開發人員應該是非常熟悉的。第一個 service 是用來管理 localStorage 中的資料，第二個 service 是用來從雅虎金融載入股票報價資料的。如果你不熟悉 Angular 或怎樣建立 service ，最好花一些時間看看 Angular service 的文件說明。
首先建立檔案 www/js/localstorage.js，並新增以下程式碼。一定要在 index.html 引用這個檔案。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
angular.module('App') .factory('LocalStorageService', function() { // Helper methods to manage an array of data through localstorage return { // This pulls out an item from localstorage and tries to parse it as JSON strings get: function LocalStorageServiceGet(key, defaultValue) { var stored = localStorage.getItem(key); try { stored = angular.fromJson(stored); } catch(error) { stored = null; } if (defaultValue && stored === null) { stored = defaultValue; } return stored; }, // This stores data into localstorage, but converts values to a JSON string first update: function LocalStorageServiceUpdate(key, value) { if (value) { localStorage.setItem(key, angular.toJson(value)); } }, // This will remove a key from localstorage clear: function LocalStorageServiceClear(key) { localStorage.removeItem(key); } }; }); |
現在來建立另一個檔案 www/js/quotes.js，並新增以下程式碼。再一次宣告，一定要在 index.html 檔案中對這個檔案新增引用。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
angular.module('App') .factory('QuotesService', function($q, $http) { // Create a quotes service to simplify how to load data from Yahoo Finance var QuotesService = {}; QuotesService.get = function(symbols) { // Convert the symbols array into the format required for YQL symbols = symbols.map(function(symbol) { return "'" + symbol.toUpperCase() + "'"; }); // Create a new deferred object var defer = $q.defer(); // Make the http request $http.get('https://query.yahooapis.com/v1/public/yql?q=select * from yahoo.finance.quotes where symbol in (' + symbols.join(',') + ')&format=json&env=http://datatables.org/alltables.env').success(function(quotes) { // The API is funny, if only one result is returned it is an object, multiple results are an array. This forces it to be an array for consistency if (quotes.query.count === 1) { quotes.query.results.quote = [quotes.query.results.quote]; } // Resolve the promise with the data defer.resolve(quotes.query.results.quote); }).error(function(error) { // If an error occurs, reject the promise with the error defer.reject(error); }); // Return the promise return defer.promise; }; return QuotesService; }); |
好了，現在是時候建立使用了上面的兩個 services 的 quotes state 了。
新增 quotes state
是時候更進一步了。quotes 頁面用來展示你要關注的股票列表，顯示當前報價的細節，查詢別的股票報價並新增他們，還可以進行排序。這看上去有很多複雜的功能，但是隻需要 30 行 Html 程式碼和 70 行 JavaScript 程式碼。
首先你需要新增這個 state 下的所有程式碼，然後我們回過頭來分別看看每個部分是如何工作的。建立一個新檔案 www/views/quotes/quotes.html， 新增以下的程式碼。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
<ion-view view-title="Market Quotes"> <!-- Add a nav button to the primary location --> <ion-nav-buttons side="primary"> <button ng-click="state.reorder = !state.reorder">Reorder</button> </ion-nav-buttons> <!-- ionContent is used to wrap scrollable content --> <ion-content> <!-- ionRefresher activates when the user pulls down and calls getQuotes() --> <ion-refresher on-refresh="getQuotes()"></ion-refresher> <!-- ionList allows us to make a complex list with swipe buttons, reordering, and more --> <ion-list show-reorder="state.reorder"> <!-- Repeat over each quote, to display the current details and name --> <ion-item ng-repeat="stock in quotes"> <div ng-class="quoteClass(stock)"> <div>{{stock.LastTradePriceOnly | currency:'$'}}</div> <div>{{stock.Change}}</div> </div> {{stock.symbol}} <!-- Option and reorder button for list items --> <ion-option-button ng-click="remove($index)">Remove</ion-option-button> </ion-item> </ion-list> </ion-content> <!-- Footer sits above the tabs and sticks --> <ion-footer-bar> <!-- Form to input a quote to add to the list --> <form ng-submit="add()"> <div> <label> <input type="search" placeholder="Symbol" ng-model="form.query"> </label> <input type="submit" value="Add" /> </div> </form> </ion-footer-bar> </ion-view> |
現在建立檔案 www/views/quotes/quotes.js 並且新增以下 JavaScript 程式碼。同樣地，要在 www/index.html 檔案中加入引用的 script 標籤。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 |
angular.module('App') .config(function($stateProvider) { // Declare the state for the quotes, with the template and controller $stateProvider .state('tabs.quotes', { url: '/quotes', views: { quotes: { controller: 'QuotesController', templateUrl: 'views/quotes/quotes.html' } } }); }) .controller('QuotesController', function($scope, $ionicPopup, $ionicLoading, LocalStorageService, QuotesService) { // Get symbols from localstorage, set default values $scope.symbols = LocalStorageService.get('quotes', ['YHOO', 'AAPL', 'GOOG', 'MSFT', 'FB', 'TWTR']); $scope.form = { query: '' }; $scope.state = { reorder: false }; // Function to update the symbols in localstorage function updateSymbols() { var symbols = []; angular.forEach($scope.quotes, function(stock) { symbols.push(stock.Symbol); }); $scope.symbols = symbols; LocalStorageService.update('quotes', symbols); } // Method to handle reordering of items in the list $scope.reorder = function(stock, $fromIndex, $toIndex) { $scope.quotes.splice($fromIndex, 1); $scope.quotes.splice($toIndex, 0, stock); updateSymbols(); }; // Method to load quotes, or show an alert on error, and finally close the loader $scope.getQuotes = function() { QuotesService.get($scope.symbols).then(function(quotes) { $scope.quotes = quotes; }, function(error) { $ionicPopup.alert({ template: 'Could not load quotes right now. Please try again later.' }); }).finally(function() { $ionicLoading.hide(); $scope.$broadcast('scroll.refreshComplete'); }); }; // Method to load a quote's data and add it to the list, or show alert for not found $scope.add = function() { if ($scope.form.query) { QuotesService.get([$scope.form.query]).then(function(results) { if (results[0].Name) { $scope.symbols.push($scope.form.query); $scope.quotes.push(results[0]); $scope.form.query = ''; updateSymbols(); } else { $ionicPopup.alert({ title: 'Could not locate symbol.' }); } }); } }; // Method to remove a quote from the list $scope.remove = function($index) { $scope.symbols.splice($index, 1); $scope.quotes.splice($index, 1); updateSymbols(); }; // Method to give a class based on the quote price vs closing $scope.quoteClass = function(quote) { if (quote.PreviousClose < quote.LastTradePriceOnly) { return 'positive'; } if (quote.PreviousClose > quote.LastTradePriceOnly) { return 'negative'; } return ''; }; // Start by showing the loader the first time, and request the quotes $ionicLoading.show(); $scope.getQuotes(); }); |
現在，如果 ionic serve 還在執行，那麼剛才修改的檔案在瀏覽器中已經可以看到效果了。在瀏覽器輸入http://localhost:8100/#/tabs/quote ，這個帶有股票報價列表的新頁面就會顯示出來。
如果你看了控制器的程式碼，會看到裡面有很多方法，你可能在其他任何 Angular app 中看到，比如 quoteClass() 這個方法決定了報價框的顏色是綠色還是紅色的，getQuotes() 這個方法載入了資料進來。一些方法被 Ionic components 呼叫，比如 Ionic 列表 component 的 remove() 和 reorder()。
現在，我們一起來看看讓這個頁面工作起來的 Ionic components 和 service。
Ionic 檢視，導航按鈕和內容 Components
檢視的基礎就是可以包含模板的 ionView component。它的 view-title 屬性可以頁面標題欄上新增標題，其他的屬性用來控制標題欄的其他的屬性（比如檢視是否需要快取，是否需要顯示返回按鈕）。每個檢視都需要 ionView 元件包含其內容。
ionView 裡包含了有 ionNavButtons component。當這個頁面顯示的時候，就會在標題欄上新增一些按鈕，並且你可以定義它在標題欄的哪邊顯示。在這個例子中，使用了 side="primary" 讓按鈕放在與原生平臺相應地的位置。在 iOS 平臺就是在左邊，但是在 Android 平臺就是在右邊，這也證實了 Ionic 的許多特性是平臺相關的。這個作用於列表 component 的按鈕使用了 ngClick 指令去執行表示式。
你可以看到 ionContent component。它除了可以包含內容在裡面，還有以下幾個優點。
- 它可以根據可用的空間的大小排列內容。
- 如果要顯示的內容高度超過了可視範圍，它自動保證內容可以在垂直方向上滾動檢視。
- 它可以監視其他控制元件的存在，比如標題欄、標籤頁、頁底，並且可以根據這些控制元件重新排列要顯示的內容。
- 它允許 Ionic 重新整理 component 去完美的展示內容。
- 它是可配置的，允許你去設定一些屬性值，比如內邊距、滾動方向或是否禁止滾動。
在大部分頁面中，你需要使用 ionContent 包含你的內容，並且大部分時候只需要預設的設定。
這些 components 協同工作，為我們的頁面提供主要的容器結構，在後面的檢視中你還會看到他們，因為他們相當常見。
Ionic 載入 service
Ionic 載入 service 用一個可以配置載入訊息的介面覆蓋了整個螢幕，直到頁面內容載入完才消失，所以這保證了直到頁面載入完使用者才可以看到。從可用性的角度來說，在只有資料載入完頁面才可以使用的情況下，這中做法是必要的。在這個例子中，只有 app 第一次載入資料的時候才會出現載入頁面。
當控制器第一次載入的時候，$ionicLoading.show() 方法被呼叫。它觸發了載入進度條出現，一直到$ionicLoading.hide() 這個方法被呼叫載入進度條才會消失。就在 show() 方法後面，控制器呼叫了$scope.getQuotes() 來載入資料。你可以看到在資料請求完成之後， hide() 方法在 finally() 的 promise 中被呼叫，以隱藏載入進度條。
你可能會想，載入顯示器應該在資料載入完之後自動隱藏起來，但是載入顯示器需要你去呼叫 hide() 方法，這是因為它並不能準確地知道什麼時候頁面需要的一切都準備好去顯示了。載入顯示器就像是一個獨行俠，僅僅表示這裡有一個在螢幕上顯示的載入提示。即便你多次呼叫 show() 方法，也只需要呼叫一次 hide() 來隱藏它。
Ionic 重新整理 Component
Ionic Refresher 是一個在頁面內部可以容使用者下拉重新整理整個頁面的 component。當使用者下拉時，一個向下箭頭出現，如果你下拉足夠距離再放開的話，就會觸發重新整理。你可能會在很多app中看到這樣的效果以重新載入資料，比如一個顯示運動得分的應用，或者（像本例一樣）股票報價。使用下拉手勢而不是一個按鈕去重新整理是一種常見的設計模式。
這個 component 是一個叫做 ionRefresher 的指令，它只有一個屬性 on-refresh 可以接受一個表示式，當使用者釋放下拉的時候執行。在這個例子中，它呼叫了 getQuotes() 方法，去載入資料並更新檢視。同樣地在載入的 service 時，我們使用 finally() 回撥去廣播事件 $scope.$broadcast('scroll.refreshComplete'); 這將會通知 Refersher ，重新載入已經完成了，要隱藏自己。
讓重新整理 component 正常工作的關鍵是要確保有一個獨立的作用域方法去（重新）載入檢視中的資料。因為 Refresher 是一個 component 而不是 service（像載入器那樣），他會監聽 scroll.refreshComplete 事件從而得知什麼時候應該隱藏。如果你忘記了呼叫，那重新整理控制元件將會一直顯示。
Ionic Popup service
Ionic Popup（彈出視窗） service 用於展示資訊或者和使用者互動。他將會暫停當前的檢視，顯示一個帶有提示資訊和按鈕的對話方塊。這裡有幾種型別的彈出框，你也可以構建自己的彈出框。
- 警告：顯示提示資訊和關閉提示的按鈕。用來提示使用者一些資訊，比如錯誤提示。
- 確認框：顯示提示資訊和確認、取消兩個按鈕。用於確認一個行為，比如是否刪除一個列表項。
- 提示框：顯示提示資訊、輸入框、確定和取消按鈕。用於當你需要更多地細節資訊的時候，比如密碼。
Popup service 用 $ionicPopup 顯示，當你建立某種型別的彈出框時，它會返回一個 promise。你一旦建立一個新彈出框，它就會顯示並且當它的某個按鈕被選擇的時候，你需要用 promise 模式的 API 去處理結果。也可以在程式中呼叫close() 方法來關閉彈出框。
在這個例子中，Popup service 用於提示使用者載入資料時出錯了。在 getQuotes() 這個方法中，如果請求的 promise 返回結果是錯誤，它就會警告這裡不能夠載入股票資訊。同樣地，當使用者檢視去載入不存在的股票報價時，它會警告該程式碼沒有找到。在這個例子中，你不需要等待彈出框的 promise 被執行了（警告框被關閉的時候），它僅僅是被關閉了，並且使用者可以繼續使用這個應用。
根據可用性的觀點，彈出框很容易被濫用。很多你在 JavaScript 程式碼中看到的警告框或者確認框，他阻斷了介面並且需要使用者互動使其繼續下去。應該限制在一些情景下使用彈出框，當使用者需要確認或者回應彈出框以繼續使用 app。你應該可以指出，這個例子可以使用不同的方法去給予使用者反饋。
Ionic List Component
Ionic List（列表） Component 是強大的用於介面顯示的 component，它實際上是一些不同的指令共同起作用的結果。由於移動裝置空間有限，列表是一種常見且整齊的展示內容的方式。 Android 和 iOS 已經介紹了很多使用者已經習慣使用的列表特性，比如可以給列表項排序，滑動顯示更多按鈕，以及刪除列表項。在應用程式中，大量的資料都是通過列表顯示的，比如新聞文章列表、郵件列表、軌跡定位列表等等。
在這個應用中，列表 component 支援排序和刪除列表項。ionList 控制元件包括了若干個 ionItem 控制元件。 ionItems 使用了 ngRepeat 指令，它會顯示儲存的全部股票報價（或者預設是從 localStorage service 中獲取的列表）。然後，每個 ionItem 都會顯示出一支股票報價和價格。
當 ionList 處於重新排序的模式下，有幾個布林型的的屬性值可以控制它的行為。ionItem 包含了一個ionReorderButton 按鈕去增強這個功能。當 state.reorder model 為真時，排序按鈕（有三個橫線排列起來的）將會滑入列表並且你可以選中並拖拽某個列表項。當你釋放列表項的時候，它會根據屬性 on-reorder 的定義去呼叫reorder() 方法。它有三個引數，當前列表項、列表項原來的序列號和排序後列表項的序列號。reorder() 方法得到這些值然後移動資料項，給 $scope.quote 陣列中排好序。
最後要說的一個特性就是 ionOptionButton，當使用者左劃列表項時，在列表上會出現的一個按鈕。這個選項按鈕被設計成一個刪除按鈕的樣式，所以如果使用者點選了它，它會呼叫 remove() 方法去刪除列表中的這一項。你也可以讓這個按鈕實現別的功能，比如編輯或者分享一個列表項。
Ionic List 是一個功能強大，對使用者友好的列表管理元件。使用它們是常事，我還是要提醒你不要過度濫用它。任何元素的集合都能夠以列表作為理想選擇。在文件中可以看到，Ionic 列表可以使用 Ionic 預設的 CSS 類設計成不同的樣式。一些公共的樣式包括旁邊有頭像或圖示的列表，像封面大圖那樣，或者把整個列表修改成卡片樣式的，就像 Google Now 和 Tinder 應用的風格一樣。
Ionic 底部工具欄和表單
Ionic 底部工具欄是在頁面底部顯示文字和簡單內容的一種方式。它自動顯示在其他控制元件的底部，比如我們之前討論過的ionContent。他確實需要正確地顯示在 ionContent 外面，就像 ionNavButtons 一樣。
應用中的底部工具欄有一個簡單的表單，包含了一些 Ionic 樣式（加上了一些 Sass 檔案中定義的外部使用者樣式）。表單樣式的設計並不是完全為了底部導航條，但是它只需要幾行樣式就可以清除掉。這裡的表單僅用了簡單的搜尋輸入框和一個按鈕，在提交表單的時候呼叫 add() 方法去嘗試檢視並且新增一個股票程式碼到當前列表。
新增 portfolio state
最後一個重要步驟就是新增另一個檢視去記錄你的投資組合。這樣你就可以得到你目前在某個價格下購買了多少股票的詳細資訊，和目前購買股票的回報率或損失率。這整個 state 大約有 60 行 HTML 和 100 行 JavaScript 程式碼。
建立一個新檔案 www/views/portfolio/portfolio.html 並且新增以下內容。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<ion-view view-title="My Portfolio"> <!-- Add buttons to both primary and secondary sides of the navbar --> <ion-nav-buttons side="primary"> <button ng-click="openModal()">Add</button> </ion-nav-buttons> <ion-nav-buttons side="secondary"> <button ng-click="state.remove = !state.remove">Edit</button> </ion-nav-buttons> <ion-content> <!-- Use a list to display the list of stocks in portfolio --> <ion-list show-delete="state.remove"> <!-- Repeat over each stock in the portfolio and display relevant data --> <ion-item ng-repeat="stock in portfolio"> {{stock.symbol}} ({{stock.quantity}} @ {{stock.price | currency}}) <div ng-class="quoteClass(stock)" ng-if="quotes[stock.symbol]"> <!-- These bindings calculate the current value and gain/loss of the stock --> <div>{{getCurrentValue(stock) | currency:'$'}}</div> <div>{{getChange(stock) | currency}}</div> </div> <!-- Use an ionSpinner to display while the stock price is loaded --> <div ng-if="!quotes[stock.symbol]"> <ion-spinner icon="lines"></ion-spinner> </div> <!-- Delete button allows the item to be removed --> <ion-delete-button ng-click="remove($index)"></ion-delete-button> </ion-item> </ion-list> </ion-content> </ion-view> |
建立一個新的檔案 www/views/portfolio/add-modal.html，並且新增以下程式碼。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<!-- Modals require a special ionModalView wrapper --> <ion-modal-view> <!-- Use Angular form to have automatic validation --> <form name="addQuote"> <!-- Add an ionHeaderBar with buttons and title --> <ion-header-bar> <button ng-click="closeModal()">Cancel</button> <h1>Add Stock</h1> <button ng-click="addStock(item)" ng-disabled="addQuote.$invalid">Save</button> </ion-header-bar> <ion-content> <!-- Use Ionic's CSS list and form classes to format forms --> <div> <label> <span>Symbol</span> <input type="text" autocorrect="off" autocapitalize="off" ng-model="item.symbol" required /> </label> <label> <span>Quantity</span> <input type="number" autocorrect="off" autocapitalize="off" ng-model="item.quantity" required /> </label> <label> <span>Price</span> <input type="number" autocorrect="off" autocapitalize="off" ng-model="item.price" required /> </label> </div> </ion-content> </form> </ion-modal-view> |
最後，建立檔案 www/views/portfolio/portfolio.js，然後加入以下程式碼。同樣要確保在 app 的 www/index.html 中引用了這個檔案。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 |
angular.module('App') .config(function($stateProvider) { // Declare the state for the portfolio, with the template and controller $stateProvider .state('tabs.portfolio', { url: '/portfolio', views: { portfolio: { controller: 'PortfolioController', templateUrl: 'views/portfolio/portfolio.html' } } }); }) .controller('PortfolioController', function($scope, $ionicModal, $ionicPopup, LocalStorageService, QuotesService) { // Create the portfolio model from localstorage, and other models $scope.portfolio = LocalStorageService.get('portfolio', []); $scope.item = {}; $scope.state = { remove: false }; // Private method to update the portfolio function updatePortfolio() { LocalStorageService.update('portfolio', $scope.portfolio); } // Method to get the latest quotes $scope.getQuotes = function() { var symbols = []; angular.forEach($scope.portfolio, function(stock) { if (symbols.indexOf(stock.symbol) < 0) { symbols.push(stock.symbol); } }); if (symbols.length) { QuotesService.get(symbols).then(function(quotes) { var items = {}; angular.forEach(quotes, function(quote) { items[quote.Symbol] = quote; }); $scope.quotes = items; }); } }; // Method to calculate the current value of the stocks $scope.getCurrentValue = function(stock) { return parseFloat($scope.quotes[stock.symbol].LastTradePriceOnly) * stock.quantity; }; // Method to calculate the change in value $scope.getChange = function(stock) { return $scope.getCurrentValue(stock) - stock.price * stock.quantity; }; // Method to determine if the stock has positive or negative return for background color $scope.quoteClass = function(stock) { if (!stock) { return ''; } var className = ''; var currentValue = $scope.getCurrentValue(stock); if (currentValue && currentValue > stock.price) { className = 'positive'; } else if (currentValue && currentValue < stock.price) { className = 'negative'; } return className; } // Create an Ionic modal instance for adding a new stock $ionicModal.fromTemplateUrl('views/portfolio/add-modal.html', { scope: $scope }).then(function(modal) { $scope.modal = modal; }); // Open the modal $scope.openModal = function() { $scope.modal.show(); }; // Close the modal and reset the model $scope.closeModal = function() { $scope.item = {}; $scope.modal.hide(); }; // Ensure the modal is completely destroyed after the scope is destroyed $scope.$on('$destroy', function() { $scope.modal.remove(); }); // Method to add a new stock purchase $scope.addStock = function(item) { $scope.state.remove = false; QuotesService.get([item.symbol]).then(function(quote) { if (quote[0].Name) { item.symbol = item.symbol.toUpperCase(); $scope.portfolio.push(item); updatePortfolio(); $scope.closeModal(); $scope.getQuotes(); } else { $ionicPopup.alert({ title: 'Could not find symbol.' }); } }); }; // Method to remove an item from the portfolio $scope.remove = function($index) { $scope.portfolio.splice($index, 1); updatePortfolio(); }; // Get the quotes on load $scope.getQuotes(); }); |
一旦這些檔案修改好了，確認命令 ionic serve 還在執行，在瀏覽器輸入 http://localhost:8100/#/tabs/portfolio就可以看到這個新的標籤頁。你也可以點選標籤上裡的 Portfolio 圖示導航到這個頁面。
這裡用到了一些上面講過的 Ionic 特性，比如 Ionic 彈出框。然而，這裡還用到了一些的特性，比如 Ionic Modal、Ionic Header Bar、Ionic Spinner 以及 Ionic 列表 component 的一些其他特性。
Ionic Modal Service
Ionic Modal 用來彈出覆蓋整個應用介面的頁面，通常用來作臨時的 state。他們被用來提供上下文相關的內容，而不擾亂原來的頁面。在傳統的桌面站點中，在專業可用性上 modals 遭人嚴重詬病，但是在移動應用中，它們功能更強，對使用者更加友好。modal 是一個完整地頁面，所以它可以包含表單中的任何東西，從可滾動的列表到一個視訊。
在這個例子中，$ionicModal service 基於載入的模板建立了一個 modal，它指向檔案 www/views/portfolio/add-modal.html （你也可以使用 fromTemplate() 去載入一個 html 字串作為模板，但是我並不建議你這麼做）。當控制器第一次被執行的時候，就會建立並載入 modal，但是它並不會馬上顯示出來。這裡是建立一個新的 modal 的程式碼片段。
|
1 2 3 4 5 |
$ionicModal.fromTemplateUrl('views/portfolio/add-modal.html', { scope: $scope }).then(function(modal) { $scope.modal = modal; }); |
$ionicModal service 會生成 modal，這個過程和給 app 註冊一個新的 state 非常像，除了 modal 並不是 app 路由的一部分。你也可以傳一個包含配置資訊的物件作為引數，在這個例子中，傳遞了{scope: $scope} ，它表示使用當前的狀態的作用域作為 modal 的作用域。根據模板建立一個 modal，會返回一個 promise 鏈式呼叫，當它載入模板的時候，他會返回一個 modal 例項，用於控制 modal（比如開啟和關閉）。
在 app 中定義了方法 openModal() 和 closeModal() 來開啟和關閉 modal 。portfolio 檢視包括了一個導航條按鈕，在 ngClick 事件裡呼叫了 openModal()，在 modal 檢視裡面，有一個取消按鈕，它會呼叫 closeModal()。如果一個使用者提交了表單新增了股票報價，並且找到了這個股票，也會呼叫 closeModal() 這個方法去隱藏 modal 檢視，返回 portfolio 頁面。
Ionic Modals 還需要對作用域下的 destroy 事件新增監聽，所以你也可以手動的刪除 modal。由於 modals 是手動建立的且不需要在 state provider 註冊，Ionic 並不知道什麼時候可以安全地從記憶體中刪除它。就像你在這裡看到的，這其實很容易做到。
|
1 2 3 |
$scope.$on('$destroy', function() { $scope.modal.remove(); }); |
我發現 Ionic Modal 在大多數移動裝置上是一個非常有用的工具。Modal 提供了一種不在滾屏上增加更多內容的方式，只展示用使用者操作相關的部分。如果增加列表項的表單沒有使用 modal 而是在 portfolio 檢視中，那麼它將會變得雜亂無章，所以 modal 在使用者只是要新增一個新專案的時候，提供了更好的使用者體驗。modals 從建立到銷燬確實都更多地設計和考慮。因為不可能直接導航到modal（至少如果沒有額外的使用者邏輯是做不到的），所以任何使用者可以直接導到航的任何頁面都可能不適合考慮使用 modal。
Ionic 頁首工具條 Component
Ionic 頁首工具條和底部工具條一樣，除了一點就像你知道的，它位於頁面頂部。通過 CSS 類預置的幾種不同的顏色可供選擇，這裡使用了 bar-balanced class，它通過應用的 Sass 樣式修改了預設的 CSS。由於 modal 是一個空白的覆蓋這個 APP 介面的深藍色頁面，導航欄不會顯示，需要你在頁首頂部的工具條新增按鈕。
Ionic Spinner Component
Ionic Spinner 是用來展示動態圖形的 Component，它表明你的應用這在做某件事，使用者需要等待這件事完成。使用動態圖形來提示比僅僅只是用 CSS 寫的旋轉圖示更人性化。這些 spinners（並不都是旋轉效果，所以可以這個名字起得並不恰當）可以是不同的樣式，Ionic 帶有十種不同的動畫。
在這個應用中，當報價在載入的時候，報價顯示的位置上是一個“線條”動畫。ngIf 去控制什麼時候顯示 spinner。
Ionic List Component 續篇
Ionic List component 同樣有刪除模式，和我們之前在 quotes state 看到的重新排序模式很像，但是這裡不是移動列表項而是刪除它們。根據你的應用的設計和需求，可以在用一個列表中同時使用刪除和排序模式。刪除模式在列表左邊滑出一個圖示去讓使用者快捷地刪除若干列表項。
ionList 根據 show-delete 屬性 為 true 或 false 去切換刪除模式。每個 ionItem 控制元件都有 ionDeleteButton元件，他是一個定義好的圖示，用 ngClick 指令呼叫在控制器中定義的 remove() 方法。
收尾
我們的應用還需要做一件事，一個預設的路由。現在如果你去 http://localhost:8100，它不會載入標籤頁和內容。這很容易補救，但是需要在 states 都新增後再實現。下面的程式碼片段應該加入你的 www/js/app.js 檔案中，這裡使用了$urlRouterProvider.otherwise() 方法去定義當它找不到路由的時候應該跳轉到的地方（在這個例子中預設的 / 路由沒有註冊）。
|
1 2 3 4 5 |
angular.module('App', ['ionic']) .config(function($urlRouterProvider) { $urlRouterProvider.otherwise('/tabs/quotes'); }) |
現在，如果你在 URL 裡沒有加任何路徑去訪問這個 app，它將會預設為你載入報價頁面。恭喜，你已經做好了一個功能相當豐富的移動應用，僅僅用了大約 120 行 HTML 和 200 行 JavaScript！誰能想到你如此容易的實現了這麼多功能？
深入理解 Ionic
我們已經按照步驟完成了示例的應用，學到了很多關於 Ionic 元件如何一起協同工作，僅僅使用 HTML、CSS、JavaScript 來建立一個美觀且功能強大的移動應用。你已經看到過了如何使用很多 components 和 service，比如，Ionic 列表、彈出框、Modals、導航條、內容、重新整理條以及其他。這個基礎對於你學習其他元件並深入到其他方面來說是十分有益的。
Ionic 文件 是檢視 components 和 services 如何工作的詳細資訊的最好的地方，沒有之一。 它同時也提供了一些基礎教程告訴你如何準備好你的開發環境，去構建並部署你的應用到虛擬機器或者真實裝置上。這樣，你可能會使用到Cordova ，並且需要花些時間理解它是如何工作的。你還可以在 Ionic 論壇 上花些功夫找到你的問題的答案。
如果你還想學習更多，我推薦你看看 Ionic in Action，這本書介紹了更多地細節資訊。它還提供了 Angular 基礎教程，有大量的例項介紹如何使用 Ionic 和 Cordova 外掛（通過 ngCordova ）、如何測試、還有如何正確構建應用並提交給應用商店。