作者：奇舞团
出版社：电子工业出版社有限公司
格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT
Ionic实战：基于AngularJS的移动混合应用开发试读：
前言
几年前人们还在争论是否值得为移动端应用开发投入时间和精力，时至今日，手机的重要性已经毋庸多言。截至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——你们提出了许多有用的建议，如果没有你们，书稿还会遗留很多问题。许多MEAP评审者也在论坛上提出了很多有用的反馈。很高兴有这些愿意花钱买书并且愿意帮助作者完善内容的人。
如果你见过Ionic团队中的成员，你就会发现他们是技术和开源领域中最无私并且最聪明的那群人。我非常感谢Ionic团队开发出Ionic（这样我才有了写书的机会！），还要感谢他们用心地阅读和回答我的问题。我尤其要感谢Adam Bradley, Ben Sperry, Katie Ginder-Vogel和Mike Hartington，感谢他们的邮件、Skype电话以及我们的私下沟通。Ionic社区就是在你们不知疲倦地努力和工作下日益壮大。此外，特别要感谢Adam给本书撰写序。
最后，还要感谢我的妻子Linda，她一直是我坚强的后盾。我向她保证，以后绝对不在孩子出生的时候写书。如果没写过书，你无法想象需要投入多少时间和精力。在我窝在办公室里写稿子的时候，Linda给予我极大的支持和理解。我永远爱你，也永远爱我们的孩子。第1章Ionic和Hybrid应用介绍本章要点■ 为什么选择Ionic，它对你有什么好处■ Ionic是什么，它和Angular、Cordova有什么关系■ 为什么Hybrid应用对移动开发来说是最好的选择■ 介绍Android和iOS平台的需求对许多开发者来说，构建移动应用已经成为一项重要技能，在Ionic的帮助下，你可以构建和原生应用非常相似的Hybrid移动应用。Hybrid应用指的是使用浏览器窗口展示界面的移动应用。Ionic通过集成工具和功能，让开发者可以使用构建网站和Web应用的技术（主要是HTML、CSS和JavaScript）快速构建Hybrid移动应用。Ionic的工作原理是通过Cordova把一个Web应用嵌入原生应用。Ionic集成了Angular，用于在移动端环境中创建Web应用，支持包括用户界面控件和触摸输入响应在内的移动端特性。本书的目标是让开发者学会使用Ionic构建移动应用。我会教你如何正确设置项目以及如何构建丰富的界面，并用真实的案例进行实践。我会帮助你搭建生产环境需要的构建、测试和开发流程。不过在那之前，我们首先需要深入了解Ionic以及用它构建Hybrid移动应用的好处。1.1 Ionic是什么
Ionic通过整合各种技术和功能使构建Hybrid应用更加快速、容易和美观。Ionic的生态系统基于Angular和Cordova，前者是Web应用框架，后者是构建和打包原生应用的工具。图1.1展示了整个技术栈的概况，之后我们会对它们进行详细介绍。下面我们来简单介绍一下这个技术栈。图1.1 Ionic框架的技术栈以及关联
在图1.1中，技术栈的起点是用户在设备上打开应用。假设是一台运行iOS的iPhone或者一台运行Android的Nexus 10。下面是各个部分的介绍。
■ 设备—设备可以加载应用。设备中的操作系统负责安装从平台对应商店下载的应用。操作系统还会提供一系列应用可以使用的功能API，比如GPS位置、通讯录列表和照相机。
■ Cordova应用包装器—这是一个能够加载We b应用代码的原生应用。Cordova是一个平台，用于构建能够执行HTML、CSS和JavaScript的原生应用，这种应用被称为Hybrid移动应用。它是平台和应用之间的桥梁，可以创建一个能够安装的原生应用（图1.1中被称作应用封装器）。这个原生应用中包含WebView（实际上是一个独立的浏览器窗口），可以通过JavaScript API来运行Web应用。
■ Cordova JavaScript API—这是沟通应用和设备的桥梁，应用封装器可以通过JavaScript API来联通Web应用和原生平台。具体的实现细节不用在意，总之最后Cordova会帮你生成原生应用。
■ Angular—用来控制应用路由和功能的Web应用。Angular Web应用运行在WebView中。Angular是一个流行的Web应用构建框架，主要管理Web应用的逻辑和数据。
■ Ionic—控制应用中用户界面组件的渲染。Ionic基于Angular构建，主要用来设计用户界面和用户体验。Ionic包含一些视觉元素，比如选项卡、按钮、导航头部。这些界面控件是Ionic的核心，可以在Hybrid应用中提供接近原生界面的体验。Ionic还提供了许多功能和特性，可以帮助你完成创建-预览发布整个流程。
Ionic将上述这些技术整合起来，成为一个非常强大的移动端应用开发平台。现在你对Ionic及其相关技术有了初步了解，下面我们来对比一下三种主流的移动应用，同时介绍Ionic的优势。1.2 移动开发类型
为移动设备开发应用有好几种方法，有必要知道每种方法的优点和缺点。一共有三种基础类型：原生应用、移动端网站和Hybrid应用，我们会详细介绍它们的区别。
在图1.2中，你可以看到三种类型在设计和架构上的对比。图中还展示了应用如何通过访问数据库或者Web服务API来加载数据。图1.2 比较原生应用、移动端网站和Hybrid应用的架构1.2.1 原生移动应用
要创建原生应用，开发者需要使用移动平台默认的语言，对iOS来说是Objective-C或者Swift，对Android来说是Java。写完之后需要编译应用并把它安装到设备上。开发者可以使用平台的软件开发套件（SDK）来和平台API通信，从而可以访问设备中的数据或者使用HTTP请求从外部服务器加载数据。
iOS和Android都提供了一系列预先定义好的API，可帮助开发者在可控的范围内使用平台特性。有许多官方或者非官方出品的工具可以辅助开发原生应用。对开发者来说，在原生应用中使用框架来简化开发是很常见的。原生应用的好处
比起Hybrid应用和移动端网站，原生应用有很多好处，主要得益于和设备平台紧密结合：
■ 原生API—原生应用可以在应用中直接使用原生API，这和平台的交流最紧密。
■ 性能—原生应用性能最好。
■ 环境相同—原生应用使用原生API写成，对于其他原生开发者来说很容易理解。
但是原生应用也有很多缺点。原生应用的缺点
原生应用的缺点主要是开发和维护难度大。
■ 语言要求—原生应用要求开发者掌握平台对应的语言（比如Java）并且知道如何使用平台提供的API。
■ 不支持跨平台—每个平台都要单独开发。
■ 费时费力—通常来说，需要做很多构建工作，增加成本。
如果（老板要求）你不得不使用Java和Objective-C或者团队有大量资源并且真的需要原生应用带来的好处，那最好的选择就是原生应用。除此之外，你最好考虑其他类型的应用。1.2.2 移动端网站（Web应用）
移动端网站或者说Web应用很适合移动设备使用，可以在手机浏览器中访问。Web应用就是在手机浏览器中访问的网站，它们专门被设计成适合手机屏幕尺寸。图1.3展示了一些例子。图1.3 移动端网站：左侧是响应式网站Boston Globe，右侧是移动端专用网站eBay。
有些网站的设计者会专门为移动设备开发一个版本。你在移动设备上访问网站的时候可能会被重定向到另一个功能有限的版本。比如访问eBay，你会被重定向到http://m.ebay.com子域名。而访问其他一些网站，比如www.bostonglobe.com时，你会发现网站的设计会根据设备的类型和屏幕尺寸进行调整。这用到了被称为响应式设计的技术。网站的内容会根据浏览器窗口尺寸自动调整大小，有些内容甚至会被隐藏起来。移动端网站的优点
移动端网站有很多优点，主要体现在效率和设备兼容性上。
■ 可维护性—移动端网站很容易更新和维护，没有任何审核流程，也不需要更新设备上的程序。
■ 免安装—网站在互联网中，不需要安装到移动设备中。
■ 跨平台—所有移动设备都有浏览器，它们都可以访问你的应用。
和原生应用相比，移动端网站也有很多缺点。移动端网站的缺点
移动端网站运行在手机浏览器中，因此有很多限制和缺点。
■ 不具备原生访问能力—因为移动端网站运行在浏览器中，它们不能访问原生API和平台，只能访问浏览器提供的API。
■ 需要使用键盘—用户必须在浏览器中输入地址来寻找或者使用移动端网站，这比单击一个图标困难多了。
■ 受限的用户界面—很难创建对触摸友好的应用，尤其是当要同时兼容桌面版时。
■ 移动端访问量下降—用户在移动设备上访问网站的时间不断减少，使用应用的时间越来越多。
不同的产品和服务需求不同，即使你已经有了移动端应用，可能还是需要一个移动端网站。不过总体来说，移动端网站的重要性不断下降，研究表明用户使用应用的时间更多。1.2.3 Hybrid应用
Hybrid应用指的是包含独立浏览器实例的移动应用，这个实例通常被称作We bVi e w，可以在原生应用中运行Web应用。Hybrid应用会使用原生应用封装器来实现WebView和原生设备平台的通信。这意味着Web应用可以运行在移动设备上，并且可以访问设备的功能，比如照相机和GPS。
有很多工具可以实现WebView和原生平台之间的通信，从而让Hybrid应用成为可能。发布这些工具的并不是iOS或者Android官方平台，而是第三方，比如本书用到的Apache Cordova。编译Hybrid应用时，你的Web应用会被转换成一个原生应用。Hybrid应用的优点
相比移动端网站和原生应用，Hybrid应用有一些优点，这也是它成为有力竞争者的原因。
■ 跨平台—可以只开发一次，部署到多个平台，最小化开发成本。
■ 和We b开发共用技术—可以使用开发网站和We b应用的技术来开发移动应用。
■ 设备访问能力—因为WebView被封装在原生应用中，你的应用让你可以像原生应用一样访问所有的设备功能。
■ 简化开发—开发流程简单快捷，不需要为了预览重复构建。也可以继续使用构建网站的那一套开发工具。
Hybrid应用允许使用Web平台的技术开发移动应用，你可以像开发网站一样开发应用的绝大部分功能。当需要使用原生API时，Hybrid应用框架会把API桥接到JavaScript中。你的应用可以像检测单击和键盘事件一样检测扫动和捏合手势。不过，如你所料，Hybrid应用也有一些缺点。Hybrid应用的缺点
因为身处WebView中，受到原生集成的限制，Hybrid应用有如下一些缺点。
■ WebView限制—应用只能运行在WebView实例中，这意味着应用的性能取决于浏览器。
■ 通过插件访问原生功能—你需要的原生API现在可能还没有插件实现，可能需要一些额外的开发工作来进行桥接。
■ 没有原生用户界面控件—如果没有Ionic这样的工具，开发者需要创建所有的用户界面元素。
有了Ionic，你可以使用Web开发者已经熟悉的知识和技能来构建Hybrid应用。1.3 理解Ionic技术栈
有很多种构建Hybrid应用的技术，不过Ionic主要用到了三种：Ionic、Angular和Cordova。图1.4展示了Ionic应用打开照相机时整个技术栈的工作流程。图1.4 Hybrid应用中Ionic、Angular和Cordova的关联
下面来解释一下图1.4中的各个步骤。
1.用户单击按钮（这是一个Ionic组件）。
2.按钮调用Angular控制器，后者会通过JavaScript API调用Cordova。
3.Cordova使用原生SDK和设备通信，请求使用照相机应用。
4.设备打开照相机应用（或者请求用户授权），用户可以照相。
5.用户确定照片之后，照相机应用关闭，把图片数据返回给Cordova。
6.Cordova把图片数据传递到Angular的控制器。
7.图片会更新到Ionic组件中。
这个简单的流程解释了Ionic应用是如何工作的。如果其中的一些术语你暂时不理解也没关系—我们会在后面进行介绍。重点是解释你的应用到底如何访问设备。下面我们详细解释这三个部分。1.3.1 Ionic：用户界面框架
Ionic的主要特征就是一组用户界面控件，它们在移动应用中很常见，但是并没有包含在HTML中。假设有一个基于用户位置展示天气状况的应用。Ionic提供了一系列用户界面组件，比如可以通过滑动切换到温度、预报和天气地图页面。这些组件使用CSS、HTML和JavaScript开发，它们的行为很像我们平时使用的原生控件。常用的组件有：
■ 可以从边缘滑入的边栏菜单
■ 开关按钮
■ 选项卡
在图1.5中你可以看到一张截图，在后面的章节中我们会构建这个示例应用。这张图展示了如何用多个不同的Ionic组件创建强大的用户界面。图1.5 如何把Ionic组件组合成一个可用的界面
Ionic是一个开源项目，主要由Ionic团队开发。自2013年11月发布之后， Ionic获得了极大关注，已经成为构建Hybrid应用的首选，每个月有超过两万款新应用使用Ionic开发。Ionic遵循MIT协议开源，官网是http://ionicframework.com。
Ionic有一个命令行界面（CLI）工具，包含一些有用的开发者工具。我将它称为CLI工具。这个工具可以生成起步项目，还能预览、构建和部署你的应用。在后面的示例项目中我会介绍CLI工具的绝大部分功能。
Ionic包含一个字体图标库，有大量常用图标供你选择。当然，这个库是可选的，不过默认包含在Ionic中，后面的例子里我们也会经常使用它。
Ionic还有许多辅助移动应用开发的服务，比如可视化拖曳应用创建和部署工具、用户追踪和分析以及推送通知。你可以在https://ionic.io查看完整的Ionic平台。
用户界面控件是Ionic的主要特征，不过Ionic团队也在努力把Angular和Cordova集成到Ionic中，这就是下面我们要讨论的。1.3.2 Angular：Web应用框架
Angular（也被称为AngularJS）是谷歌的一个开源项目，在Web应用开发者中非常有名。它提供了良好的应用架构，可以帮助Web开发者快速开发完整应用。在本书的天气应用示例中，你会使用Angular来管理用户数据并从天气服务中加载信息。
Miško Hevery和Adam Abrons在2009年开始开发Angular，实际上是Hevery带着Angular加入了谷歌。今天这个项目已经非常有名，包括www.stackoverflow.com和www.nasa.gov在内的许多大型网站都在使用。Angular遵循MIT协议开源，详情请访问http://angularjs.org。
你不再需要使用服务端语言（比如PHP、Ruby或者Java）来构建复杂应用。今天，类似Angular这样的JavaScript Web应用框架可以帮助你在浏览器中开发复杂应用。通常来说，服务器应用只需要管理私有数据并加密业务逻辑。这对Hybrid应用开发者来说是一个好消息，因为浏览器就是你创建应用的平台。如果你很熟悉Angular（或者其他JavaScript应用框架，比如Ember和Backbone），就可以轻松地使用Ionic开发移动应用。
在本书中，我们也会使用第三方开发者开发的Angular模块。其中一个重要的模块被称为ui.router，它是一个开源的Angular模块，可以提供比Angular默认路由模块更好的应用路由和导航功能。1.3.3 Cordova：Hybrid应用框架
在本书中，我们会使用Apache Cordova作为Hybrid应用框架。它作为一层，主要任务是实现浏览器窗口和原生API的通信。天气应用示例需要访问设备的GPS信息，从而加载对应位置的数据，Cordova可以实现Angular和设备的数据传输。
你可能还听说过PhoneGap。Adobe把PhoneGap项目贡献给了Apache软件基金会，这个项目被改名为Cordova。现在，PhoneGap是Cordova的一个发行版，或者说，PhoneGap实际上是包含Adobe商业特性的Cordova。在本书中我们会使用Cordova，如果需要那些特性你也可以使用PhoneGap。
Cordova是由一个庞大社区支持的Apache开源项目，Adobe仍然是框架的主要开发者，Cordova遵循Apache 2.0协议开源。
Cordova有一系列核心功能；除此之外，它也提供了一个插件系统，开发者可以创建一些新功能，比如把原生API和手机的照相机集成。这个项目很活跃，会稳定发布新版本。你可以在http://cordova.apache.org了解更多相关信息。
Ionic赞助了ngCordova项目，其官网是http://ngcordova.com。ngCordova把一系列Cordova插件和Angular进行了集成。第8章会详细介绍Cordova和插件，还会介绍许多ngCordova项目的使用方法。1.4 为什么选择Ionic
Ionic对Hybrid应用做了许多重大改进，这是jQuery Mobile这类项目所不具备的。不久之前，移动设备的性能还很弱，只有原生项目能满足开发者的性能需求。移动平台的创建者并没有把浏览器的性能提升到和原生平台同样的高度。但是现在一切都变了，移动设备变得更加强大，平台在不断进步，类似Ionic这样的新工具让开发优秀的Hybrid应用成为可能。1.4.1 开发者为什么要选择Ionic
Ionic可以为Hybrid应用提供看起来和用起来都很像原生应用的体验。长久以来，大家都认为只有原生应用才能做到速度快和功能丰富，但是这个观点已经被证明是错误的。大家都希望自己的移动应用速度快、运行流畅并且好看，Ionic应用可以：
■ 在We b平台上开发应用—你可以使用HTML、CSS和JavaScript开发类似原生应用的Hybrid应用。
■ 使用Angular开发—对于那些熟悉Angular（或者像Ember这样的框架）的人来说，Ionic是一个不错的选择。Ionic使用Angular进行开发，所以你可以使用Angular的全部功能以及所有第三方模块。Angular的目标是开发主流应用，Ionic把Angular扩展到了移动领域。
■ 使用现代技术—Ionic使用现代的CSS3特性进行开发，比如动画。移动端浏览器对Web平台新规范的支持更好，因此你可以使用这些新特性。
■ 社区支持和开源精神—Ionic社区在论坛和代码贡献上都非常活跃，也非常愿意分享平台相关的技巧。开源精神贯穿整个项目。
■ 强大的CLI工具—有了CLI工具，你可以快速管理开发任务，比如在浏览器中预览应用、模拟运行应用或者把应用部署到连接的设备中。你还可以用它创建和设置项目。
■ Ionic服务—Ionic提供了许多辅助开发的服务。Ionic Creator服务可以让你用拖曳界面的方式设计和导出应用。Ionic视图服务可以帮你把beta版应用发布给客户和测试用户。总之，Ionic不仅是创建Hybrid应用的基础工具，也是帮助你提高效率的开发者工具。
■ Ionic有一个专职团队—开源项目的隐患之一就是你不确定它是否能获得持续开发和支持。Ionic有一个专职团队，他们会不断推动平台发展。
■ 类似原生的体验—使用Ionic可以创建类似原生应用的体验，用户更容易使用你的应用。
■ 性能—Ionic性能不比原生应用差；性能越好，用户越开心。
■ 美观、可定制的设计—用户界面组件是按照原生风格精心设计的，你也可以轻松地针对应用进行自定义。
使用Ionic，你可以为用户快速创建功能丰富的应用。这对你、你的团队和你的用户来说都有很大的价值。1.4.2 Ionic的缺点
Ionic不可能满足所有人的需求。下面是Ionic目前存在的问题，你在使用之前需要仔细考虑。
■ 平台限制—Ionic 1.0目前只支持iOS和Android平台，像Windows Phone和Firefox OS这样的平台未来可能会支持，不过无法保证。应用或许可以在其他平台运行，不过Ionic不保证支持。
■ 不支持老平台—Ionic只保证支持iOS 7+和Android 4+。旧版或许也能运行某些功能，但是我们并不会专门测试。如果你的应用需要兼容旧设备，那这可能是个问题。
■ 不等于原生—原生设备API必须在Cordova支持之后才能使用。如果你需要和设备深度集成，用Ionic很难实现。
■ 不能应付大量图像—因为运行在浏览器中，Hybrid应用天生就有这个限制。如果你想做游戏应用或者需要操作大量图像，那Hybrid应用环境并不合适，需要使用原生应用环境。
有时候你可能不得不放弃Ionic，不过即使在这些情况下，使用Ionic做原型也是个不错的选择。1.5 使用Ionic构建应用的前提
要构建Hybrid应用，你需要具备一些本书中没有介绍的技能。你不需要成为下面这些领域的专家，但是要掌握基础知识。1.5.1 掌握HTML、CSS和JavaScript
如果你开发过网站，那你就已经使用过Web平台。浏览器就像一个操作系统，你会用它来开发本书中的示例移动应用。HTML、CSS和JavaScript是浏览器开发的核心语言。HTML指定内容结构，CSS提供样式设计，JavaScript提供Web应用必需的交互和逻辑。
你需要熟悉JavaScript语法以及一些概念，比如异步调用、事件、原型继承和变量作用域等。1.5.2 掌握Web应用和Angular
你需要掌握Web应用的基础知识，因为我们会在移动应用示例中用到它们。有许多技术和库可以构建Web应用，如果你有相关经验会有很大帮助。
本书使用Angular框架编写Web应用。Ionic集成了Angular，因此使用Angular开发过应用的开发者很容易上手Ionic。你可能用过其他框架，如Ember和Backbone，这也有助于你掌握Angular的开发思路。
我们会在第3章介绍一些Angular知识，帮助你掌握它，不过这并不是一本讲Angular的书。如果你想深入学习Angular，可以阅读AngularJS in Action（http://manning.com/bford）和AngularJS in Depth（http://manning.com/aden）。1.5.3 拥有移动设备
构建移动应用时，非常重要的一件事就是拥有移动设备。我建议你至少为每个平台准备一台设备，从而可以进行真机测试。有许多模拟器可以用，但是都无法替代真机。
你需要使用你的开发者账号注册这些设备，所以最好不要借别人的设备。如果你需要设备，可以从网上买二手的，专门用来测试。对你的应用来说，能测试的设备越多越好。
这三个前提条件可以帮助你更成功地设计、测试和构建跨平台的移动应用。下面我们就来看看Ionic支持什么移动平台。1.6 Ionic支持的移动设备和平台
现有的移动平台—iOS、Android、Windows 8、Firefox OS、Tizen、黑莓等—有很多。你可以使用Ionic构建iOS和Android应用。未来计划支持Windows 8和Firefox OS，不过现在还不支持。
虽然可以使用模拟器来预览开发好的应用，但是这和真实效果完全不同。下面我们详细介绍一下这两个主流平台以及Ionic的要求。1.6.1 苹果的iOS
苹果创造了流行的iPhone和iPad设备，并发布了一个通用的平台：iOS。苹果强力控制了从设备到软件和应用的整套体验，把iOS变成了一个封闭的系统。从用户和开发者的角度来说，iOS平台确实非常强大。
苹果提供了Xcode作为iOS和OS X的主要开发工具。Xcode是免费的，如果你还没下载，可以从App Store下载。下一章我们会介绍如何设置iOS开发环境。
Xcode自带的模拟器可以模拟不同版本的iPhone和iPad。模拟器可以很好地模拟真实体验，可以方便地测试同一应用在不同iOS版本下的表现。
在开发iOS应用时，苹果要求你必须使用Mac电脑。苹果的开发者工具只能运行在苹果的操作系统—OS X—上，而且建议你使用最新版。
对于没有Mac的人来说，如果准备做iOS开发，建议你购买一台。如果你只需要构建移动应用，那任何一个型号的Mac都足够用。新Mac的处理器性能更强，能更快地进行模拟和构建。如果你想买二手机器，那需要把它升级到最新版的 OS X。
如果你没有Mac，也有一些其他的方式可以构建应用。Ionic正在开发一个服务，帮助你构建所有支持平台的移动应用—即使你没有Mac。
要开发苹果的软件，你需要加入苹果的开发者计划，有iOS和OS X两种类型。你需要在http://developer.apple.com注册账号并加入iOS计划。每年需要花费99美元，不过你只要在签名和发布应用到App Store之前注册就行。你可以在没有账号的前提下下载Xcode并学完整本书，直到你需要把应用部署到App Store。1.6.2 谷歌的Android
谷歌开发了Android开源移动平台，允许移动设备开发商把Android集成到设备中。和苹果相比，Android有非常多的设备，因为谷歌无法控制安装Android的所有设备。旧设备使用的可能是定制过的Android。由于不需要购买操作系统授权，这种开放系统得到广泛应用，并催生出一批低价机器。
Android有许多免费的开发工具，可以从http://developer.android.com/下载。谷歌正在开发Chrome（谷歌的浏览器）内置的工具，辅助Hybrid应用开发者进行开发。下一章我们会介绍如何配置Android开发环境。Android SDK包含模拟器，你可以用它模拟绝大部分Android设备的屏幕尺寸和分辨率。
Android开发工具支持Mac、Linux和Windows系统。详情请访问https://developer.android.com/sdk/index.html。
谷歌也有开发者计划，只需要一次性缴纳25美元。和iOS一样，在将应用发布到Play Store之前你不需要注册账号。你可以在https://play.google.com/apps/publish/signup/注册。
还有一些其他的Android应用商店，比如Amazon Web Store，也需要加入开发者计划。这些不在本书的范围内，不过你可以构建和部署适配所有安卓设备的应用，无论它们被发布到什么商店。1.7 总结
在本章中我们了解了Ionic针对Hybrid应用开发提供的一系列强大工具。下面回顾一下本章的主要话题。
■ Ionic对开发者、管理者和用户来说都是一个明智的选择。
■ Hybrid应用对那些熟悉Web平台的开发者来说很有用，他们不需要再学习其他编程语言。
■ Hybrid使用原生应用中的WebView来运行Web应用，可以通过WebView访问原生API。
■ Ionic集成了Angular和Cordova，前者用于开发Web应用，后者用于集成设备平台。
■ 支持Android和iOS平台，不过都需要加入开发者计划，iOS开发工具需要运行在Mac上。
下一章我们会学习如何配置Ionic的开发环境，并创建一个简单的应用。第2章配置开发环境本章要点■ 通过一个示例程序来掌握配置过程■ 在电脑上的模拟器中预览示例程序■ 构建示例应用并载入连接好的设备你应该已经准备好编写代码并构建一个真正的移动应用了。我会帮助你准备好Ionic开发所需的所有工具并创建一个示例程序。学完本章后，你能开发出一个能够在电脑模拟器和设备上运行的示例应用。本章介绍的步骤同样适用于后面的章节，你可以随时回来查阅。本章分两个部分讲解如何配置开发环境。第一部分会介绍如何安装工具、运行示例应用并在浏览器中进行预览。这个过程会帮助你为后面的快速开发做好准备，相当于配置开发环境。第二部分会介绍如何在模拟器或者设备中预览你的应用，就像图2.1那样。这一步主要是配置预览环境。如果你迫不及待想开始构建应用，可以跳过本章的第二部分，需要的时候再回来看。模拟器和设备并不是必需的，除非你准备好在真实的移动环境中进行测试，或者需要使用类似相机和GPS这样的功能。在阅读本书的过程中，你会经常和命令行打交道。在Windows中可以使用命令提示符，在程序列表中就能找到。在OS X中可以使用终端，可以在Launchpad中找到，也可以在Spotlight中输入terminal打开。我建议你在Windows的桌面或者OS X的dock中添加一个快捷方式，因为你经常要用到它。Linux用户可能需要安装一些额外的依赖，详情请查阅对应的Linux系统文档。图2.1 你可以在浏览器、模拟器和连接到电脑的设备上预览示例应用。2.1 快速上手
在本节中你会学习如何配置核心开发环境、配置第一个应用并在浏览器中预览。因为你构建的是Hybrid应用，所以浏览器就成为最简单的预览工具。
在开发时，大部分时间都会使用浏览器预览和开发应用。应用基本成型后，可以使用模拟器或者真实设备来运行。图2.2展示的是典型的开发流程，本节会介绍用浏览器预览的方法，下一节会介绍其他两个选项。2.1.1 设置开发环境
在使用Ionic开发移动应用之前，你需要确保安装了必要的软件。我会告诉你如何在你的电脑上安装和配置它们。表2.1中展示的是你需要安装的软件。
此外，我还建议你使用Git来进行代码版本管理，这样会轻松很多。这不是必需的，不过我会提供Git命令供你参考。如果你还不熟悉Git或者还没有安装它，可以查阅http://git-scm.org。图2.2 典型的工作流，以及不同预览方式的适用场景。表2.1 开发环境需要的软件
如果你已经安装了表中列出的软件，可以跳过下一节，如果没有，那我们来看看具体的安装命令。安装Node.js
Node.js（通常被称为Node）用于在非浏览器环境下运行JavaScript。开发者可以编写JavaScript应用并在任何地方运行。Ionic和Cordova都基于Node开发，所以需要先安装它。
要安装Node，你可以访问http://nodejs.org并下载对应平台的安装包。如果你已经安装了Node，需要把它升级到最新的稳定版。
你可以在OS X的终端或者Windows的命令提示符中运行下面的代码来验证Node是否成功安装：
如果你在安装过程中遇到了问题，可以阅读Node官网上的文档。下面我们会使用Node包管理工具来安装Ionic和Cordova。安装Ionic CLI和Cordova
用一条命令就能安装Ionic和Cordova。这条命令使用Node包管理工具（npm）来安装并设置命令行界面（CLI）工具。执行之前确保你已经安装了Git：
这条命令需要执行一段时间，这取决于你的网速。在Mac上安装全局模块时，如果不加sudo可能会报错。在本例中，我建议不要允许Node模块以管理员权限运行。你可以在mng.bz/Z97k找到权限问题的解决方法。
Ionic和Cordova可以直接从命令行执行。它们都需要Node来执行，但是因为设置了别名（alias），你可以直接执行cordova和ionic命令。运行下面的命令来确认它们被成功安装：
配置开发环境非常重要，所以一定要确保成功安装并且是最新版本。你应该及时更新Ionic，它会在需要更新时提醒你。对于Cordova来说，如果有你需要的新特性或者bug修复，就需要进行更新。有时更新Cordova之后需要更新你的项目，所以不到万不得已不要更新，而且要经常查看Cordova的文档，了解更新后要做的改动。如果要更新Ionic或者Cordova，可以运行下面的命令（有更新时Ionic会通知你）：
到这里你已经完成环境配置，下面我们来创建示例应用。2.1.2 创建一个新项目
Ionic提供了一个简单的start命令，几秒钟就可以创建一个新项目，如图2.3所示。Ionic提供了许多起步模板，这里我们使用sidemenu模板。运行下面的命令来创建一个新项目，然后切换到新目录中：
程序可能会问你是否要创建一个Ionic账户，暂时可以无视它。这个账户可以使用Ionic提供的服务，不过现在我们用不到，需要的时候随时可以创建。图2.3 使用Ionic的start命令生成一个示例项目脚手架Ionic命令行程序Ionic程序有很多命令，可以运行ionic --help来查看所有的可用命令。如果要了解程序的详情和文档，可以阅读GitHub上的源代码：https://github.com/driftyco/ionic-cli。
Ionic会创建一个名为chapter2的新文件夹并在其中使用默认的tabs模板创建新项目。下面我们看看每个文件夹的作用。2.1.3 项目文件夹结构
项目文件夹中有很多文件和目录，它们有不同的作用。下面是新项目中包含的文件和目录：
■ .bowerrc
■ .gitignore
■ bower.json
■ config.xml
■ gulpfile.js
■ hooks
■ ionic.project
■ package.json
■ plugins
■ scss
■ www
这是Ionic应用的通用结构。Cordova相关的文件和目录是config.xml、hooks、platforms、plugins和www，剩下的都是Ionic创建的。Ionic使用Bower和npm管理项目依赖。Bower和npmBower和npm都是包管理工具，可以用来下载Web应用所需的额外文件。Bower的目的是帮助你管理项目中的前端文件，比如jQuery和Bootstrap，npm的目的是管理Node项目或者Node应用所需的包。在Ionic中，前端的Ionic代码使用Bower加载，Gulp依赖使用npm加载。Gulp是一个流行的JavaScript构建工具，后面会进行介绍。可以在http://bower.io和https://npmjs.org查看更多有关Bower和npm的信息。
Cordova会使用config.xml生成平台文件，其中包含的信息有作者、全局设置、平台对应设置、可用插件等。默认生成的config.xml文件中的作者是Ionic，应用名称是HelloWorld。更多选项介绍请访问https://cordova.apache.org/docs/en/edge/configrefindex.md.html。
www目录包含WebView中需要运行的所有Web应用文件。它会假设目录中存在index.html文件，除了这个限制，其他文件你可以随意组织。Ionic默认会创建一个基础的AngularJS应用供你使用。
在具体使用中我们会详细介绍这些文件和目录，现在文件已经生成完毕，你可以预览示例应用了。2.1.4 在浏览器中预览
你可以在浏览器中预览应用，这样可以轻松地调试和开发，不再需要构建项目并使用设备或者模拟器运行。通常来说，你会先用这种方式开发应用，在快要开发完成的时候使用模拟器和设备进行测试。下面的命令会启动一个简单的服务器并打开浏览器，甚至可以在文件内容改变的时候自动刷新浏览器：
执行时可能会提醒你选择地址，大多数情况下选择localhost即可。程序会自动打开你电脑中的默认浏览器并访问8100端口。你可以用任意浏览器访问http://localhost:8100，不过最好使用目标平台使用的浏览器，和WebView使用的浏览器保持一致。
因为你是在浏览器中预览应用，可以使用构建网站时使用的开发者工具。在开发的过程中，可以打开开发者工具来进行开发和调试，如图2.4所示。我用哪个浏览器预览真的很重要吗？虽然你可以使用任意浏览器预览应用，但是建议你使用Chrome或者Safari。iOS的WebView使用的是Safari，Android使用的是Android浏览器。尽量在电脑上使用同样的浏览器，可以极大提高开发效率。Android浏览器和Chrome并不完全一样，但是Chrome的相似度最高。移动设备中WebView使用的浏览器和电脑上的浏览器并不完全相同，但是它们确实有所关联，支持的功能有一定相似性。不要使用Windows版的Safari来预览，因为苹果已经不再支持这个项目。图2.4 在浏览器里预览应用，可以使用浏览器的开发者工具。2.2 配置预览环境
本节会教你如何在模拟器和设备上预览项目。这两种方式和在浏览器中预览不同，可以模拟移动设备的使用场景。模拟器是虚拟设备，通过在容器中运行移动平台（比如Android）来模拟真实物理设备的使用场景。设备预览需要通过USB接口连接你的物理设备，然后直接把应用安装上去。
要配置预览环境，你需要：
■ 安装构建应用需要的平台工具
■ 下载并配置模拟器
■ 把设备连接到电脑
■ 针对每个支持的平台配置项目并预览
下面的章节会介绍具体步骤，主要针对Android平台。不要被复杂的步骤吓到，因为绝大部分都只需要做一次。一旦配置好工具，就可以用在未来的所有项目中。你也可以跳过下面的内容，只用本章前面介绍的工具构建应用原型，需要在设备上进行测试时再回来继续阅读。2.2.1 安装平台工具
你需要安装额外的软件来模拟应用以及把它部署到设备。你只需配置目标平台对应的软件。表2.2介绍了Android和iOS平台需要的软件。Ionic 1.0只支持Android和iOS，未来可能会支持Windows Phone和Firefox OX。表2.2 Android和iOS模拟和真机调试需要的软件OS X特有：为iOS平台安装Xcode
苹果要求使用Xcode来模拟和部署iOS应用。Xcode只有Mac版，因此如果你想支持iOS平台，就必须有一台Mac。
要下载Xcode，可以打开App Store并搜索“Xcode”。这是苹果的官方应用（参见图2.5），文件尺寸非常大（超过 3 GB），所以确保你有足够的磁盘空间。安装Android Studio
任何Windows、Mac和Linux电脑都可以开发Android应用。Android需要运行在Java上，后者也是跨平台的。Android提供了两个选项：Android Studio或者Android的独立SDK工具。Android Studio是一个完整的IDE，内置SDK，而后者只包含SDK。两个选项都可以在http://developer.android.com/sdk/index.html下载。
其实你只需要SDK。Android Studio对于原生Android应用开发者来说很棒，但是本书并不会使用它。我建议你只安装对应平台的独立SDK工具。更多安装命令可参见http://mng.bz/flIn。
在Mac或者Linux上安装好独立SDK之后，确保你把目录添加到了PATH环境变量中，这样就可以直接执行Android命令。要验证安装是否成功，可以运行下面的命令，查看Android的帮助：图2.5 Xcode可以在Mac电脑的App Store免费下载
下面配置模拟器。2.2.2 配置模拟器
你可以使用模拟器在电脑上运行虚拟的设备，从而模拟真实的移动设备环境。虚拟设备会运行在模拟器内的平台中—举个例子，在Android模拟器中可以运行真实的Android操作系统并安装你开发的应用。
当需要快速测试不同设备的兼容性或者想测试那些你没有的设备时，可以使用模拟器。比起浏览器，模拟器预览会慢很多，所以最好先在浏览器中开发完成应用的功能，然后再使用模拟器。
模拟器需要安装和配置，而且需要一些时间来下载。下面我们看看如何配置Android和iOS模拟器。配置iOS模拟器
Xcode中的模拟器就是我们需要的。要配置iOS模拟器，打开Xcode，然后单击“Preferences”项。在“Downloads”选项卡中会看到一系列选项，包含文档和iOS模拟器，如图2.6所示。
试读结束[说明：试读内容隐藏了图片]