構(gòu)建移動網(wǎng)站與APP：ionic移動開發(fā)入門與實(shí)戰(zhàn)

第1章 歡迎進(jìn)入移動開發(fā)的世界 1
1.1 移動互聯(lián)網(wǎng)行業(yè)的浪潮 1
1.2 跨平臺移動開發(fā)框架 2
1.2.1 什么是跨平臺移動開發(fā)框架 2
1.2.2 為什么選擇跨平臺移動開發(fā)框架 3
1.2.3 可選的跨平臺移動開發(fā)框架簡介 4
1.2.4 什么是PhoneGap / Cordova / Ionic 8
1.3 初識Ionic v1.x 8
1.3.1 為什么選擇Ionic 9
1.3.2 基于Web技術(shù)HTML 5/CSS 3/JavaScript 10
1.3.3 基于AngularJS框架 11
1.3.4 接近原生APP應(yīng)用的炫麗界面組件 11
1.3.5 自適應(yīng)（Responsive）布局 12
1.3.6 支持個（任）性定制 13
1.3.7 Ionic的缺點(diǎn) 13
1.3.8 Ionic的商業(yè)案例 14
1.3.9 Ionic的開源案例 15
1.3.10 Ionic的未來——Ionic v2.0 & AngularJS v2.0 16
1.4 學(xué)習(xí)完本書找工作與創(chuàng)業(yè) 17
1.4.1 從本書的項(xiàng)目實(shí)戰(zhàn)開始準(zhǔn)備技術(shù)作品 17
1.4.2 Ionic 助力實(shí)現(xiàn)你的創(chuàng)業(yè)夢想 18
1.5 小結(jié) 18
第2章 Ionic 的開發(fā)調(diào)試環(huán)境安裝 19
2.1 Ionic 快速上手環(huán)境安裝 19
2.1.1 安裝Node.js和NPM 19
2.1.2 安裝Git 21
2.1.3 安裝Gulp和Bower 23
2.1.4 安裝Ionic CLI與Cordova 24
2.1.5 安裝設(shè)置Chrome瀏覽器（推薦） 25
2.1.6 Hello Ionic項(xiàng)目 27
2.1.7 使用瀏覽器驗(yàn)證開發(fā)環(huán)境自動重載特性 28
2.2 Windows下安裝Android開發(fā)平臺 29
2.2.1 安裝Android開發(fā)環(huán)境 29
2.2.2 為測試項(xiàng)目增加Android平臺支持 34
2.2.3 連接Android實(shí)體機(jī)設(shè)備測試APP 34
2.2.4 不使用Android模擬器的說明 36
2.3 Apple OS X下安裝iOS與Android 開發(fā)平臺 36
2.3.1 安裝Xcode 37
2.3.2 為測試項(xiàng)目增加iOS平臺支持 37
2.3.3 連接iOS模擬器測試APP 37
2.3.4 低成本連接iOS實(shí)體機(jī)設(shè)備測試APP 38
2.3.5 安裝Android開發(fā)環(huán)境 40
2.3.6 為測試項(xiàng)目增加Android平臺支持 45
2.3.7 連接Android實(shí)體機(jī)設(shè)備測試APP 45
2.4 安裝開發(fā)工具Sublime Text 3（推薦） 47
2.4.1 安裝開發(fā)工具Sublime Text 3 47
2.4.2 安裝Ionic輔助編碼插件 48
2.5 小結(jié) 49
第3章 AngularJS v1.x入門初步 50
3.1 AngularJS整體結(jié)構(gòu)概述 50
3.1.1 AngularJS實(shí)現(xiàn)了M.V.VM模式 51
3.1.2 AngularJS為JavaScript實(shí)現(xiàn)了模塊化 52
3.1.3 AngularJS實(shí)現(xiàn)了聲明式界面 52
3.1.4 AngularJS實(shí)現(xiàn)了雙向數(shù)據(jù)綁定 52
3.2 代碼模塊與依賴注入 54
3.2.1 定義模塊與組件 54
3.2.2 使用模塊與組件依賴注入 55
3.2.3 AngularJS模塊與JavaScript文件 56
3.3 數(shù)據(jù)作用域與控制器 56
3.3.1 在控制器內(nèi)初始化作用域?qū)ο?56
3.3.2 使用作用域?qū)ο?57
3.3.3 控制器與作用域的反模式 59
3.4 指令和過濾器 59
3.4.1 指令Directive是什么 60
3.4.2 自定義指令及使用 60
3.4.3 使用過濾器Filter 62
3.5 服務(wù)類組件 63
3.5.1 Provider服務(wù)組件詳解 64
3.5.2 Factory服務(wù)組件詳解 65
3.5.3 Service服務(wù)組件簡介 66
3.5.4 服務(wù)類組件特性總結(jié) 67
3.6 一個簡單的AngularJS項(xiàng)目：實(shí)時自選股行情頁 67
3.7 小結(jié) 76
第4章 其他基礎(chǔ)知識與Ionic項(xiàng)目結(jié)構(gòu) 77
4.1 SASS 入門 77
4.1.1 變量與計(jì)算 78
4.1.2 樣式嵌套 79
4.1.3 單行注釋 // 81
4.1.4 繼承@extend 82
4.1.5 混入@mixin與@include 83
4.1.6 顏色計(jì)算 85
4.1.7 引入文件@import 86
4.1.8 條件語句@if和@else 87
4.2 lodash（可選學(xué)） 87
4.2.1 使用場景 87
4.2.2 引入到項(xiàng)目 88
4.2.3 進(jìn)一步學(xué)習(xí)指南 88
4.3 Gulp使用簡介（可選學(xué)） 89
4.3.1 Gulp主文件gulpfile.js的執(zhí)行原理 89
4.3.2 獲取流函數(shù)src 90
4.3.3 寫文件函數(shù)dest 91
4.3.4 監(jiān)視文件變化函數(shù)watch 92
4.3.5 定義任務(wù)函數(shù)task 93
4.3.6 解析Ionic項(xiàng)目Gulp主文件 94
4.4 Ionic項(xiàng)目模板目錄結(jié)構(gòu)簡介 95
4.4.1 常用工作目錄 www 96
4.4.2 常用工作目錄scss 96
4.4.3 常用工作目錄 resources 97
4.4.4 重要文件package.json 97
4.4.5 重要文件config.xml 97
4.4.6 其他目錄與文件簡介 98
4.5 小結(jié) 98
第5章 Ionic內(nèi)置CSS樣式 99
5.1 柵格布局解析 100
5.1.1 基本行與列CSS類 101
5.1.2 指定列寬比例與自定義 102
5.1.3 指定列相對偏移比例 105
5.1.4 縱軸對齊方式 107
5.1.5 響應(yīng)式柵格 109
5.1.6 示例：表情包圖片庫瀏覽頁 111
5.2 固定標(biāo)題欄 113
5.2.1 固定標(biāo)題條 114
5.2.2 固定頂欄 114
5.2.3 固定底欄 115
5.3 按鈕 116
5.3.1 普通按鈕與配色結(jié)合 116
5.3.2 按鈕尺寸、寬度樣式 118
5.3.3 無填充色按鈕與文本型按鈕 119
5.3.4 圖標(biāo)按鈕 120
5.3.5 標(biāo)題欄按鈕 121
5.3.6 按鈕條 123
5.4 列表容器 124
5.4.1 分割條式列表項(xiàng) 125
5.4.2 列表項(xiàng)內(nèi)圖標(biāo) 126
5.4.3 列表項(xiàng)內(nèi)按鈕 127
5.4.4 列表項(xiàng)內(nèi)頭像 128
5.4.5 列表項(xiàng)內(nèi)縮略預(yù)覽圖 129
5.4.6 有邊距的列表 130
5.5 展示卡 131
5.5.1 普通卡 132
5.5.2 增加標(biāo)題欄裝飾效果 133
5.5.3 卡列表 134
5.5.4 卡內(nèi)圖片 134
5.5.5 Facebook型展示卡 135
5.6 表單控件樣式 137
5.6.1 輸入字段名提示 137
5.6.2 輸入控件圖標(biāo) 140
5.6.3 有邊距的輸入表單 141
5.6.4 輸入控件單獨(dú)設(shè)置邊距 141
5.6.5 標(biāo)題欄上放置文本輸入控件 142
5.7 開關(guān)類組件 142
5.8 范圍選擇組件 144
5.9 選擇框組件 145
5.10 選項(xiàng)卡欄 146
5.10.1 普通文本型選項(xiàng)卡 147
5.10.2 圖標(biāo)型選項(xiàng)卡 148
5.10.3 圖標(biāo)置頂或置左型選項(xiàng)卡 149
5.10.4 選項(xiàng)卡指示條 151
5.11 自定義主題顏色 152
5.12 可用圖標(biāo)集 154
5.13 內(nèi)邊距微調(diào) 155
5.14 小結(jié) 155
第6章 Ionic內(nèi)置JS組件概述 156
6.1 Ionic內(nèi)置JS組件 156
6.1.1 組件分類與前后綴說明 156
6.1.2 Ionic內(nèi)置JS組件與CSS樣式類集成 157
6.1.3 Ionic內(nèi)置JS組件與AngularJS 集成 157
6.2 使用JS組件的常見問題解決辦法 158
6.2.1 交互調(diào)試部署到Android設(shè)備上的Ionic應(yīng)用 158
6.2.2 設(shè)備上顯示白屏幕錯誤問題調(diào)試 159
6.2.3 使用Batarang進(jìn)行性能分析 160
6.3 小結(jié) 161
第7章 Ionic內(nèi)置布局類組件 162
7.1 固定標(biāo)題欄 162
7.2 內(nèi)容顯示相關(guān)組件 164
7.2.1 內(nèi)容展示容器 164
7.2.2 內(nèi)容滾動容器 167
7.2.3 內(nèi)容容器對象滾動服務(wù) 169
7.2.4 加載新內(nèi)容滾動觸發(fā)器 169
7.2.5 下拉刷新組件 171
7.3 小結(jié) 173
第8章 Ionic內(nèi)置導(dǎo)航類組件 174
8.1 導(dǎo)航框架相關(guān)組件 175
8.1.1 導(dǎo)航視圖容器與視圖 175
8.1.2 定制頂部導(dǎo)航欄 179
8.1.3 瀏覽歷史服務(wù) 182
8.2 選項(xiàng)卡相關(guān)組件 183
8.2.1 選項(xiàng)卡欄與選項(xiàng)卡 183
8.2.2 選項(xiàng)卡服務(wù) 188
8.3 側(cè)欄菜單相關(guān)組件 189
8.3.1 側(cè)欄菜單框架 189
8.3.2 側(cè)欄菜單顯示設(shè)置 194
8.3.3 側(cè)欄菜單服務(wù) 194
8.4 導(dǎo)航應(yīng)用綜合實(shí)戰(zhàn)：個人電子簡歷APP框架 195
8.5 小結(jié) 201
第9章 Ionic內(nèi)置數(shù)據(jù)展示與操作組件 202
9.1 列表相關(guān)組件 202
9.1.1 列表容器與列表項(xiàng)定制 202
9.1.2 列表服務(wù) 205
9.1.3 列表高性能顯示優(yōu)化 206
9.2 表單輸入相關(guān)組件 208
9.3 對話框類相關(guān)組件 209
9.3.1 模態(tài)框 209
9.3.2 浮動框 211
9.3.3 彈出框 213
9.3.4 上拉菜單 216
9.3.5 背景幕布 218
9.3.6 對話框類組件綜合示例 218
9.4 加載中提示相關(guān)組件 226
9.4.1 加載中指示器 226
9.4.2 加載中指示服務(wù) 227
9.5 輪播組件 229
9.6 手勢事件與服務(wù)組件 232
9.6.1 Ionic手勢事件類型 232
9.6.2 手勢事件 232
9.7 鍵盤組件 233
9.7.1 鍵盤插件 233
9.7.2 懸浮底欄指令 234
9.8 小結(jié) 234
第10章 Ionic內(nèi)置基礎(chǔ)服務(wù)組件與設(shè)備平臺客制化 235
10.1 平臺服務(wù)組件 235
10.2 其他工具 237
10.2.1 應(yīng)用基礎(chǔ)配置 237
10.2.2 設(shè)備信息與基本操作 238
10.2.3 DOM信息與基本操作 240
10.2.4 DOM元素位置信息 240
10.2.5 事件管理 241
10.3 設(shè)備平臺客制化 242
10.3.1 設(shè)備平臺CSS樣式類 242
10.3.2 使用AngularJS客制化平臺風(fēng)格示例 244
10.4 小結(jié) 246
第11章 借助插件接近無限可能 247
11.1 Cordova插件 247
11.1.1 搜索可用的插件 247
11.1.2 插件管理（安裝、刪除、顯示已裝插件） 248
11.1.3 cordova-plugin-battery-status插件使用示例 249
11.1.4 cordova-plugin-whitelist插件說明 251
11.2 ngCordova插件集 253
11.2.1 安裝ngCordova插件集 253
11.2.2 ngCordova插件使用步驟概要 254
11.2.3 插件$cordovaDevice使用示例 257
11.2.4 插件$cordovaToast使用示例 258
11.2.5 插件$cordovaContacts使用示例 259
11.2.6 插件$cordovaLocalNotification使用示例 260
11.2.7 插件$cordovaGeolocation使用示例 260
11.2.8 插件$cordovaVibration使用示例 262
11.2.9 插件$cordovaCamera使用示例 262
11.2.10 插件$cordovaSocialSharing使用示例 264
11.2.11 插件$cordovaNetwork使用示例 265
11.2.12 插件$cordovaSQLite使用示例 266
11.3 小結(jié) 267
第12章 后端服務(wù)器模擬環(huán)境搭建準(zhǔn)備 268
12.1 MongoDB安裝與測試 268
12.2 Postman安裝與使用示例 271
12.3 使用Express初始化創(chuàng)建API示例 274
12.4 使用Mongoose完善數(shù)據(jù)持久化示例 282
12.5 使用Passport加入用戶驗(yàn)證示例 287
12.6 小結(jié) 296
第13章 項(xiàng)目實(shí)戰(zhàn)：逍遙游APP v0.1(UGC+B2C應(yīng)用) 297
13.1 項(xiàng)目和代碼說明 297
13.1.1 項(xiàng)目說明 297
13.1.2 隨書代碼運(yùn)行說明 298
13.2 功能設(shè)計(jì) 298
13.2.1 界面與功能概述 300
13.2.2 服務(wù)端API接口概述 303
13.3 功能實(shí)現(xiàn) 303
13.3.1 準(zhǔn)備工作：部署服務(wù)器端環(huán)境 304
13.3.2 初始化項(xiàng)目設(shè)置與目錄結(jié)構(gòu) 305
13.3.3 實(shí)現(xiàn)總體界面導(dǎo)航與路由 306
13.3.4 實(shí)現(xiàn)側(cè)欄菜單功能集 312
13.3.5 實(shí)現(xiàn)旅友行蹤功能集 321
13.3.6 實(shí)現(xiàn)我的足跡功能集 332
13.3.7 實(shí)現(xiàn)預(yù)約旅游產(chǎn)品功能集 351
13.3.8 實(shí)現(xiàn)設(shè)置功能集 363
13.3.9 定制啟動屏與APP圖標(biāo) 371
13.4 小結(jié)與作業(yè)練習(xí) 371
第14章 項(xiàng)目實(shí)戰(zhàn)：銷售掌中寶v0.1 （企業(yè)應(yīng)用） 373
14.1 項(xiàng)目和代碼說明 373
14.1.1 項(xiàng)目說明 374
14.1.2 隨書代碼運(yùn)行說明 374
14.2 功能設(shè)計(jì) 375
14.2.1 界面與業(yè)務(wù)功能概述 375
14.2.2 服務(wù)端API接口概述 378
14.3 功能實(shí)現(xiàn) 379
14.3.1 準(zhǔn)備工作：部署服務(wù)器端環(huán)境 379
14.3.2 初始化項(xiàng)目設(shè)置與目錄結(jié)構(gòu) 381
14.3.3 完成總體界面導(dǎo)航與路由 382
14.3.4 實(shí)現(xiàn)側(cè)欄菜單與登錄/退出功能 387
14.3.5 實(shí)現(xiàn)商機(jī)業(yè)務(wù)功能集 391
14.3.6 實(shí)現(xiàn)拜訪業(yè)務(wù)功能集 404
14.3.7 實(shí)現(xiàn)客戶業(yè)務(wù)功能集 420
14.3.8 實(shí)現(xiàn)訂單業(yè)務(wù)功能集 434
14.3.9 實(shí)現(xiàn)報表顯示與初步配置 446
14.4 小結(jié)與作業(yè)練習(xí) 455
第15章 應(yīng)用的生成與發(fā)布更新 456
15.1 生成發(fā)布Android平臺的應(yīng)用包 456
15.1.1 生成發(fā)布版的apk文件 456
15.1.2 生成用于簽名的私鑰 457
15.1.3 對apk文件簽名 457
15.1.4 優(yōu)化apk文件并改名 458
15.1.5 發(fā)布Android應(yīng)用 459
15.2 生成發(fā)布iOS平臺的應(yīng)用 459
15.2.1 使用開發(fā)者賬戶連接Xcode 460
15.2.2 簽名 460
15.2.3 設(shè)置應(yīng)用的標(biāo)識名 461
15.2.4 開始應(yīng)用上架登記 462
15.2.5 嘗試編譯生成正式發(fā)布版的應(yīng)用 465
15.2.6 使用Xcode打包APP應(yīng)用 465
15.2.7 創(chuàng)建應(yīng)用的發(fā)布檔 466
15.2.8 完成應(yīng)用上架登記 467
15.3 更新應(yīng)用 470
15.4 小結(jié) 471