Ionic 实战-基于AngularJS的移动混合应用开发

第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　serivce：可重用的对象和方法 .................. 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　如何支持联网和离线模式 ...........