第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
· · · · · · (
收起)
