作者：秦超,夏毓彦
出版社：清华大学出版社
格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT
构建移动网站与APP：ionic移动开发入门与实战试读：
前言
Ionic是一个开源免费、技术先进，并获得业内广泛认可的跨平台的移动开发框架。它是基于主流技术HTML 5和AngularJS的快速开发工具，在极大地解放开发创业者的时间和学习成本的同时又融合了成熟的前端工程技术实践的成果。遗憾的是，由于Ionic涉及了前端技术界各种先进技术并不断演进，目前网络上为初学者采纳的Ionic的中文资料不仅散乱不成体系，而且很多内容与Ionic的官方资料有较大的出入，也没有较好的开源项目可以借鉴。国内的初学者想要短时间完全掌握并成功上手开发出一个可用的APP需要走很多弯路。因此作者结合自己的学习与开发经验，在本书以学习Ionic开发的前置基础知识如AngularJS框架、SASS、Gulp等技术面为起点，阐述了Ionic框架的所有组件使用方法之后，辅以两个涵盖前后端实现的Ionic项目完整解析来引导学习者最终掌握Ionic框架及其周边技术。本书的目的是力求通过官方权威资料，理论与实战项目相结合使读者在练习与模仿中熟练掌握利用Ionic快速开发跨平台移动APP的方法，并能够真实地将技术转化为经济利益和创业成果。本书的定位就是为想在移动应用领域找工作或创业的人士提供加速器。
本书是一本与众不同的书
1．以练带学
本书采用实例驱动的方式介绍Ionic框架下的APP开发。在介绍书中重要的知识点如AngularJS、应用的页面导航、调用移动设备的硬件功能等后，紧接着就有实例来验证与解释如何应用，最后还通过两个中型项目来复习和巩固所学知识点。
2．跨平台
本书开发的项目是跨平台应用，因此书中对Windows和Mac两种开发环境下如何配置、生成与发布Android和iOS移动APP应用都做了解析。
3．案例涵括Internet和企业应用
本书的项目案例从其业务领域到功能点设置都参考了目前市面上流行的Internet与企业移动应用，同时也提供了读者进一步优化和打造自己产品的建议与外部参考资源。
4．低门槛、浅阅读，轻轻松松就能学会
为使本书更加详尽易懂，每写完一章，笔者邀请了想要跨专业入门移动开发的大学在校生阅读并提出意见，通过它们快速分析出被遗漏的知识点和讲解不清的技术点，使本书更方便初学者入门。
本书的知识结构
本书共5篇15章，主要章节规划如下。
第一篇（第1～2章）移动开发准备
跨平台的框架有很多，Ionic的独特优势在哪里导致它的风行？决定选择它后，又如何为它搭建开发与测试环境，并开发第一个Hello World应用？一个Ionic的应用如何使用浏览器、模拟器和实体机测试？如何打包应用到实体机上？使用何种开发工具加速开发进程？这些都是本篇要介绍的内容。
第二篇（第3～4章）Ionic基础知识准备与常用库
Ionic构建于目前先进的前端技术框架与工具集之上，不了解这些背景知识点是无法正确理解和应用Ionic框架的强大功能的。因此本篇介绍了配置开发Ionic环境所依赖的AngularJS、SASS、Gulp、lodash等这些业内主流的库和工具，以及Ionic CLI。最后以一个完整的Ionic项目模板的目录文件结构解析帮助读者了解一个Ionic应用的构成元素与结构。
第三篇（第5～11章）完整解析Ionic框架的官方组件
本篇基于Ionic官方文档和笔者在实际项目中的经验，对Ionic内置的CSS样式类和JavaScript组件类进行完整解析，并通过丰富的代码与效果案例介绍其使用场景与定制途径。此外本篇也说明了常用的Cordova插件和安装使用方法，使APP应用能够使用手机硬件设备专有功能如照相、地理定位、震动，分享到其他社交应用等。
第四篇（第12～14章）APP项目前后端实战篇
本篇是关键的综合实战篇，详细介绍了如何依照业内通行的敏捷过程来进行设计、开发，从而完成2个使用Ionic开发的APP应用。除了综合使用了前文介绍的Ionic组件外，还详述了如何配置与测试后端服务的API、集成高德地图、百度ECharts图表等技术，这都是在实际的APP项目中常常会遇到的需求功能点。
第五篇（第15章）发布和推广更新APP应用
内容不多，却是一个APP走向市场和客户的最终一步。本篇讲述了将使用Ionic框架开发的跨平台应用为Android和iOS两大平台打包的完整过程。此外还介绍了发布和更新应用的方法，使读者能真正将开发的应用转化为经济效益。
本书面向的读者● HTM 5入门者与HTML 5爱好者● 移动互联网创业者● 基于HTML 5的开发人员● 各种平台下的移动开发人员● 从其他开发语言转行做移动开发的人员● 前端开发人员和前端设计人员● Ionic入门学习者● 大中专院校的学生● 可作为各种移动应用培训学校的入门教程
代码下载
本书配套的示例代码下载地址（注意数字和字母大小写）如下：
http://pan.baidu.com/s/1pLyKlCn（密码：4nqh）
如果下载有问题，请电子邮件联系booksaga@163.com，邮件主题为“ionic代码”。
本书由秦超主笔，其他参与创作的人员还有宋士伟、张倩、周敏、魏星、邹瑛、王铁民、殷龙、李春城、张兴瑜、胡松涛、李柯泉、林龙、赵殿华、牛晓云。编者2017年1月第1章欢迎进入移动开发的世界
本章将向准备进入移动开发者行列的读者介绍Ionic的如何快速上手，以及使用Ionic 1.x框架进行移动APP开发时需要了解的一些行业知识和基础概念，如HTML 5、AngularJS、PhoneGap、Cordova、响应式布局，以及Ionic开发框架（以下简称Ionic框架）。
本章的主要知识点包括：● 移动互联网的特点和职业前景。● 跨平台移动开发框架。● 什么是Ionic框架以及是否该选择Ionic框架。1.1移动互联网行业的浪潮
当下，社会、人、事物以及他们之间的相互联系，从未如此紧密过。巨大的社会变化使得一些传统的行业市场快速萎缩，同时催生大量新生行业与机会。各种职业、行业发展发生巨大转折，知识、资讯变得触手可及，信息世界变得扁平、寻常。这个时代特点与移动互联网的发展息息相关。
移动互联网被誉为当今最具发展潜力的行业。根据易观国际《2016年中国移动互联网用户行为统计报告》的分析结论：截至2015年底中国移动互联网用户数达到了7.9亿人，且继续向经济欠发达地区渗透；移动互联网总体市场规模高速增长，达到2.3万亿元，其中教育、汽车、医疗、金融、旅游和生活服务等细分领域正或将迎来飞跃式发展。
利用移动互联网天生具有的三大特征：移动化、个性化和差异化，有野心的团队和个人完全可以借力政府推动的“大众创新，万众创业”热潮，牢牢把握住移动互联网的优势，加入这场轰轰烈烈颠覆改造传统行业的运动。通过移动互联网创业，改变命运和世界，成就事业，变得越来越有可能。
据近几年人才市场供求情况显示，传统行业岗位竞争压力日渐增大，然而移动互联网这样的新型行业人才需求旺盛，很多移动互联网企业陷入了人才荒的尴尬境地，这些企业为了抢占先机，纷纷加入了人才抢夺大战，有实力的企业通过高薪、高福利抢走了大量的人才，导致部分中小企业无人可招，这也使得移动互联网编程开发技术岗位成为高薪岗位。从目前招聘网站发布的职位来看，达到专业水准的iOS、Android和Web前后端系统开发技术人员年薪都在20万以上，因此学习移动互联网编程开发技术就业前景自然无须多言。1.2跨平台移动开发框架
对于技术人员来说，一个技术平台路线的选择往往决定了未来2～3年的努力方向和收入水平增长速度能否跟上和超越国家货币总量增长速度。为了提升收入水平，主要可以采用两种策略：● 深：专攻某方面专门技术成为专家，包治该领域内疑难杂症。崇
尚磨刀不误砍柴工，十年磨一剑。● 快：跟随社会与行业动向，迅速站到风口抓住商机，敏捷抢到头
桶金。崇尚天下武功，唯快不破。
本书更适合那些希望从国家社会民族产业的大局入手，不过早拘泥小节，使用第二个手段野蛮生长，把机会快速变现成个人和团队现金流的技术人员或创业人士。当然作者不推崇和强调这两种手段之间的对立。对技术的钻研和深入探索也非常重要，毕竟知道分子和半桶水是无法适应稍微复杂的商业需求和后续演进的。然而本书介绍的Ionic框架技术，会更侧重于快而不是深。提示跨平台移动开发框架，就是国外的专业开发团队贴近快速应变需求而推出，具备敏捷高效特点的生产力工具的产物。1.2.1 什么是跨平台移动开发框架
相信本书的读者都经历过为自己或家人朋友购买智能手机。如果不是因为经济上的原因，买一个苹果手机还是安卓手机都有可能成为一个艰难的选择。两者操作系统的不同导致了其上的APP应用文件也是不兼容的。与PC市场上微软的Windows操作系统一支独大的情况相反，苹果和谷歌分别推出的iOS和Android移动操作系统，都各自有指定的技术开发平台和官方推荐的开发语言。
作为一个移动应用开发者不得不做出取舍，是做个专家只能精通某一移动操作系统平台还是冒着什么都会一点，但又什么都只会比Hello World深一点的风险同时兼顾多个移动操作系统平台呢？这里还不能算上市场份额在不断丢失，说多了都是泪的Windows Phone操作系统。看似两难的选择题目前有另外一个选项可以考虑：跨平台移动开发框架。
跨平台移动开发框架是指基本经过一次开发，然后通过打包工具适配输出可以在多个移动操作系统（也包括PC操作系统）流畅运行并能调用丰富硬件设备功能的开发框架。为了实现多系统之间的兼容，跨平台开发框架的思路都是采用HTML 5/CSS 3/JavaScript为主力开发语言平台，利用移动操作系统对Web技术或内嵌Web浏览器的支持来执行代码逻辑，使用开发环境提供的工具生成适合各操作系统平台的安装文件。
以本书主要篇幅介绍的Ionic v1.x为例，从技术上来看，它是一款基于HTML 5/CSS 3/JavaScript的跨平台开发框架，使用它进行开发的主要产品是用于界面结构的网页视图模板、定制后生成的CSS渲染文件和包含数据业务逻辑的JavaScript文件。为了能够被安装在多个移动操作系统上，它的构建命令会调用底层的Cordova框架来生成用于Android平台安装的apk文件和用于iOS平台安装的ipa文件。而Ionic具有的开发框架特性，是指它已经内置了符合移动平台外观特征和操作逻辑的一组预定义设计组件，它们能通过AngularJS这个基于MVVM（Model-View-ViewModel的简写）模式的业内流行前端开发框架完美配合。使用Ionic的开发人员并不用从头开始写HTML 5/CSS 3/JavaScript代码，而是站在业内有丰富的前端界面与功能组件开发经验的设计师团队的肩膀上，通过对已有应用模板的定制修改扩展，快速地将商业计划变成可以运行的APP应用。1.2.2 为什么选择跨平台移动开发框架
之所以推荐读者选择跨平台移动开发框架，是因为它有以下优势：● 一次编写多平台兼容
两大移动操作系统平台（iOS和Android）均使用同一浏览器内核，能够完美支持HTML 5技术。开发出的代码可以使用框架提供的打包工具生成适配于相应平台的应用安装包，以不断适应移动操作系统的演化而升级的标准工具，确保应用的兼容性。而框架提供的对底层硬件设备的JavaScript访问接口又保证了充分发挥设备的能力，突破了HTML 5只能在Web浏览器里渲染的限制。● 迅速上手，立即产出
没有学过计算机专业知识，不懂C++、Java、C#的业余爱好者或是创业者，也能够通过业余时间学习网上大量充斥的免费HTML 5/CSS 3/JavaScript教程，遵照开发框架的入门指引开发出可用的APP应用。特别对于创业者来说，在事业启动时如果能够Fail fast or win big（快速失败或是获得大成功），将有助于更快到达成功的彼岸或放弃无谓的尝试。● 拥抱变化，贴近用户
碎片化的国内Android应用市场和被苹果任性而严厉管理的Apple Store，都是APP应用发布推广和升级的噩梦。而通过网页形式动态渲染界面和内容的跨平台移动开发框架，辅以动态加载组件，基本能做到无痛苦的更新推送。另外也可以处理成有些内容页面直接访问在线站点，提高更新效率，绕开某些应用市场过于烦琐的审核机制。现实中虽然不至于出现一夜之间把APP应用的业务领域从互联网金融转向为O2O社区服务的实际需要，但具备这个应变能力是创业团队和个人在这个残酷的商业社会生存下去的一个重要保障。● 提供界面框架使无美工基础的全栈开发者也能开发出友好的用户
界面
因为在这些开发框架中基本都已经提供了定义好的适合移动平台的组件和样式，开发人员只需要根据需要选择组件和样式即可。基于开源技术的组件和样式又都提供客制化的途径，开发人员后期也可以为了美化界面而修改框架原生设置来定制APP应用界面。1.2.3 可选的跨平台移动开发框架简介
目前在国内流行的跨平台移动开发框架有：Ionic、jQuery Mobile、AppCan、React Native等。类似的其他框架还有很多，这里只介绍有代表性和有活跃开发者群的。此外由于本书的主题是关于Ionic，因此将会集中大量篇幅为读者介绍Ionic，以帮助树立学习该开发框架的信心和决心。
1．Ionic
在2015年5月12日宣布正式发布的Ionic被认为是目前最成熟和有潜力的一款HTML 5跨平台移动开发框架。直观地看，它提供了很多符合移动平台界面观感和操作逻辑的UI组件来帮助开发者开发强大的互联网APP移动应用（以及企业APP移动应用）。
Ionic框架的目的是以Web的技术开发移动应用，而基于Apache Cordova的编译平台，实现了编译打包成各个移动操作系统平台适配的应用程序包。
在评估基于HTML 5技术的APP应用各项指标中，运行速度占据非常重要的位置。基于Ionic编写的APP应用在最新的移动设备中表现卓越，运行流畅，能让用户感觉到用HTML 5开发的APP也可以飞起来。
Ionic已经成为MVVM前端框架AngularJS的移动端标准解决方案。Ionic基于AngularJS创造出一款适合开发者分离业务模型、构建单元测试的强大应用开发框架。因此Ionic可以适用于大中小各种规模的APP应用开发和团队协作。
Ionic为当前流行的两种移动设备而设计，并且有相当完美的展现层。伴随框架提供的众多流行移动组件、单页面路由结构、内置的用户界面交互规范、华丽且可扩展定义的主题和全面的官方文档，移动开发者一旦上手就不愿意离开它了。
利用Ionic提供的CLI（命令行接口），只需要通过输入一个命令就可以完成创建应用初始框架，构建测试包，部署应用程序到指定的平台设备或模拟器上。
安装Ionic消耗的时间成本也非常低，只需要在命令行运行npm install -g ionic完毕就可以开始上手了。
最值得一提的是，Ionic的开发运营团队提供了完整的社区生态和支持体系。在图1.1演示的Ionic官方发现者（discover）网站http://ionic.io/discover里读者可以由此入口找到关于Ionic的官方与社区资源。
在笔者写本书的时候，Ionic的v2（第2个大版本）也于2016年6月30日推出了Beta测试版，并在紧张地设计和编写从v1平滑迁移升级到v2的方案，可见基于Ionic开发框架的开发者有乐观的未来前景保障。图1.1 Ionic官方发现者（discover）网站
2．jQuery Mobile
jQuery Mobile的前身是jQuery。jQuery是一个非常流行的Web程序开发时使用的JavaScript类库，当时它的出现只是为了在PC端的浏览器而设计开发的。在移动互联网中为了更好地满足浏览器运行Web程序的需求，基于jQuery和jQueryUI的基础上，jQuery Mobile应运而生。它是jQuery在移动设备上的版本，它不仅带来能够让主流移动平台支持的jQuery核心库，还包括一整套完整和统一的移动UI框架。对于已熟练掌握jQuery，任务是编写小型APP应用的个人或小团队来说，jQuery Mobile不失为一个好的选项。笔者在北美搭乘过的灰狗（GreyHound）公司提供的简单APP应用，就是使用jQuery Mobile开发的。图1.2列出了一些使用jQuery Mobile开发出的移动应用示例。图1.2 使用jQuery Mobile开发的移动APP
3．AppCan
AppCan是中国人自行开发的基于HTML 5技术的跨平台移动应用快速开发一体化解决方案。开发者利用HTML 5/CSS 3/JavaScript技术可以快速地开发与原生应用体验相媲美的移动应用。AppCan平台提供了UI快速开发框架、封装过的本地功能调用API接口、应用打包系统、IDE集成开发环境和本地应用调试模拟器，并预置数百套界面模板和数十种应用插件，提供多套应用模板。完善的框架接口，人性化的开发环境，丰富的开发资源，强大的服务支持，使学习AppCan的开发者可以快速迈入移动开发领域。
不过网上评论AppCan有一些缺点比如不开源、无法修改优化底层代码、暂不支持自行开发原生控件、框架自带功能过多导致应用安装包偏大等。因此有一些早期基于AppCan开发的团队慢慢流失转到更加开放和灵活的PhoneGap/Cordova/Ionic阵营。从图1.3的AppCan架构图来看，这个框架功能还是很全面的。图1.3 AppCan移动开发平台官方架构图
4．React-Native
React-Native是Facebook在2015年初React.js技术研讨大会上公布的一个开源项目。它支持用开源的JavaScript库React.js来开发iOS和Android原生App。在初期React-Native仅支持iOS平台，同年9月份，该开源项目同时支持Android平台。
React-Native的原理是在JavaScript中用React抽象操作系统原生的UI组件，代替DOM元素来渲染，比如以等。
和其他的跨平台移动Web框架相比，React-Native优点显著：不用WebView，彻底摆脱了WebView让人不爽的交互和性能问题、React-Native封装的原生控件有更好的触摸滚动体验和灵敏的手势识别、React-Native有更适合的线程模型保证了前台操作的流畅性。
然而目前阶段React-Native的缺点也比较鲜明：尚未正式发布的代码还在持续改动，对于技术能力不强的团队很难跟上步伐、官方对Android平台的支持依然较弱，开发者需要借助社区力量的支持、提供的界面组件偏少，对类CSS的样式支持也不丰富完整。笔者曾经把玩过一阵React-Native，感觉目前它虽是众望所归的明日之星，但真要到达普罗大众都能轻松上手完整开发出一个APP应用的程度，还需要加以一些时日来沉淀完善。笔者的观点是开发者如无一定实力做基础，在黑夜里盲目走在最前面可能会不容易见到明天的太阳。图1.4中显示的React Native开发的APP，是iOS版本下的应用。图1.4 React Native开发的APP应用启动界面1.2.4 什么是PhoneGap/Cordova/Ionic
在混合型应用（Hybrid APP）技术里，PhoneGap和Cordova这两个词往往会被混用。虽然本书主要内容是介绍Ionic开发框架，但是弄清楚提供打包支持和底层硬件设备接口组件的Cordova的来龙去脉也有助于技术人员与同行探讨IT文化。
2008年8月，PhoneGap在旧金山举办的iPhone Dev Camp上崭露头角，起名为PhoneGap源于创始人的想法：“跨越Web技术和iPhone之间的鸿沟（Gap）”。当时PhoneGap还隶属于Nitobe（泥土鳖）公司。经过几个版本的更新，PhoneGap开始支持更多的移动操作系统平台。在2011年，Adobe公司收购了Nitobe公司，随后Adobe把PhoneGap项目捐献给了Apache基金会，但是保留了PhoneGap的商标所有权。而Apache收录这个项目后在2012年Adobe PhoneGap更新到1.4版本时最终更名为Apache Cordova。
随后就出现了PhoneGap和Cordova两个名字经常被混淆使用的状况。两者区别如下：● Cordova是Adobe捐献给Apache的开源项目名，而PhoneGap是
Adobe的商业产品名。● PhoneGap产品另外还包括一些额外的属于Adobe的商用组件，
例如PhoneGap Build和Adobe Shadow。
目前其实Adobe的PhoneGap产品和Apache的Cordova项目维护的是共同的一份源代码组件。最终我们可以把PhoneGap看作是Apache Cordova的一个分支。类似于Apache Cordova是一台发动机，运行在PhoneGap上，就像WebKit这个浏览器引擎运行在Chrome浏览器和Safari浏览器上。为了正确地反映现状，本书使用的是Cordova这个代号，尽管很多时候两者是可以混用的。
然而不是装了Cordova以后开发起跨平台的APP应用就一了百了了。Cordova提供的是比较底层的硬件设备功能库和APP打包功能，而它对表现层并没有任何实现支持。因此业内使用Cordova开发往往至少需要再加上作为展现和交互的UI层工具或者框架，而Ionic和前面提及的jQuery Mobile主要职责就都是提供这部分UI层功能。
所以读者可以把Ionic理解成一个基于Web技术开发SPA（单页面应用）的框架，通俗地说就是使用HTML 5/CSS 3/JavaScript开发一个APP应用页面。
为了便于大型项目的开发协作，Ionic本身的组件和样式开发分别集成利用了AngularJS和SASS/SCSS。最后为了提供给开发者一站式开发平台，Ionic又集成了Cordova的构建打包功能，使得开发者最终可以直接用Ionic的CLI（命令行接口）来调用Cordova的创建、编译、打包等功能。1.3初识Ionic v1.x
经过之前的介绍，相信读者已经了解了跨平台移动开发框架的含义以及使用它们的原因。目前市面上经过大浪淘沙，尚存的移动开发框架各具特色，而且大都开源免费，如何选择出适合自己的那一款就成了开发者必须要面对的问题。提示v1.x代表大版本为v1.0的改进修正和功能增加后续版。本书后面除非笔者专门指明版本，使用Ionic的地方将直接代表Ionic v1.x。1.3.1 为什么选择Ionic
虽不能说在移动开发领域非常资深和见多识广，笔者也是在历经数月了解把玩多个移动开发框架后最终选择了Ionic作为主力开发平台。个人考虑的原因大概有以下几点，供读者借鉴参考和批判：● 成熟堪用
从2015年5月12日发布v1.0正式版本以来，经过Ionic框架开发团队不断改进，最近Github上该开源项目的issue（报错）总数趋于不变，新增的issue主要集中在目前处于Beta阶段的v2.0版。除了能找到一些Ionic处于早期Beta版阶段时被黑得伸手不见五指的历史老帖，国内外的开发者论坛上目前对Ionic的口碑反映都还不错。在stackoverflow网站上Ionic的新问题也已经不多了。种种迹象表明现在的Ionic历经时间的洗礼，达到了成熟可控没有弱智bug的程度。● 适合团队协作和中大型项目
通过集成AngularJS和AngularUIRouter，Ionic框架充分发挥了AngularJS的优势。本书会在第3章介绍AngularJS的一些特性。在这里读者需要了解的就是，有了AngularJS做基础，Ionic开发应用的过程比基于jQuery/Zepto或者jQuery Mobile框架的过程更容易进行工程质量管理和开发团队职责划分。● 相对的性能优势
Ionic早期的版本虽然功能初步完备，但是面对大数据量或动画切换场景时往往性能不佳。经过一年多的持续改进和定点优化，情况已经有很大改善。对于一些经典的性能瓶颈场景，Ionic或提供特殊优化过的AngularJS指令，或内置可灵活定制的缓存机制，或给出调整影响性能的开关参数，使开发人员能无痛地让开发出的应用在使用流畅性上大致接近原生应用。● 良好的社区支持服务
无论是目前处于正式版的v1.x或是处于Beta版的v2.0，Ionic都有专人在社区进行问题解答和在Github跟踪解决issue。对于有bug暂未解决的部分，官方文档网站也都会及时明确提示，使开发者能够避开雷区。● 完整的开发构建工具链
在完成第2章的Ionic开发调试环境安装后，通过使用NPM、Gulp、Bower、Gordova和Ionic CLI一起组成的工具链，就能快速进入APP应用的迭代开发测试阶段，节省传统开发中大量的无效时间。相信读者在后面章节的动手实验环节中将能深入感受到这一点带来的便利。1.3.2 基于Web技术HTML 5/CSS 3/JavaScript
大体上基于Ionic框架的开发可以理解成开发一个基于Web技术开发SPA（单页面应用），通俗地说就是使用HTML 5/CSS 3/JavaScript开发一个APP应用页面。可能有些读者未曾了解和接触过AngularJS和SASS/SCSS技术，目前可以把AngularJS理解为完全基于JavaScript开发的框架，而SASS/SCSS只是用于最终生成CSS代码的过程文件。因此具备HTML 5/CSS 3/JavaScript基础知识的开发者，是有能力快速入门和产出的。提示本书因为聚焦于主题和控制篇幅的关系，虽然会对出现的重要代码进行解释，但不提供HTML 5/CSS 3/JavaScript的入门介绍。读者可以自行选择书籍或者网上教程来学习掌握这些基础知识。
从图1.5的示例图中读者可以发现，一个使用Ionic框架开发的APP应用主要有效运行代码就是主HTML文件+主CSS文件+若干JavaScript文件构成。图1.5 使用Ionic框架开发的APP应用代码构成1.3.3 基于AngularJS框架
选择基于AngularJS框架，Ionic开发团队应该是经过深思熟虑的，虽然最近在ReactJS大火之后出现了很多对AngularJS诟病的声音。
AngularJS建立在这样的信念上：应该把声明式编程用于构建用户界面以及编写软件构建，而指令式编程非常适合来表示业务逻辑。AngularJS框架采用并扩展了传统HTML，它设计了双向的数据绑定来适应动态内容刷新，这种双向数据绑定允许模型和使用模型数据来完成界面渲染的多视图之间的自动同步。因此，AngularJS使得引入jQuery这样的库来对DOM的操作不再重要并提升了可测试性。
AngularJS完成了以下的设计目标：● 将应用逻辑与对DOM的操作解耦，这能提高代码的可测试性。● 将应用程序的测试看的跟应用程序的编写一样重要，而代码的模
块构成方式对编写单元测试的难度有巨大的影响。● 将应用程序的客户端与服务器端解耦，这允许客户端和服务器端
的开发可以分头行动，并且让双方的复用成为可能。● 指导和约束开发者构建应用程序的整个历程：从用户界面的设
计，到编写业务逻辑，再到测试。
AngularJS实现了MVVM模式，并鼓励模型、视图和视图-模型组件之间的松耦合。通过依赖注入（dependency injection），Angular为客户端的Web应用引入了传统服务端开发常用的模式实践。
相对jQuery这类库来说，AngularJS是一个复杂完善的系统级框架，因此学习和上手都需要相对花费更多的时间和精力。本书第3章将为未曾接触过AngularJS框架的读者介绍Ionic开发中需要了解的基础概念。提示在图1.5中似乎未曾出现对AngularJS框架文件的引用，事实是Ionic已把AngularJS框架文件的内容包含到名为ionic.bundle.js的打包文件中，有兴趣的读者可以自行阅读代码验证。1.3.4 接近原生APP应用的炫丽界面组件
Ionic提供了模拟参照iOS和Android平台上的原生移动应用布局和众多移动端界面组件。这些布局和交互型组件都带有可调整的动画效果和支持触摸手势事件。因此Ionic在为技术人员提供快速开发能力的同时，又最大程度兼顾了用户友好性和界面美观。更有甚者，界面设计的专业开发者在Ionic界面组件的基础上实践了Material Design的概念，推出了有更多开源炫丽界面组件的网站http://ionicmaterial.com/。该网站也提供了如图1.6所示的模拟界面预览组件供学习参考。图1.6 Ionic Material网站提供的界面组件预览
本书第5～9章将会逐一详细介绍Ionic提供的各种界面组件，有兴趣的读者可以提前翻看组件示例图来了解。1.3.5 自适应（Responsive）布局
移动设备已经慢慢超过桌面设备，成为访问互联网的最常见终端。然而Android设备屏幕大小分布的碎片化使开发者不得不面对一个难题：如何才能在不同大小的设备上使同样的内容呈现时更加自然友好？
2010年，Ethan Marcotte提出了“自适应网页设计”（Responsive Web Design）这个名词。它指可以自动识别屏幕宽度、并做出相应调整的网页设计。图1.7展现的就是同一网页在浏览器调整为四种不同宽度时自动调整布局结构的示例。图1.7 支持自适应布局的页面
Ionic框架已经内置了自适应布局的支持，它额外提供了三个不同响应式CSS类默认样式用于区分手机竖屏与横屏、平板竖屏与横屏这四种宽度布局类别。另外开发者也可以自定义更多的响应式CSS类满足特殊需要。本书的5.1.5节将会举例介绍Ionic框架的这个特性和使用定制方法。1.3.6 支持个（任）性定制
本章的1.3.4节笔者提到Ionic内置了多组适应布局和交互型组件。这些开箱即用，功能完善、界面完美的组件集能够满足大多数开发场景的需要。但世界并不总是那么如意，可能有某些时候开发者需要应对自己或他人的脑洞大开，必须将已有组件做各种个性化更改的局面。
提前考虑到这一点的Ionic团队在开发组件的样式CSS类时放开了本书第4章将要介绍的SASS/SCSS，将CSS更动态化，此外再结合本书第10章将要介绍的设备信息服务组件，开发者就能依据移动设备的硬件参数和平台资源配置，将应用定制成任意的模样。1.3.7 Ionic的缺点
前面介绍了一大堆使用Ionic框架做跨平台移动应用开发的优势，但是理性最终总能战胜狂热，读者有必要了解Ionic与生俱来的一些缺陷，从而知道不适合使用Ionic的环境或者需要提前筹划规避的深坑。
经过近2年全球开发人员的使用，基本对Ionic存在的缺点达成了共识：● Hybrid（混合）模式开发的应用自有的性能缺陷。
由于应用的逻辑执行是基于浏览器所带的JavaScript动态代码在界面主线程上执行，因此在低端Android设备上性能缺陷严重，用户操控时卡顿感很明显。好在随着Android设备提供商的硬件跑分残酷竞争，目前市面所售的智能手机使用Ionic开发出的APP应用与原生应用相比已经基本无差异感了。不过即使如此，Ionic也不能用于有较高实时图形响应要求的游戏开发。● 深度依赖于AngluarJS框架。
AngluarJS框架在为Ionic带来各种好处的同时，也带来了初学者学习曲线陡峭（这对那些笔者极端仰慕的天资聪颖者当然例外），深刻理解的人用起来效率很高，不理解的用了到处是坑的局面。而对AngluarJS框架的深度依赖，也让Ionic在AngluarJS开发团队开发其2.0版本时决定重起炉灶抛弃以前的架构的时候处境尴尬，不得不有点被胁迫地将Ionic框架同步升级为2.0版本，将开发使用的主力语言从JavaScript转为微软主导开发的TypeScript。● 深度依赖Cordova插件提供硬件设备的接口。
当没有相应的Cordova插件提供想要的硬件设备的接口时，开发人员需要自己分别编写iOS和Android平台的插件。当然这种情形出现的几率并不大。● Windows Phone支持比较弱。
Ionic的官方网站已经基本没有关于Windows Phone的开发内容。好在Windows Phone的市场也已经日暮西山，这部分微软死忠用户的价值基本不用惦记了。
在笔者看来，对于开发应用型的技术，应该也本着“合则用，不合则弃”的原则来决定是否投入精力来学习。读者需要根据Ionic的优缺点、自身的技术积累优势和计划编写的移动APP的特点来考虑是否要使用Ionic框架。1.3.8 Ionic的商业案例
从Ionic的Beta版开始，国外就已经有众多的个人开发者和公司开始追踪和试用这个据称是混合开发的神器，从此诞生了不少使用Ionic框架开发的APP应用。目前据Ionic网站的官方统计，已有超过120万移动APP应用是用Ionic框架来构建的。感兴趣的读者可以到http://showcase.ionicframework.com/查找一些被Ionic官方推荐的应用列表，如图1.8所示。图1.8 Ionic官方推荐的APP应用
考虑到大部分购买本书的读者更关注Ionic的中文资料和在国内互联网的使用，这里作者也列出了专门以Ionic为主题的技术论坛的网页http://ionichina.com/showcase上展示的基于Ionic开发的部分APP应用，如图1.9所示。图1.9 国内团队使用Ionic开发的部分APP应用1.3.9 Ionic的开源案例
学习和提升IT开发技术的最好方式就是大量阅读其他优秀开发者的代码。在Ionic的官方网站同时也维护了为初学者准备的很多基于Ionic框架开发的APP应用开源案例，感兴趣的读者可以去自行登录下载学习http://market.ionic.io/starters，如图1.10所示。图1.10 Ionic的开源案例网站页面示例1.3.10 Ionic的未来——Ionic v2.0 & AngularJS v2.0
在笔者编写本书的时候（2016年7月），下一个版本的Ionic和AngularJS都处于Beta版的状态，有业内人士判断它们将于2016年底前成为正式版。
尽管AngularJS v1.x非常成功，但是AngularJS v2.0的剧烈转向也许更值得期待。
AngularJS当初是提供给设计人员用来快速构建HTML表单的一个内部工具。随着时间的推移，各种特性被加入进去以适应不同场景下的应用开发。然而由于最初的架构限制（比如绑定和模板机制），性能的提升已经非常困难了。在语言方面，ECMAScript6的标准已经完成，这意味着浏览器将很快支持例如模块、类、lambda表达式、generator等新的特性，而这些特性将显著地改变JavaScript的开发体验。在开发模式方面，Web组件也将很快实现。然而现有的框架，包括AngularJS v1.x对Web组件的支持都不够好。此外AngularJS v1.x没有针对移动应用特别优化，并且缺少一些关键的特性，比如：缓存预编译的视图、触控支持等（这些部分在Ionic框架里有一些相应的补足增强）。
AngularJS v2.0的开发团队怀着野心重起炉灶来解决这些问题。由于目前还是未稳定的Beta版，本书不会过多着墨于它。前面在1.3.7节笔者提到过Ionic开发团队追随着AngularJS的升级步伐同时也在着手升级到Ionic v2.0的工作。虽然目前处于Beta版的状态让笔者觉得也不宜过早吹捧，但是Ionic开发团队在官方博客里承诺已经重新思考和进行反复沙盘推演，将要推出能使性能得到极度提升，开发人员需要编写的代码结构复杂性得到大幅削减，可定制性更上一层楼的Ionic v2.0开发框架。图1.11展示了Ionic对AngularJS v2.0和Ionic v2.0的信心。对此承诺半信半疑和对Ionic的未来有兴趣了解的读者可以到Ionic官方关于Ionic v2.0的文档参考子站点http://ionicframework.com/docs/v2先睹为快。图1.11 Ionic v2.0和AngularJS v2.0的官方宣传图片1.4学习完本书找工作与创业
天下熙熙，皆为利来；天下攘攘，皆为利往。笔者不排除少部分人怀着“write the code, change the world”的伟大理想进入IT行业，但这个社会大部分人学习钻研技术还是为了个人求生存谋发展的。虽然笔者不能算是IT界和移动开发领域的老司机，但是本节还是霸王硬上弓尝试探讨一下学完本书后未来的出路问题。1.4.1 从本书的项目实战开始准备技术作品
本书为了贴近读者要求介绍学习的技术如何进行完整实战演练的呼声，在第13章和第14章模拟了如何快速策划、设计、开发完成2个使用Ionic框架开发的示例APP。这里的完整，指的是还包括后端的API设计实现代码。
需要找移动开发领域工作的读者，在完成本书学习后，可以以这两个APP为基础，自行改写扩充或是不断完善成你自己的项目，面试时就有值得深入的话题可谈，有信心展示实力的作品可展现了。
此外本章的1.3.9节里提供的Ionic开源案例网站，也可以成为读者发掘借鉴优秀开发者作品源代码的宝库。1.4.2 Ionic助力实现你的创业梦想
对于值得尊敬的创业者和创业团队来说，梦想的翅膀插上之后，还得尽量多扑腾几下。创业团队要打造一个产品原型，一般需要几个角色：业务主导人、产品经理、开发工程师、UI设计师。Ionic框架主要是给其中的开发工程师和UI设计师角色配合使用的，当然如果创业者能身兼数职，推出产品原型的过程将会是无比顺畅。
学习和使用Ionic框架，有助于创业过程中低成本地快速试错野蛮生长，这已经是国内外多个创业团队的共识了。希望你们能在阅读本书后通过努力，迅速找到风口，依靠方校长建造的独有防火墙生态优势，早日让国人用上中国特色的移动APP应用。1.5小结
本章从移动互联网行业的热潮入手，逐步阐明了跨平台移动框架中的Ionic是一个值得深入学习使用的开发平台。此外本章介绍Ionic的诸多优势和特性，在后续的章节中，读者将会一一学习和接触到这些部分。第2章Ionic的开发调试环境安装
本章将介绍使用Ionic框架开发前需要安装的开发环境。根据第1章的介绍，Ionic依赖于Cordova框架，此外开发出来的APP应用也需要适配iOS和Android两种移动操作系统平台，因此在能够使用Ionic构建出两种操作系统的安装包前，有比较严格的安装步骤需要完成。本章的主要知识点包括：● Ionic开发运行环境安装● Windows下Android开发平台安装● Apple OS X下iOS与Android开发平台安装● 推荐的代码编辑工具Sublime配置2.1Ionic快速上手环境安装
Ionic开发调试环境是基于Node.js运行的，而Ionic的公开源代码包又托管在Github上。因此安装Ionic的正式开发调试环境前，需要有一些前置的平台工具先能成功运行。本节将依次介绍这些平台工具的安装和对它们的功能进行简单说明。提示本节涉及的软件包安装过程在Windows和Apple OS X下基本一致，读者基本可以登录这些软件的官网自行解决安装中遇到的问题。因此碍于篇幅关系，笔者在本节不详细介绍Apple OS X操作系统环境下的安装过程，而只以占读者比例最多的Windows操作系统环境来演示。如确实有特殊明显的区别，笔者会在具体的章节里依据情况说明。2.1.1 安装Node.js和NPM
1．什么是Node.js和NPM
Node.js是让JavaScript脱离浏览器运行在服务器的一个平台，而不是一个新的语言或者库。虽然Node.js采用的是单线程机制，但是它通过异步IO与事件驱动的设计来实现了高并发服务。此外Node.js内建一个HTTP服务器可方便地用于测试和生产运行。在APP应用开发的过程中，我们将要在浏览器中调试的Ionic代码就是通过Node.js的HTTP服务来响应请求和执行文件修改后动态reload（重新加载）机制，因此能够运行Node.js是成功安装Ionic的前提条件。
NPM是Node.js的包管理器，它已经被自动包含在目前Node.js的安装包里，不再需要单独安装。在使用Ionic的CLI生成完Ionic工程目录和描述工程所用到的Node.js代码包的配置文件package.json之后，NPM会被自动调用以下载安装这些Node.js代码包。提示本书不是关于Node.js的入门书，因此不会花过多笔墨介绍Node.js和NPM。感兴趣的读者可以到这两个软件的官网自行阅读文档学习。
2．安装Node.js和NPM
笔者编写本书时，可以成功安装运行Ionic的Node.js版本为v4.4.2，因此建议读者可以在开发机的命令行内输入： node –v
判断是否已经安装了正确的Node.js和NPM版本，如图2.1所示。图2.1 查看当前操作系统安装的Node.js、NPM和CNPM版本
如果Node.js未安装或者版本太旧需要升级，建议读者到图2.2中显示的Node.js的官网https://nodejs.org/en/download/，根据所使用的操作系统选择对应的Node.js包安装。图2.2 Node.js的官网下载选择安装包
由于中国国情的关系，使用NPM下载安装某些软件包时需要使用一些不可详细描述的技术手段改变联网状态。因此推荐读者在安装或升级完Node.js后运行以下命令安装淘宝提供的NPM软件包库的镜像CNPM，安装命令的成功输出如图2.3所示。 npm install -g cnpm --registry=https://registry.npm.taobao.org图2.3 使用NPM安装CNPM
命令成功执行完毕后，以后使用npm命令的地方就都可以用cnpm来代替了。提示本书介绍的关于CNPM的内容也许会随着时间流逝而可能不再正确。具体权威的cnpm说明和其提供的专有命令请参考CNPM的官网：https://npm.taobao.org/。
到目前为止，Node.js和NPM的安装就算基本完成了，读者可以回顾一下图2.1，运行图中的3个命令检查一下开发机的软件版本是否正确（版本号大于等于图中数字即可）。2.1.2 安装Git
Git是目前世界上最先进的分布式版本控制系统。和Git出现前流行的集中式的版本控制系统CVS、SVN及收费版的ClearCase相比，Git所代表的分布式版本控制系统为开发者带来了极大的便利性，同时丢失代码的可能性也减小很多。目前基本所有的开源项目都发布在使用Git的Github网站上，Ionic开发框架这个开源项目也是如此（项目在Github的网址为https://github.com/driftyco/ionic/tree/1.x）。
因此使用Ionic框架的开发者，需要在开发机安装好Git。这样当使用Ionic CLI创建项目时，将会自动调用Git的命令，从Github把最新的Ionic模板与支持文件下拉到本地目录。
1．Windows操作系统环境下Git的安装
笔者推荐使用Windows操作系统环境的读者到图2.4展示的Git开发组提供的专门网站https://git-scm.com/download/win自动下载最新版的Git安装包并按提示安装即可。图2.4 Git的官网下载网站
2．Apple OS X操作系统环境下Git的安装
笔者推荐使用Apple OS X操作系统环境的读者使用Homebrew来安装Git。首先读者可以在Terminal窗口输入： brew
通过Terminal窗口的提示可知Homebrew是否已被安装。如果Homebrew尚未安装，读者需到Homebrew的官方网站（http://brew.sh/index_zh-cn.html）依据说明安装，如图2.5所示。因为官网已提供中文版的完整说明和命令代码，这里不再详述Homebrew的安装过程。图2.5 Homebrew官网安装说明提示读者也可以使用其他方式在Apple OS X操作系统环境下安装Git。因为本书第12章的12.1节也需要使用Homebrew来安装MongoDB，所以这里笔者仅推荐了使用Homebrew的安装方式。
确认Homebrew可以正常工作后，安装Git就很简单了。继续在Terminal窗口输入： brew install git
即可进入Git的安装。安装完毕后可输入： git –version
验证Git是否成功安装以及被安装的版本，如图2.6所示。图2.6 验证Git是否成功安装以及被安装的版本2.1.3 安装Gulp和Bower
Gulp是前端开发过程中一种基于流的代码构建工具，是自动化项目的构建利器。她不仅能对网站资源进行优化，而且在开发过程中很多重复的任务能够使用正确的工具自动完成。具体来说，Gulp是基于Node.js的自动任务运行器，它能自动化地完成JavaScript、SASS/SCSS、HTML、CSS等文件的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成，并监听文件在改动后重复指定的这些步骤。在实现上，它借鉴了Unix操作系统的管道（pipe）思想，前一级的输出，直接变成后一级的输入，使得在操作上非常简单。
Bower是用于Web前端开发的Node.js包依赖管理器。对于前端包管理方面的问题，它提供了一套通用、客观的解决方案。它通过一个API暴露包之间的依赖模型，这样更利于使用更合适的构建工具。Bower没有系统级的依赖，在不同包之间也不互相依赖，依赖树是扁平的。
Ionic框架同时使用了Gulp和Bower作为安装与构建工具链的一部分，因此这两个工具都需要在命令行工具中使用NPM安装好： sudo npm -g install bower gulp提示命令行里使用了sudo来运行安装命令，否则可能会出现当前登录的用户权限不够，无法将文件复制到指定目录的错误提示。
安装过程完成后分别输入以下两条命令验证Gulp和Bower的正常安装与版本，如图2.7所示。 gulp --version bower --version图2.7 验证Gulp和Bower是否成功安装以及被安装的版本提示一般的前端项目需要在项目目录里再次使用NPM以项目模式安装Gulp，而因为Ionic的项目模板已在其package.json里描述了对Gulp模块的依赖，因此后面的构建过程不需要进行类似的安装了。2.1.4 安装Ionic CLI与Cordova
完成了前面的铺垫之后，现在可以开始安装Cordova和Ionic CLI了。首先需要在命令行工具中使用NPM安装这两个工具包： sudo npm install cordova@6.2.0 ionic@1.7.16 -g提示这里安装Cordova和Ionic CLI时指定了安装的特定版本号，这是因为笔者编写此书时所使用的开发环境就是这两个当前最新的版本。为了保证后面的讲解使读者能够在自己的开发环境中完全重复，笔者建议读者朋友在学习时除非很有把握，否则最好不要随意升级改变它们的版本。
由于中国互联网的特殊状况，使用NPM安装Cordova和Ionic CLI的过程中可能会出现一些依赖包无法下载而安装失败的现象。不幸中招的读者可以使用cnpm替换命令中的npm，尝试使用本章2.1.1节介绍的淘宝提供的NPM软件包库的镜像绕过此类问题。
安装过程完成后分别输入以下两条命令验证Gulp和Bower的正常安装与版本，如图2.8所示。 cordova --version
试读结束[说明：试读内容隐藏了图片]