序1
前言5
第1 章混合移动App 11
Ionic 框架是什么?12
Ionic 2 有什么新特性?12
不同移动开发方式的比较13
理解Ionic 的技术栈15
进行Ionic 应用程序开发的**条件17
小结18
第2 章配置开发环境19
安装Ionic 框架19
新建Ionic 项目22
安装平台工具25
配置模拟器26<div class="Section0"> <p class="p0"><span style="font-family: 宋体;">序1</span></p> <p class="p0"><span style="font-family: 宋体;">前言5</span></p> <p class="p0"><span style="font-family: 宋体;">第1 章混合移动App 11</span></p> <p class="p0">Ionic <span style="font-family: 宋体;">框架是什么?12</span></p> <p class="p0">Ionic 2 <span style="font-family: 宋体;">有什么新特性?12</span></p> <p class="p0"><span style="font-family: 宋体;">不同移动开发方式的比较13</span></p> <p class="p0"><span style="font-family: 宋体;">理解Ionic 的技术栈15</span></p> <p class="p0"><span style="font-family: 宋体;">进行Ionic 应用程序开发的**条件17</span></p> <p class="p0"><span style="font-family: 宋体;">小结18</span></p> <p class="p0"><span style="font-family: 宋体;">第2 章配置开发环境19</span></p> <p class="p0"><span style="font-family: 宋体;">安装Ionic 框架19</span></p> <p class="p0"><span style="font-family: 宋体;">新建Ionic 项目22</span></p> <p class="p0"><span style="font-family: 宋体;">安装平台工具25</span></p> <p class="p0"><span style="font-family: 宋体;">配置模拟器26</span></p> <p class="p0"><span style="font-family: 宋体;">配置你的设备28</span></p> <p class="p0"><span style="font-family: 宋体;">添加移动平台31</span></p> <p class="p0"><span style="font-family: 宋体;">在模拟器上测试31</span></p> <p class="p0"><span style="font-family: 宋体;">在设备上测试32</span></p> <p class="p0"><span style="font-family: 宋体;">小结33</span></p> <p class="p0"><span style="font-family: 宋体;">第3 章理解Ionic 命令行界面34</span></p> <p class="p0"><span style="font-family: 宋体;">指定编译平台36</span></p> <p class="p0"><span style="font-family: 宋体;">管理Cordova 插件37</span></p> <p class="p0">Lonic <span style="font-family: 宋体;">生成器38</span></p> <p class="p0"><span style="font-family: 宋体;">预览你的App38</span></p> <p class="p0"><span style="font-family: 宋体;">指定IP地址39</span></p> <p class="p0"><span style="font-family: 宋体;">模拟运行Ionic App 40</span></p> <p class="p0"><span style="font-family: 宋体;">在设备上运行Ionic App42</span></p> <p class="p0"><span style="font-family: 宋体;">输出日志42</span></p> <p class="p0">CLI<span style="font-family: 宋体;">的信息42</span></p> <p class="p0"><span style="font-family: 宋体;">小结43</span></p> <p class="p0"><span style="font-family: 宋体;">第4 章Angular 和TypeScript 基础44</span></p> <p class="p0">Angular 2 <span style="font-family: 宋体;">是什么?44</span></p> <p class="p0"><span style="font-family: 宋体;">理解ES6 和TypeScript 54</span></p> <p class="p0"><span style="font-family: 宋体;">类型化函数60</span></p> <p class="p0"><span style="font-family: 宋体;">小结60</span></p> <p class="p0"><span style="font-family: 宋体;">第5 章Apache Cordova 基础61</span></p> <p class="p0">Cordova<span style="font-family: 宋体;">(即PhoneGap)历史63</span></p> <p class="p0">Apache Cordova <span style="font-family: 宋体;">与Adobe PhoneGap63</span></p> <p class="p0"><span style="font-family: 宋体;">深入了解Cordova 64</span></p> <p class="p0"><span style="font-family: 宋体;">配置你的Cordova App65</span></p> <p class="p0"><span style="font-family: 宋体;">设备的可访问性(即插件)65</span></p> <p class="p0"><span style="font-family: 宋体;">界面组件:缺失的拼图66</span></p> <p class="p0"><span style="font-family: 宋体;">为什么不使用Cordova66</span></p> <p class="p0"><span style="font-family: 宋体;">理解Web 标准66</span></p> <p class="p0"><span style="font-family: 宋体;">小结68</span></p> <p class="p0"><span style="font-family: 宋体;">第6 章理解Ionic 69</span></p> <p class="p0">HTML<span style="font-family: 宋体;">的构成69</span></p> <p class="p0">Ionic<span style="font-family: 宋体;">组件71</span></p> <p class="p0"><span style="font-family: 宋体;">理解SCSS 文件71</span></p> <p class="p0"><span style="font-family: 宋体;">理解TypeScript 73</span></p> <p class="p0"><span style="font-family: 宋体;">小结74</span></p> <p class="p0"><span style="font-family: 宋体;">第7 章编写我们的Ionic2Do App 75</span></p> <p class="p0"><span style="font-family: 宋体;">添加平台76</span></p> <p class="p0"><span style="font-family: 宋体;">预览Ionic2Do App 76</span></p> <p class="p0"><span style="font-family: 宋体;">修改页面结构87</span></p> <p class="p0"><span style="font-family: 宋体;">添加全扫手势98</span></p> <p class="p0"><span style="font-family: 宋体;">简单主题99</span></p> <p class="p0"><span style="font-family: 宋体;">正确地声明类型100</span></p> <p class="p0"><span style="font-family: 宋体;">保存数据101</span></p> <p class="p0"><span style="font-family: 宋体;">创建FireBase 账号101</span></p> <p class="p0"><span style="font-family: 宋体;">安装Firebase 和AngularFire 2102</span></p> <p class="p0">Ionic <span style="font-family: 宋体;">编译系统103</span></p> <p class="p0"><span style="font-family: 宋体;">将AngularFire 添加到appmodulets 文件105</span></p> <p class="p0"><span style="font-family: 宋体;">使用Firebase 数据105</span></p> <p class="p0"><span style="font-family: 宋体;">使用Ionic Native108</span></p> <p class="p0"><span style="font-family: 宋体;">小结112</span></p> <p class="p0"><span style="font-family: 宋体;">第8 章创建一个基于Tab 的App 113</span></p> <p class="p0"><span style="font-family: 宋体;">引导我们的App 118</span></p> <p class="p0"><span style="font-family: 宋体;">通过HTTP 服务加载数据119</span></p> <p class="p0"><span style="font-family: 宋体;">显示我们的数据122</span></p> <p class="p0"><span style="font-family: 宋体;">生成新页面125</span></p> <p class="p0"><span style="font-family: 宋体;">理解Ionic 2 的导航模型126</span></p> <p class="p0"><span style="font-family: 宋体;">修改公园详情页128</span></p> <p class="p0"><span style="font-family: 宋体;">渲染Google 地图131</span></p> <p class="p0"><span style="font-family: 宋体;">添加大头钉133</span></p> <p class="p0"><span style="font-family: 宋体;">添加查找功能137</span></p> <p class="p0"><span style="font-family: 宋体;">设置App 的样式140</span></p> <p class="p0"><span style="font-family: 宋体;">虚拟滚动142</span></p> <p class="p0"><span style="font-family: 宋体;">定制表格header 144</span></p> <p class="p0"><span style="font-family: 宋体;">小结146</span></p> <p class="p0"><span style="font-family: 宋体;">第9 章构建一个天气应用147</span></p> <p class="p0"><span style="font-family: 宋体;">开始147</span></p> <p class="p0"><span style="font-family: 宋体;">探究侧滑菜单模板149</span></p> <p class="p0"><span style="font-family: 宋体;">侧滑菜单选项152</span></p> <p class="p0"><span style="font-family: 宋体;">显示菜单152</span></p> <p class="p0"><span style="font-family: 宋体;">转换模板153</span></p> <p class="p0"><span style="font-family: 宋体;">模拟天气提供者156</span></p> <p class="p0"><span style="font-family: 宋体;">显示天气数据158</span></p> <p class="p0"><span style="font-family: 宋体;">进度显示:loading 对话框和下拉刷新161</span></p> <p class="p0"><span style="font-family: 宋体;">添加Geolocation 163</span></p> <p class="p0"><span style="font-family: 宋体;">访问在线天气数据165</span></p> <p class="p0"><span style="font-family: 宋体;">将Geolocation 和Weather 提供者关联166</span></p> <p class="p0"><span style="font-family: 宋体;">获取其他地区的天气169</span></p> <p class="p0"><span style="font-family: 宋体;">下拉刷新:第二部分171</span></p> <p class="p0"><span style="font-family: 宋体;">编辑地址172</span></p> <p class="p0"><span style="font-family: 宋体;">使用Geocoding 服务177</span></p> <p class="p0"><span style="font-family: 宋体;">动态刷新侧滑菜单180</span></p> <p class="p0">Ionic<span style="font-family: 宋体;">事件181</span></p> <p class="p0">Observable183</p> <p class="p0"><span style="font-family: 宋体;">调整App 的样式187</span></p> <p class="p0"><span style="font-family: 宋体;">添加天气图标191</span></p> <p class="p0"><span style="font-family: 宋体;">下一步194</span></p> <p class="p0"><span style="font-family: 宋体;">小结195</span></p> <p class="p0"><span style="font-family: 宋体;">第10 章调试并测试你的Ionic 应用196</span></p> <p class="p0"><span style="font-family: 宋体;">解决CORS 问题201</span></p> <p class="p0"><span style="font-family: 宋体;">用iOS 或Android 模拟器运行202</span></p> <p class="p0"><span style="font-family: 宋体;">在设备上进行调试203</span></p> <p class="p0"><span style="font-family: 宋体;">调试Ionic 的初始化204</span></p> <p class="p0"><span style="font-family: 宋体;">其他工具205</span></p> <p class="p0"><span style="font-family: 宋体;">小结206</span></p> <p class="p0"><span style="font-family: 宋体;">第11 章部署你的应用程序207</span></p> <p class="p0"><span style="font-family: 宋体;">修改configxml 文件207</span></p> <p class="p0">App <span style="font-family: 宋体;">图标和splash 图片208</span></p> <p class="p0"><span style="font-family: 宋体;">编译你的Android APK 208</span></p> <p class="p0"><span style="font-family: 宋体;">编译你的iOS App 211</span></p> <p class="p0"><span style="font-family: 宋体;">小结225</span></p> <p class="p0"><span style="font-family: 宋体;">第12 章探索Ionic Cloud 226</span></p> <p class="p0"><span style="font-family: 宋体;">创建Ionic Cloud 账号226</span></p> <p class="p0"><span style="font-family: 宋体;">生成你的Ionic App ID 227</span></p> <p class="p0"><span style="font-family: 宋体;">配置你的App227</span></p> <p class="p0">Ionic <span style="font-family: 宋体;">部署228</span></p> <p class="p0"><span style="font-family: 宋体;">**文档236</span></p> <p class="p0">Ionic <span style="font-family: 宋体;">打包242</span></p> <p class="p0">Ionic View245</p> <p class="p0">Ionic Creator248</p> <p class="p0"><span style="font-family: 宋体;">小结249</span></p> <p class="p0"><span style="font-family: 宋体;">第13 章渐进式Web 应用250</span></p> <p class="p0"><span style="font-family: 宋体;">但是,什么是渐进式Web App?251</span></p> <p class="p0">manifestjson <span style="font-family: 宋体;">文件252</span></p> <p class="p0"><span style="font-family: 宋体;">推送通知256</span></p> <p class="p0"><span style="font-family: 宋体;">小结257</span></p> <p class="p0"><span style="font-family: 宋体;">第14 章终章258</span></p> <p class="p0"><span style="font-family: 宋体;">下一步265</span></p> <p class="p0">Ionic <span style="font-family: 宋体;">论坛265</span></p> <p class="p0"><span style="font-family: 宋体;">小结266</span></p> <p class="p0"><span style="font-family: 宋体;">附录A 从Ionic 1 升级到Ionic 2267</span></p> <p class="p0"><span style="font-family: 宋体;">附录B 理解configxml 文件270</span></p> <p class="p0"><span style="font-family: 宋体;">附录C Ionic 组件库280</span></p> </div>显示全部信息前 言免费在线读序
在2013 年,我们小组正忙于几个拖曳式工具的开发,用在两个*流行的移动和桌面Web 框架上:jQuery Mobile 和Bootstrap。我们发现在Web 开发中的可重用组件和框架发生了快速增长,正在创建更好和更具包容性的工具,让它们的使用变得更加简单。
刚好在那个时候先后发布了iPhone 5 和iOS 7,Web 性能得到了明显提升,新的Web API 也开放了,移动浏览器App 的性能和特性达到了****的程度。我们开始设想,能不能利用这些新特性搭建出一个框架,提供类似原生一样的UI工具包,让Web ***能够用标准的浏览器技术创建出原生品质的App ?你可能会说,这是“移动版的Bootstrap”吧?
恰逢此时,Angular 1 被广泛使用于各种Web 开发环境, **地解决了JavaScript 和HTML Web 组件的重用问题。我们决定搭建一个移动优先的 WebUI 框架,使用高速增长的Angular 1 框架,来实现交互性和可分发。
Ionic 的**版发布于2013 年末,它吸引了Web ***的兴趣,这个项目使其在GitHub 上的star 数目和用npm 安装的数目快速增长。一年半后,创业公司、开发团队和企业用户用这个项目开发超过100 万个App。
2015 年,JavaScript 在一夜之间发生了翻天覆地的变化。ES 5,这个从Web 2.0时代就广为人知的JavaScript 版本变成了过去式。取而代之的是ES 6,新一代的JavaScript 版本产生了,具有全新的面向对象开发特性,如新的sharing 和loading 模块,更简洁的语法等。整个JavaScript 世界因为浏览器运行时沸腾不已,***争先恐后地用上了ES 6。转译器被编写出来了,用于将新的JavaScript 语法转译成ES 5 语法以便浏览器能够理解。***正在摸索将JavaScript 库分发为可重用模块的*佳做法。新的用于编译和发布独立JavaScript 模块的构建工具不断被发明、抛弃和重建。试图减少错误并使现代JavaScript 语法更加标准化的新项目出现了,比如TypeScript和Flow。随着ES 7 以后的实验特性不断被添加到转译器中,在新特性进入生产代码库之前,那些被抛弃和从标准中删除的特性会让保守的JavaScript ***更加懊悔。总之,这是一场混乱。
来自ES 6 之前时代的框架作者,突然会面临着一个令人生怯的任务,将自定义的抽象换成标准的ES 6 以后有效的抽象。这些框架,很少有动力开发出像Angular 1 一样的抽象。对于Angular 来说,问题十分简单:如何将所有的和框架相关的东西比如scope、controller、directive 等转换成标准的JavaScript 类、Web 组件一类的东西呢?
通过JavaScript 的这次罕见的升级,Angular 团队从**个主要的JavaScript 框架的构建中取得了一些经验,并在未来的兼容Web 和移动开发的框架中应用这些经验。这并不妨碍将Angular 1 的主要概念映射成非常成熟的ES 6 概念。事实上,从许多方面来说,它们在ES 6 中变得更自然。

序1
前言5
第1 章混合移动App 11
Ionic 框架是什么?12
Ionic 2 有什么新特性?12
不同移动开发方式的比较13
理解Ionic 的技术栈15
进行Ionic 应用程序开发的**条件17
小结18
第2 章配置开发环境19
安装Ionic 框架19
新建Ionic 项目22
安装平台工具25
配置模拟器26

Ionic创始人亲自作序,本书以step by step的方式带你感受Ionic强大的UI组件库,教你用它编写三个跨平台移动App。