目錄 第1章混合App開發簡介1 【教學導航】1 1.1什么是混合App開發1 1.1.1移動App開發的三種模式1 1.1.2混合App開發應用場景3 1.2混合App開發應用技術4 1.2.1MVC與MVVM架構模式4 1.2.2AngularJS簡介6 1.2.3Cordova簡介8 1.2.4ionic簡介9 1.3本章小結10 第2章初識AngularJS11 【教學導航】11 2.1快速體驗AngularJS11 2.1.1AngularJS1與AngularJS2 的區別11 2.1.2AngularJS的環境配置12 2.1.3**個AngularJS程序13 2.2AngularJS的基本概念16 2.2.1AngularJS的模塊與 控制器16 2.2.2AngularJS作用域20 2.2.3AngularJS表達式24 2.2.4AngularJS的指令27 2.2.5自動化雙向綁定28 2.3本章小結29 第3章AngularJS的指令30 【教學導航】30目錄HTML5混合App開發3.1指令的分類30 3.2AngularJS常用的內置指令31 3.2.1程序控制和數據綁定類指令31 3.2.2狀態設置類指令33 3.2.3事件綁定類指令39 3.2.4訪問流程類指令42 3.2.5加載處理類指令49 3.3AngularJS的自定義指令50 3.3.1directive()函數51 3.3.2自定義指令的約束53 3.3.3指令的作用域54 3.4本章小結58 第4章AngularJS相關原理59 【教學導航】59 4.1AngularJS與MVVM59 4.2AngularJS的啟動流程60 4.3臟檢查機制62 4.3.1臟檢查機制的實現原理62 4.3.2$watch函數66 4.3.3$apply函數67 4.4AngularJS與依賴注入68 4.4.1什么是依賴注入69 4.4.2JavaScript如何實現依賴注入70 4.4.3AngularJS中的依賴注入72 4.5本章小結74 第5章AngularJS的服務75 【教學導航】75 5.1AngularJS創建服務75 5.1.1使用provider()函數創建服務76 5.1.2使用factory()函數創建服務79 5.1.3使用service()函數創建服務80 5.1.4使用value()和constant()函數創建服務83 5.2AngularJS內置服務85 5.2.1訪問JavaScript全局對象85 5.2.2AngularJS路由91 5.2.3AngularJS中的Ajax訪問95 5.3本章小結98 第6章AngularJS框架項目實戰99 6.1項目實戰——邀請名單99 6.1.1項目展示99 6.1.2項目分析101 6.1.3項目目錄和文件結構103 6.1.4封裝對象模型104 6.1.5編寫業務邏輯106 6.1.6編寫靜態頁面107 6.1.7添加數據綁定110 6.2項目實戰——電影列表111 6.2.1項目展示111 6.2.2項目分析113 6.2.3項目目錄和文件結構115 6.2.4接口API測試116 6.2.5搭建項目并封裝自定義的JSONP服務117 6.2.6封裝和測試數據對象模型119 6.2.7編寫電影列表頁面的控制器和模板122 6.2.8編寫電影詳情頁面的控制器和模板125 6.2.9完成路由功能并整合項目126 6.3本章小結128 第7章ionic開發環境的安裝與配置129 【教學導航】129 7.1安裝Android SDK129 7.1.1JDK的下載和安裝129 7.1.2Android SDK的下載和安裝135 7.2安裝Node.js142 7.2.1Node.js和NPM簡介142 7.2.2Node.js的下載和安裝142 7.3安裝Git146 7.4安裝ionic和Cordova150 7.4.1ionic1與ionic2的區別150 7.4.2ionic和Cordova的安裝150 7.5本章小結151 第8章快速體驗ionic項目152 【教學導航】152 8.1快速創建ionic項目152 8.1.1ionic的3種項目模板152 8.1.2下載項目模板153 8.1.3為項目添加Android平臺支持155 8.1.4打包Android APK157 8.2ionic項目目錄和文件結構159 8.2.1常用工作目錄和重要文件159 8.2.2其他工作目錄和文件163 8.3定制項目圖標和啟動頁165 8.4本章小結168 第9章ionic CSS169 【教學導航】169 9.1基本布局類樣式169 9.1.1手機App常用布局方式169 9.1.2定高條塊170 9.1.3內容區域175 9.2顏色和圖標類樣式177 9.2.1顏色177 9.2.2圖標179 9.3界面組件類樣式181 9.3.1按鈕181 9.3.2列表185 9.3.3卡片191 9.3.4表單輸入192 9.3.5選項卡200 9.4柵格系統類樣式204 9.4.1基本行與列204 9.4.2指定列寬205 9.4.3指定列偏移206 9.4.4列表縱向對齊207 9.4.5響應式柵格209 9.5本章小結210 第10章ionic JavaScript(上)212 【教學導航】212 10.1ionic JavaScript概述212 10.1.1ionic指令式組件212 10.1.2ionic服務式組件213 10.2基本布局組件214 10.2.1固定標題欄214 10.2.2內容區域216 10.2.3滾動條218 10.2.4滾動刷新220 10.2.5下拉刷新223 10.2.6手動控制滾動視圖225 10.3ionic路由229 10.3.1路由狀態機229 10.3.2模板視圖與視圖容器230 10.3.3路由的實現230 10.4界面組件233 10.4.1頂部導航欄234 10.4.2列表237 10.4.3表單輸入241 10.4.4幻燈片243 10.4.5側邊欄菜單246 10.4.6選項卡251 10.5本章小結256 第11章ionic JavaScript(下)257 【教學導航】257 11.1動態組件257 11.1.1模態對話框257 11.1.2上拉菜單262 11.1.3彈出框265 11.1.4浮動框269 11.1.5背景幕273 11.1.6載入指示器275 11.2手勢事件277 11.2.1常用的手勢事件277 11.2.2手動注冊與解除手勢事件278 11.3IndexedDB279 11.3.1IndexedDB簡介279 11.3.2Object Store280 11.3.3請求的生命周期281 11.3.4IndexedDB的基本使用282 11.4本章小結289 第12章項目實戰——Mall App290 12.1項目簡介290 12.1.1項目展示290 12.1.2項目目錄和文件結構293 12.2任務1——項目結構搭建295 12.2.1任務描述295 12.2.2任務分析295 12.2.3代碼實現296 12.3任務2——引導頁298 12.3.1任務描述298 12.3.2任務分析299 12.3.3代碼實現300 12.4任務3——導航標簽307 12.4.1任務描述307 12.4.2任務分析307 12.4.3代碼實現307 12.5任務4——商城首頁310 12.5.1任務描述310 12.5.2任務分析310 12.5.3代碼實現311 12.6任務5——商品分類323 12.6.1任務描述323 12.6.2任務分析324 12.6.3代碼實現324 12.7任務6——商品列表335 12.7.1任務描述335 12.7.2任務分析 335 12.7.3代碼實現336 12.8任務7——商品詳情347 12.8.1任務描述347 12.8.2任務分析347 12.8.3代碼實現349 12.9任務8——購物車364 12.9.1任務描述364 12.9.2任務分析365 12.9.3代碼實現365 12.10任務9——個人中心379 12.10.1任務描述379 12.10.2任務分析379 12.10.3代碼實現380 12.11本章小結388