《Ionic實戰：基於AngularJS的移動混合套用開發》是2016年7月電子工業出版社出版的圖書，作者是【美】Jeremy Wilken（傑里米 威爾肯斯）。
基本介紹
- 中文名：Ionic實戰：基於AngularJS的移動混合套用開發
- 作者：【美】Jeremy Wilken（傑里米 威爾肯斯）
- 譯者：奇舞團
- 出版時間：2016年7月
- 出版社：電子工業出版社
- 頁數：288 頁
- ISBN： 9787121292064
- 定價：75 元
- 開本：16 開
內容簡介,編輯推薦,內容提要,目錄,精彩節摘,前言,
內容簡介
Ionic是近幾年很火的一項跨平台開發技術。Ionic最大的亮點是集成了Angular和Cordova，對於有開發經驗的前端工程師來說上手難度大大降低，並且能直接使用現有的大量第三方庫和框架。《Ionic實戰：基於AngularJS的移動混合套用開發》是一本詳盡的Ionic實戰教程，不僅告訴你“怎么做”，還告訴你“為什麼”，這正是大部分入門書籍所欠缺的。
編輯推薦
只需掌握Web技術就能開發移動套用是不是很爽？有了Ionic之後，App的開發變得如此簡單：使用我們熟知的HTML、CSS和JavaScript技術就可以同時開發iOS和Android套用。
本書指導Web開發者使用Ionic和AngularJS創建移動套用。通過大量帶有注釋的示例，本書展示了如何使用移動UI組件，如何利用當前地點數據，如何集成相機等原生設備功能，如何添加手勢操作以及外部數據存儲等功能，讓我們能創建出更加原生的套用。本書還介紹了如何通過測試提升套用的穩定性以及在開發中定位錯誤。然後，使用命令行工具教會大家如何創建並將套用發布到套用商店。內容包括：
√ 使用HTML、JavaScript和CSS創建移動套用
√ 使用Ionic UI組件創建複雜互動
√ 一次編譯，“到處”發布（iOS和Android）
√ 使用原生設備硬體以及設備特定功能
√ 涵蓋完整的移動套用開發過程
讀者需要了解HTML、CSS和JavaScript知識；對於AngularJS，懂一些最好，不懂也沒有關係。
內容提要
Ionic是近幾年很火的一項跨平台開發技術。Ionic最大的亮點是集成了Angular和Cordova，對於有開發經驗的前端工程師來說上手難度大大降低，並且能直接使用現有的大量第三方庫和框架。《Ionic實戰：基於AngularJS的移動混合套用開發》是一本詳盡的Ionic實戰教程，不僅告訴你“怎么做”，還告訴你“為什麼”，這正是大部分入門書籍所欠缺的。
無論你是否有相關開發經驗，《Ionic實戰：基於AngularJS的移動混合套用開發》都可以幫助你快速掌握Ionic。
目錄
第1章 Ionic和Hybrid套用介紹 ...................................................................................... 1
1.1 Ionic是什麼 .......................................................................................................... 2
1.2 移動開發類型 ...................................................................................................... 3
1.2.1 原生移動套用 .......................................................................................... 4
1.2.2 移動端網站（Web 套用） ........................................................................ 5
1.2.3 Hybrid 套用 .............................................................................................. 6
1.3 理解Ionic技術棧 .................................................................................................. 7
1.3.1 Ionic ：用戶界面框架 .............................................................................. 8
1.3.2 Angular ：Web 套用框架 ....................................................................... 10
1.3.3 Cordova ：Hybrid 套用框架 .................................................................. 10
1.4 為什麼選擇Ionic ................................................................................................ 11
1.4.1 開發者為什麼要選擇Ionic ................................................................... 11
1.4.2 Ionic 的缺點 ........................................................................................... 12
1.5 使用Ionic構建套用的前提 ................................................................................ 13
1.5.1 掌握HTML、CSS 和JavaScript .......................................................... 13
1.5.2 掌握Web 套用和Angular ..................................................................... 13
1.5.3 擁有移動設備 ........................................................................................ 14
1.6 Ionic支持的移動設備和平台 ............................................................................ 14
1.6.1 蘋果的iOS ............................................................................................. 14
1.6.2 谷歌的Android ...................................................................................... 15
1.7 總結 .................................................................................................................... 16
第2章 配置開發環境 .................................................................................................. 17
2.1 快速上手 ............................................................................................................ 18
2.1.1 設定開發環境 ........................................................................................ 18
2.1.2 創建一個新項目 .................................................................................... 21
2.1.3 項目資料夾結構 .................................................................................... 22
2.1.4 在瀏覽器中預覽 .................................................................................... 23
2.2 配置預覽環境 .................................................................................................... 24
2.2.1 安裝平台工具 ........................................................................................ 25
2.2.2 配置模擬器 ............................................................................................ 26
2.2.3 配置連線設備 ........................................................................................ 31
2.2.4 給項目添加平台 .................................................................................... 32
2.2.5 在模擬器中預覽 .................................................................................... 32
2.2.6 在移動設備上預覽 ................................................................................ 33
2.3 總結 .................................................................................................................... 35
第3章 AngularJS必備知識 ......................................................................................... 37
3.1 AngularJS初探 ................................................................................................... 39
3.1.1 視圖和模板：描述內容 ........................................................................ 39
3.1.2 控制器、模型和作用域：管理數據和邏輯 ........................................ 41
3.1.3 Service ：可重用的對象和方法 ............................................................ 43
3.1.4 雙向數據綁定：在控制器和視圖之間共享數據 ................................ 43
3.2 配置本章的項目 ................................................................................................ 43
3.2.1 獲取項目檔案 ........................................................................................ 44
3.2.2 啟動開發伺服器 .................................................................................... 44
3.3 Angular套用基礎 ............................................................................................... 46
3.4 控制器：控制數據和業務邏輯 ........................................................................ 47
3.5 載入數據：使用控制器來載入數據並顯示在視圖中 .................................... 50
3.5.1 過濾器：轉換視圖中的數據 ................................................................ 53
3.6 處理選擇筆記的單擊事件 ................................................................................ 54
3.7 創建一個指令，用來解析Markdown格式的筆記 ........................................... 56
3.8 使用模型來管理內容編輯 ................................................................................ 59
3.9 保存和刪除筆記 ................................................................................................ 62
3.9.1 添加save() 方法 .................................................................................... 63
3.9.2 使用Angular 表單進行驗證 ................................................................. 64
3.9.3 添加和刪除方法 .................................................................................... 64
3.10 繼續學習Angular ............................................................................................. 65
3.11 挑戰................................................................................................................... 66
3.12 總結 .................................................................................................................. 66
第4章 Ionic導航和核心組件 ....................................................................................... 68
4.1 配置項目 ............................................................................................................ 70
4.1.1 創建一個新套用並手動添加代碼 ........................................................ 70
4.1.2 克隆完整版套用 .................................................................................... 70
4.2 配置套用導航 .................................................................................................... 70
4.2.1 設計良好的套用導航 ............................................................................ 72
4.2.2 使用狀態管理器來聲明套用視圖 ........................................................ 73
4.3 構建主視圖 ........................................................................................................ 77
4.3.1 創建內容容器 ........................................................................................ 77
4.3.2 使用CSS 組件並添加一個簡單的連結列表 ....................................... 78
4.3.3 給列表元素添加圖示 ............................................................................ 80
4.4 使用控制器和模型來開發預訂視圖 ................................................................ 81
4.5 把數據載入到天氣視圖中 ................................................................................ 85
4.5.1 給天氣視圖添加模板 ............................................................................ 86
4.5.2 創建天氣控制器載入外部數據 ............................................................ 87
4.5.3 給天氣視圖添加一個載入指示器 ........................................................ 89
4.6 在餐館視圖中使用卡片和無限滾動 ................................................................ 91
4.7 使用幻燈片組件來實現套用介紹 .................................................................... 94
4.8 挑戰 .................................................................................................................... 97
4.9 總結 .................................................................................................................... 98
第5章 選項卡、高級列表和表單組件 ......................................................................... 99
5.1 配置本章的項目 .............................................................................................. 101
5.1.1 手動創建項目並添加代碼 .................................................................. 101
5.1.2 克隆完整項目 ...................................................................................... 101
5.2 ionTabs：添加選項卡和導航 .......................................................................... 101
5.2.1 給套用添加選項卡容器和三個選項卡 .............................................. 103
5.3 給每個選項卡添加ionNavView ...................................................................... 104
5.4 載入並顯示當前的比特幣匯率 ...................................................................... 109
5.5 在同一個選項卡視圖中顯示貨幣細節 .......................................................... 114
5.6 刷新比特幣匯率並顯示幫助信息 .................................................................. 117
5.6.1 IonRefresher ：下拉刷新匯率 ............................................................. 118
5.6.2 $IonicPopover ：彈出幫助信息........................................................... 120
5.7 繪製歷史數據 .................................................................................................. 123
5.7.1 配置第三方庫 ...................................................................................... 123
5.7.2 歷史信息選項卡模板：使用Highcharts 和下拉列表來切換貨幣... 124
5.7.3 歷史信息選項卡控制器：載入數據並配置圖表 .............................. 125
5.8 貨幣選項卡：支持重新排序和開關 .............................................................. 129
5.8.1 IonReorderButton ：讓列表支持重新排序 ......................................... 129
5.8.2 IonToggle ：給列表元素添加開關 ...................................................... 131
5.9 挑戰 .................................................................................................................. 132
5.10 總結 ................................................................................................................ 132
第6章 使用Ionic開發一款天氣套用 ............................................................................ 134
6.1 項目配置 .......................................................................................................... 135
6.2 設定側滑選單和視圖 ...................................................................................... 136
6.3 地理位置搜尋 .................................................................................................. 139
6.4 增加設定視圖和數據的服務 .......................................................................... 142
6.4.1 創建收藏地點和設定服務 .................................................................. 142
6.4.2 在側滑選單列表中顯示收藏的地點 .................................................. 144
6.4.3 增加設定視圖模板 .............................................................................. 145
6.4.4 設定視圖控制器 .................................................................................. 147
6.5 設定天氣視圖 .................................................................................................. 148
6.5.1 獲取 Forecast.io API 密鑰 ................................................................... 148
6.5.2 使用 Ionic 命令行代理 ........................................................................ 149
6.5.3 增加天氣視圖的控制器和模板 .......................................................... 150
6.6 ionScroll：製作自定義滾動內容組件 ............................................................ 151
6.6.1 在頁面中使用 ionScroll ...................................................................... 152
6.6.2 為天氣數據查詢創建過濾器 .............................................................. 158
6.7 活動選單列表：顯示可選列表 ...................................................................... 160
6.8 ionModal：顯示日出和日落數據表 ............................................................... 162
6.8.1 配置彈窗 .............................................................................................. 164
6.8.2 數據列表集：讓日出和日落時間列表顯示得更快 .......................... 166
6.9 彈框：提示並確認收藏地點修改 .................................................................. 169
6.10 挑戰 ................................................................................................................ 171
6.11 總結................................................................................................................. 172
第7章 開發高級套用 ................................................................................................ 173
7.1 配置本章項目 .................................................................................................. 174
7.1.1 獲取代碼 .............................................................................................. 174
7.2 使用 Sass 自定義 Ionic 樣式 ........................................................................... 174
7.2.1 設定 Sass .............................................................................................. 175
7.2.2 使用 Sass 變數自定義 Ionic ................................................................ 176
7.2.3 使用 Sass 編寫樣式 ............................................................................. 177
7.3 如何支持聯網和離線模式 .............................................................................. 178
7.4 處理手勢事件 .................................................................................................. 180
7.4.1 使用 Ionic 事件指令監聽事件 ............................................................ 180
7.4.2 使用 $ionicGesture 服務監聽事件 ...................................................... 182
7.4.3 支持的手勢事件 .................................................................................. 185
7.5 數據持久化 ...................................................................................................... 186
7.5.1 使用 localStorage ................................................................................. 187
7.5.2 使用 Web SQL、IndexedDB 和 SQLite ............................................. 189
7.5.3 Cordova 外掛程式提供的其他選項 ........................................................... 190
7.6 製作跨平台的套用 .......................................................................................... 191
7.6.1 一種尺寸並不能滿足所有情況 .......................................................... 191
7.6.2 根據平台或者設備類型適配樣式 ...................................................... 192
7.6.3 為平台和設備類型適配互動 .............................................................. 194
7.7 使用 $ionicConfigProvider編輯默認互動行為 ............................................... 196
7.8 總結 .................................................................................................................. 197
第8章 使用Cordova外掛程式 .......................................................................................... 198
8.1 Cordova 外掛程式 .................................................................................................... 199
8.1.1 使用外掛程式要考慮的問題 ...................................................................... 200
8.1.2 安裝外掛程式 .............................................................................................. 201
8.1.3 使用外掛程式 .............................................................................................. 201
8.1.4 在模擬器中使用外掛程式 .......................................................................... 202
8.1.5 外掛程式和系統限制 .................................................................................. 203
8.1.6 Angular 和 Cordova 陷阱 .................................................................... 203
8.1.7 關於設備和模擬器的一些常見問題解決辦法 .................................. 205
8.2 ngCordova ......................................................................................................... 207
8.2.1 安裝 ngCordova ................................................................................... 207
8.3 在套用中使用相機和相冊外掛程式 ...................................................................... 208
8.3.1 創建相機套用 ...................................................................................... 208
8.3.2 增加相機外掛程式 ...................................................................................... 209
8.3.3 創建相冊視圖 ...................................................................................... 210
8.4 在天氣套用中使用地理位置 .......................................................................... 212
8.4.1 配置地理位置外掛程式示例 ...................................................................... 213
8.4.2 添加地理位置外掛程式和 ngCordova ....................................................... 214
8.4.3 請求用戶的地理位置 .......................................................................... 214
8.4.4 最佳化天氣套用 ...................................................................................... 216
8.5 本章挑戰 .......................................................................................................... 218
8.6 總結 .................................................................................................................. 219
第9章 預覽、調試和自動化測試 .............................................................................. 220
9.1 預覽、調試和測試之間的區別 ...................................................................... 220
9.1.1 為什麼測試如此重要 .......................................................................... 222
9.2 配置本章示例 .................................................................................................. 222
9.3 預覽套用的其他方法 ...................................................................................... 223
9.3.1 Ionic Lab ............................................................................................... 223
9.3.2 Ionic View ............................................................................................ 224
9.4 使用真機調試 .................................................................................................. 226
9.4.1 在 Android 設備上進行調試 ............................................................... 227
9.4.2 在 iOS 或模擬器中進行調試 .............................................................. 229
9.5 自動化測試 ...................................................................................................... 232
9.5.1 使用 Jasmine 和 Karma 進行單元測試 .............................................. 233
9.5.2 使用 Protractor 和 WebDriver 進行集成測試 .................................... 240
9.6 更多的測試示例 .............................................................................................. 245
9.7 總結 .................................................................................................................. 245
第10章 編譯並發布套用 ........................................................................................... 246
10.1 創建套用過程一覽 ........................................................................................ 247
10.2 創建套用圖示和啟動頁面圖片 .................................................................... 248
10.2.1 創建圖示 .......................................................................................... 249
10.2.2 創建啟動頁面圖片 .......................................................................... 250
10.3 準備上線套用 ................................................................................................ 251
10.4 編譯 Android 套用並發布到 Google Play .................................................... 252
10.4.1 配置套用的簽名 .............................................................................. 252
10.4.2 編譯套用檔案 .................................................................................. 253
10.4.3 簽名套用檔案 .................................................................................. 253
10.4.4 最佳化 APK 檔案 ................................................................................ 254
10.4.5 編譯套用的升級版本 ...................................................................... 254
10.4.6 創建套用清單並將套用上傳到 Play Store .................................... 255
10.4.7 升級套用清單或上傳新版本 .......................................................... 256
10.4.8 選擇 Android 商店 ........................................................................... 256
10.5 編譯 iOS 套用並發布到 AppStore ................................................................ 257
10.5.1 配置認證和 ID ................................................................................. 257
10.5.2 配置套用的 ID 標識 ........................................................................ 258
10.5.3 在 iTunes Connect 中創建套用清單 ............................................... 259
10.5.4 使用 Xcode 編譯並上傳套用 .......................................................... 259
10.5.5 完善 iTunes Connect 套用清單信息 ............................................... 260
10.5.6 更新套用 .......................................................................................... 261
10.6 總結 ................................................................................................................ 261
附錄A 相關資源 ....................................................................................................... 263
精彩節摘
譯者序
剛入職的時候，團隊參加Hackathon 的過程中需要製作一款移動套用，在沒有iOS 和Android 工程師的情況下，經過調研，Ionic 成了我們最終的技術解決方案，也為我翻譯本書打下了契機。我經常說技術沒有銀色子彈，沒有最完美的，只有最適合的。Web App 雖然有為人詬病的性能問題，但是在人員、時間、功能、性能等的權衡下，Ionic 必然是有它的客群的。
本書是In Action 系列的一員，這就注定了它是一本實戰書的命運。而事實也是如此，基本上每章都會用一個示例貫穿全章。我喜歡這種感覺，純理論的書讀起來讓我昏昏欲睡，實戰這種從0 到1 將最終成品展現在眼前的形式讓我非常有成就感。
相信這也是大多實戰派鐘愛的感覺吧！當然這並不是說理論不重要，我希望的是以實戰為引，通過實戰慢慢去理解並深入理論，而後將理論反作用於實戰，相輔相成才是最終奧義。
實戰書不好的地方在於它勢必會貼很多代碼，我甚至在有的書上看到過整頁整頁的代碼。相信本書的作者也不想這樣，所以很多時候他只列出了一些必要的代碼並提醒大家可以到Github 倉庫上查看完整代碼。在這裡也推薦大家在看完本書中的內容後再去看看倉庫中的示例，雖然書上的註解非常詳細，但我相信大家定會有另一番收穫。
書上的代碼是基於Ionic 1.x 的，而Angular 2 發布在即，Ionic 2 也發布了Beta 版。
很多人對於這本書是否已經過時產生了疑問。對於這一點大家大可放心，官方文檔對於修改的地方詳細地列出了新舊版本的寫法，而且Ionic 2 的接口和組件基本上都維持了原樣。當然，我個人覺得還是要理解Ionic 的精髓，舉一反三才能對代碼的理解大有助益。
李喆明
2016 年5 月15 日
前言
序
本書是Jeremy Wilken 九個月的努力成果，他是一位頂尖的Ionic 開發者，從2013 年開始我們就在一起開發並開源Ionic，和他一起工作是一件非常愉快的事。本書不僅介紹了Ionic 的開源SDK，還包含許多對資深Ionic 開發者有幫助的信息。
Jeremy 為本書開發了三個Ionic 套用，幾乎用遍了現有的Ionic 組件。通過這三個套用，你可以學會如何組合這些組件。第一個套用可以幫助度假勝地服務用戶，它用到了滑動頁面、列表、卡片、內容容器以及基礎導航。第二個套用是比特幣市場套用，可以展示比特幣的實時匯率，用到了下拉刷新、彈出視窗、選項卡、圖表、高級列表以及嵌套視圖。第三個套用是天氣套用，使用了模態框、自定義滾動區域（分頁滾動）、外部數據載入、邊欄選單以及一個搜尋視圖。
這些套用都很有特點並且比較完整，它們已經完成了套用商店上架所需的80%的功能，其餘的20% 會在每章結尾列出，由讀者完成。
對於經驗豐富的Ionic 開發者來說，本書介紹了如何實現特定平台的功能開發，比如在iOS 上使用動作選單，在安卓上使用彈出視窗。本書同樣介紹了Ionic 生態系統的背景以及如何使用Cordova 及其外掛程式；介紹了Ionic 平台提供的各種服務，比如Ionic 視圖；還介紹了如何使用高級技巧和測試來最佳化Ionic 開發流程。Jeremy 用優秀的例子結合他獨到的視角來教大家如何搭建環境並編寫你自己的測試。
在和Max Lynch 以及Ben Sperry 一起開發Ionic 之前，我加入了他們的公司，負責開發已經獲得成功的產品，其中就包括Codiqa，這是一個圖形化的jQuery Mobile 拖曳構建工具。在開發Codiqa 時，我意識到設備和瀏覽器的潛力並沒有被充分開發，用戶一直在要求我們為工具添加更多的功能。最終，我們決定創建自己的Hybrid 套用開發套件，充分發揮移動設備的潛力。有了Angular 這樣的強力工具，我們有能力將Hybrid 移動套用開發推進到能和原生套用開發相抗衡的程度。我們在2013 年發布了Ionic 的alpha 版，令我感到自豪的是，開發社區非常快地接受了Ionic 並幫助它進一步發展。更令我激動的是，Ionic 才剛剛起步，我們會繼續完善它，讓開發者可以更快更輕鬆地開發高性能的套用。
本書既有對Ionic 的介紹，也有更加深入的套用開發最佳實踐，因此無論你是初學者還是資深開發者，都會有所收穫。非常感謝你加入Ionic 社區。
玩得開心！
Adam Bradley
Ionic 框架聯合創建人
