內容簡介
Ionic是一個用來開發混合手機套用的開原始碼庫,它可以最佳化HTML、CSS和JavaScript的性能,構建高效的應用程式。
《Ionic學習手冊》作為Ionic的學習手冊,重點講解了使用Ionic來開發移動混合套用的方法。Ionic學習手冊 共分為9章,內容包含Ionic產生的背景、依賴的技術和簡單介紹,Ionic的組件構成,如何使用SCSS更改Ionic的主題,如何使用Ionic的指令和服務加速開發,通過一個示例來詳解Ionic的開發步驟,如何藉助於Cordova和ngCordova與設備的功能進行集成,綜合利用所學知識開發一個聊天App,以及與發布Ionic App相關的知識。
《Ionic學習手冊》內容實用、步驟詳細,適合對移動套用開發感興趣的讀者閱讀。
圖書目錄
第 1章 Ionic—基於Angular JS框架 1
1.1 理解SOC(關注分離) 2
1.2 AngularJS組件 4
1.3 AngularJS指令(directive) 8
1.4 AngularJS服務 14
1.5 AngularJS資源 17
1.6 總結 17
第 2章 Ionic入門 18
2.1 移動混合架構 18
2.2 什麼是Apache Cordova 19
2.3 什麼是Ionic 21
2.4 程式安裝 21
2.4.1 安裝Node.js 21
2.4.2 安裝Git 22
2.4.3 安裝Bower 22
2.4.4 安裝Gulp 23
2.4.5 安裝Sublime Text 24
2.4.6 安裝Cordova和Ionic CLI 24
2.5 平台介紹 25
2.6 Hello Ionic 26
2.7 配置瀏覽器開發工具 30
2.7.1 Google Chrome 30
2.7.2 Mozilla Firefox 31
2.8 Ionic項目結構 32
2.8.1 config.xml配置檔案 33
2.8.2 www 34
2.9 構建tabs模板 36
2.10 構建side menu模板 37
2.11 generator-ionic工具簡介 38
2.12 總結 41
第3章 Ionic CSS組件和導航 43
3.1 Ionic CSS組件 43
3.1.1 Ionic格線系統 44
3.1.2 頁面結構 49
3.1.3 按鈕 53
3.1.4 列表 55
3.1.5 卡片 56
3.1.6 字型圖示 58
3.1.7 表單元素 59
3.1.8 集成AngularJS和Ionic CSS組件 65
3.2 Ionic路由 70
3.3 總結 87
第4章 Ionic和SCSS 88
4.1 什麼是SASS 88
4.2 在Ionic項目中安裝SCSS 90
4.2.1 手動安裝 91
4.2.2 Ioinc CLI命令方式安裝 92
4.3 使用Ionic SCSS 92
4.4 理解如何使用Ionic SCSS進行開發 95
4.5 使用SCSS的操作流程 100
4.6 創建一個案例 101
4.7 總結 108
第5章 Ionic指令和服務 109
5.1 Ionic指令和服務 109
5.2 Ionic平台服務 110
5.2.1 registerBackButtonAction 113
5.2.2 on方法 114
5.2.3 header和footer 115
5.3 內容的指令和服務 116
5.3.1 ion-content 117
5.3.2 ion-scroll 118
5.3.3 ion-refresher 118
5.3.4 ion-infinite-scroll 122
5.3.5 $ionicScrollDelegate 124
5.3.6 導航 126
5.3.7 ion-view 126
5.3.8 Ionic view的事件 128
5.3.9 ion-nav-bar 129
5.3.10 ion-nav-buttons 131
5.3.11 $ionicNavBarDelegate 133
5.3.12 $ionicHistory 134
5.3.13 選項卡和側邊欄選單 139
5.4 Ionic loading的服務 143
5.4.1 Action Sheet 146
5.4.2 Popover和Popup 148
5.4.3 $ionicPopup 151
5.5 ion-list和ion-item指令 158
5.6 手勢的指令和服務 164
5.7 總結 170
第6章 構建書店App 171
6.1 書店應用程式簡介 172
6.2 書店套用的架構 173
6.2.1 伺服器端架構 173
6.2.2 伺服器端API文檔 174
6.2.3 客戶端架構 175
6.2.4 GitHub上的代碼 176
6.2.5 書店demo 176
6.2.6 開發流程 177
6.3 設定伺服器 178
6.4 構建應用程式 179
6.4.1 步驟1:構建side menu模板 179
6.4.2 步驟2:重構模板 180
6.4.3 步驟3:構建authentication、localStorage和REST API factory 186
6.4.4 步驟4:為每個路由增加controller並集成factory 194
6.4.5 步驟5:構建模板並集成controller數據 204
6.5 總結 215
第7章 Cordova和ngCordova 216
7.1 安裝設定平台相關SDK 216
7.1.1 Android設定 217
7.1.2 iOS設定 218
7.2 測試設備 218
7.2.1 測試Android設備 219
7.2.2 測試iOS 223
7.3 Cordova外掛程式 224
7.4 Ionic外掛程式API 225
7.4.1 添加一個外掛程式 225
7.4.2 移除外掛程式 225
7.4.3 列出添加的外掛程式 225
7.4.4 搜尋外掛程式 225
7.5 Cordova whitelist外掛程式 231
7.6 ngCordova 232
7.6.1 安裝ngCordova 233
7.6.2 說明 234
7.6.3 $cordovaToast外掛程式 236
7.6.4 $cordovaDialogs外掛程式 237
7.6.5 $cordovaFlashlight外掛程式 239
7.6.6 $cordovaLocalNotification外掛程式 241
7.6.7 $cordovaGeolocation外掛程式 244
7.7 總結 247
第8章 構建聊天App 248
8.1 Ionic Chat App 248
8.2 應用程式架構 256
8.2.1 授權 257
8.2.2 應用程式流程 257
8.2.3 預覽App 257
8.2.4 數據結構 259
8.2.5 Cordova外掛程式 259
8.2.6 Github的代碼 260
8.3 開發應用程式 260
8.3.1 構建和設定App 260
8.3.2 安裝所需的cordova外掛程式 263
8.3.3 獲取Google API key 263
8.3.4 設定路由和路由許可權 264
8.3.5 創建service/factory 268
8.3.6 創建map指令 272
8.3.7 創建controller 274
8.3.8 創建模板 286
8.3.9 創建SCSS 290
8.4 測試應用程式 294
8.5 總結 299
第9章 發布Ionic App 300
9.1 準備用來發布的App 300
9.1.1 配置圖示和啟動畫面 300
9.1.2 更新config.xml檔案 302
9.2 PhoneGap服務 303
9.3 使用Cordova CLI來生成安裝包 304
9.3.1 Android安裝包 304
9.3.2 iOS安裝包 306
9.4 Ionic打包 307
9.4.1 上傳項目到Ionic cloud 307
9.4.2 生成需要的密鑰 307
9.5 總結 308
附錄A 其他實用命令及工具 309