Ionic是近几年很火的一项跨平台开发技术。Ionic最大的亮点是集成了Angular和Cordova,对于有开发经验的前端工程师来说上手难度大大降低,并且能直接使用现有的大量第三方库和框架。《Ionic实战:基于AngularJS的移动混合应用开发》是一本详尽的Ionic实战教程,不仅告诉你“怎么做”,还告诉你“为什么”,这正是大部分入门书籍所欠缺的。 无论你是否有相关开发经验,《Ionic实战:基于AngularJS的移动混合应用开发》都可以帮助你快速掌握Ionic。
目录: 第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 和java script .......................................................... 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
|