Ionic实战9787121292064

译者序

刚入职的时候，团队参加 Hackathon的过程中需要制作一款移动应用，在没有 iOS和 Android工程师的情况下，经过调研， Ionic成了我们最终的技术解决方案，也为我翻译本书打下了契机。我经常说技术没有银色子弹，没有最完美的，只有最适合的。 Web App虽然有为人诟病的性能问题，但是在人员、时间、功能、性能等的权衡下，Ionic必然是有它的受众的。

本书是 In Action系列的一员，这就注定了它是一本实战书的命运。而事实也是如此，基本上每章都会用一个示例贯穿全章。我喜欢这种感觉，纯理论的书读起来让我昏昏欲睡，实战这种从 0到 1将最终成品展现在眼前的形式让我非常有成就感。相信这也是大多实战派钟爱的感觉吧！当然这并不是说理论不重要，我希望的是以实战为引，通过实战慢慢去理解并深入理论，而后将理论反作用于实战，相辅相成才是最终奥义。

实战书不好的地方在于它势必会贴很多代码，我甚至在有的书上看到过整页整页的代码。相信本书的作者也不想这样，所以很多时候他只列出了一些必要的代码并提醒大家可以到 Github仓库上查看完整代码。在这里也推荐大家在看完本书中的内容后再去看看仓库中的示例，虽然书上的注解非常详细，但我相信大家定会有另

一番收获。

书上的代码是基于 Ionic 1.x的，而 Angular 2发布在即，Ionic 2也发布了 Beta版。很多人对于这本书是否已经过时产生了疑问。对于这一点大家大可放心，官方文档对于修改的地方详细地列出了新旧版本的写法，而且 Ionic 2的接口和组件基本上都维持了原样。当然，我个人觉得还是要理解 Ionic的精髓，举一反三才能对代码的理解大有助益。

本书算是我翻译的“处女作”，虽然我已经尽全力但难免有纰漏，如果你在阅读的过程中有不明白的地方可通过 i@imnerd.org联系我。这里首先要感谢奇舞团给了我这样一个机会，然后我要感谢本书的另一位译者梁杰在翻译过程中提供的帮助，此外我还要感谢李松峰老师，他百忙之中帮我们审校译文。感谢我的妈妈在我人生中给予我的无私的爱。当然还要感谢书本前的你，我们的不期而遇定会触发新的奇迹。祝君好运！

李喆明2016年5月15日

序

本书是 Jeremy Wilken九个月的努力成果，他是一位顶尖的 Ionic开发者，从 2013年开始我们就在一起开发并开源 Ionic，和他一起工作是一件非常愉快的事。本书不仅介绍了 Ionic的开源 SDK，还包含许多对资深 Ionic开发者有帮助的信息。 

Jeremy为本书开发了三个 Ionic应用，几乎用遍了现有的 Ionic组件。通过这三个应用，你可以学会如何组合这些组件。第一个应用可以帮助度假胜地服务用户，它用到了滑动页面、列表、卡片、内容容器以及基础导航。第二个应用是比特币市场应用，可以展示比特币的实时汇率，用到了下拉刷新、弹出窗口、选项卡、图表、高级列表以及嵌套视图。第三个应用是天气应用，使用了模态框、自定义滚动区域（分页滚动）、外部数据加载、边栏菜单以及一个搜索视图。

这些应用都很有特点并且比较完整，它们已经完成了应用商店上架所需的 80%的功能，其余的 20%会在每章结尾列出，由读者完成。

对于经验丰富的 Ionic开发者来说，本书介绍了如何实现特定平台的功能开发，比如在 iOS上使用动作菜单，在安卓上使用弹出窗口。本书同样介绍了 Ionic生态系统的背景以及如何使用 Cordova及其插件；介绍了 Ionic平台提供的各种服务，比如 Ionic视图；还介绍了如何使用高级技巧和测试来优化 Ionic开发流程。 Jeremy用优秀的例子结合他独到的视角来教大家如何搭建环境并编写你自己的测试。

在和 Max Lynch以及 Ben Sperry一起开发 Ionic之前，我加入了他们的公司，负责开发已经获得成功的产品，其中就包括 Codiqa，这是一个图形化的 jQuery Mobile拖曳构建工具。在开发 Codiqa时，我意识到设备和浏览器的潜力并没有被充分开发，用户一直在要求我们为工具添加更多的功能。最终，我们决定创建自己的 Hybrid应用开发套件，充分发挥移动设备的潜力。有了 Angular这样的强力工具，我们有能力将 Hybrid移动应用开发推进到能和原生应用开发相抗衡的程度。我们在 2013年发布了 Ionic的 alpha版，令我感到自豪的是，开发社区非常快地接受了 Ionic并帮助它进一步发展。更令我激动的是，Ionic才刚刚起步，我们会继续完善它，让开发者可以更快更轻松地开发高性能的应用。

本书既有对 Ionic的介绍，也有更加深入的应用开发最佳实践，因此无论你是初学者还是资深开发者，都会有所收获。非常感谢你加入 Ionic社区。

玩得开心！ 

Adam Bradley Ionic框架联合创建人

前言

几年前人们还在争论是否值得为移动端应用开发投入时间和精力，时至今日，手机的重要性已经毋庸多言。截至 2015年夏天，苹果和谷歌应用商店中的应用数量已经突破一百万。手机的销量已经达到台式机 /笔记本电脑的六倍，平板电脑的销量眼看着也要在年内超过台式机 /笔记本电脑。移动设备已经无处不在。

回到 2013年，移动应用开发领域主要的关注点还是构建原生应用。这些原生应用使用 Java或者 Objective-C写成，开发者需要学习这些语言、平台工具、 SDK等。对于像我这样的 Web开发者来说，这是一道很难跨越的障碍。当时的移动端 Web主要是构建响应式网站而不是移动端应用。由于老式设备和浏览器对 Hybrid应用（使用 Web技术构建的原生应用）支持不好，再加上设计风格和原生应用完全不同，很少有人会选择 Hybrid应用。 

Ionic的发起者们看到了机会。他们意识到移动设备正在迅速发展， Hybrid应用会成为原生应用的有力对手。有些开发者想用他们已经掌握的 Web技术来开发原生应用，而这也正是 Ionic的目标。 Ionic使用了开源项目 Cordova和 Angular，把它们整合成一个统一的 Hybrid移动应用开发平台。 

1.0版本发布之后， Ionic已经可以支持 Web开发者构建移动应用。 Ionic团队自豪地把 Ionic称作： Hybrid应用“一直在等待的那个 SDK”。写完本书之后，我已经可以看到 Ionic的光明未来。 Ionic如此强大的核心就是本书介绍的那些开源组件。此外，围绕 Ionic的服务平台正在搭建中，包括推送通知、数据分析、 beta测试等。我维护着很多受欢迎的开源项目，这些项目都有完善的开发和社区支持， Ionic就是其中之一（目前是 GitHub Star最多的前 40个项目之一， Ionic使用的 Angular在本书编写时是前三名）。大量的应用使用 Ionic构建，有些甚至得到了应用商店的推荐。

我一直想把自己的学习经验分享出来，告诉大家如何成为一名移动应用开发者，写这本 Ionic的书也延续了这一思想。最初我的计划是将 Ionic的特性作为核心进行讲解，对每个特性进行单独介绍。写了 6章之后，我发现这个方法行不通。我喜欢那些能够运行并且能够交互的东西，对移动应用来说能上手使用是最好的。

因此，写完前三个核心章节的草稿之后，我扔掉了它们，从头开始，直接用实践来进行介绍。这和我使用 Ionic开发第一个应用时所采用的学习方法很像，希望这能帮助你更好地学习 Ionic。实际上，你会发现本书的所有章节都充满这种对读者的关怀。

我在不断试错中掌握了 Ionic，文档永远是一位好老师。工作中需要开发移动应用的时候，我可以使用 Ionic在一天之内做出一个原型。 Ionic刚出来的时候，我总会不断更新我的应用，让它适配 Ionic的改动和新特性，在这个过程中我深深感受到 Ionic发展速度之快。 beta版发布几个月之后， Ionic就完善了 API和架构设计，并沿用至今。

在未来， Ionic必将包括更多社区驱动的贡献和组件、更多的平台服务和更高的性能及质量。我迫不及待地想知道你会做出什么，我也很高兴能见证你在 Ionic的帮助下成为一名移动应用开发者。

致谢

在本书中，我分享了许多学习经验，这些经验都要归功于我得到的锻炼、指导和支持。虽然无法将每个为本书诞生做出贡献的人都罗列出来，但我知道，贡献最大的人是开源社区中的那些重度参与者。他们编写、维护并支持了开源项目，我对他们致以最崇高的尊重和感激。

谢谢 Manning，谢谢那些优秀的编辑，是你们的努力工作让这本书成为现实。多亏有 Robin de Jongh，本书才得以起步，我的写作热情也全靠他维持。真诚地感谢 Helen Stergius，是她不知疲倦地编辑、深夜头脑风暴、积极的态度和活力推动我完成主要的编写流程。我还要感谢团队中的其他人，在他们的帮助下完成了本书的出版和审校工作，尤其要感谢 Gregor Zurowski、Katie Tennant、Mary Piergies、Janet Vail、Matt Merkes、Candace Gillhoolley、Kevin Sullivan、Donna Clements和 Jodie Allen。

许多同行评审者帮助我完善草稿中薄弱环节的漏洞，也让我更有信心做出积极改变。非常感谢 Andrea Prearo、Barbara Fusinska、Charlie Gaines、Cho S. Kim、 Chris Graham、Gareth van der Berg、Giuseppe de Marco、Jeff Cunningham、Ken Rimple、Kevin Liao、Lourens Steyn、Patrick Dennis、Rabimba Karanjai、Satadru Roy和 Wendy Wise——你们提出了许多有用的建议，如果没有你

第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　如何支持联网和离线模式． 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　使用 $ionicCon．gProvider编辑默认交互行为 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