Ionic学习手册

第1章 Ionic—基于Angular JS框架 1

1.1　理解SOC(关注分离)　2

1.2　AngularJS组件　4

1.3　AngularJS指令(directive)　8

1.4　AngularJS服务　14

1.5　AngularJS资源　17

1.6　总结　17

第2章　Ionic入门　18

2.1　移动混合架构　18

2.2　什么是Apache Cordova　19

2.3　什么是Ionic　21

2.4　程序安装　21

2.4.1　安装Node.js　21

2.4.2　安装Git　22

2.4.3　安装Bower　22

2.4.4　安装Gulp　23

2.4.5　安装Sublime Text　24

2.4.6　安装Cordova和Ionic CLI　24

2.5　平台介绍　25

2.6　Hello Ionic　26

2.7　配置浏览器开发工具　30

2.7.1　Google Chrome　30

2.7.2　Mozilla Firefox　31

2.8　Ionic项目结构　32

2.8.1　config.xml配置文件　33

2.8.2　www目录　34

2.9　构建tabs模板　36

2.10　构建side menu模板　37

2.11　generator-ionic工具简介　38

2.12　总结　41

第3章　Ionic CSS组件和导航　43

3.1　Ionic CSS组件　43

3.1.1　Ionic网格系统　44

3.1.2　页面结构　49

3.1.3　按钮　53

3.1.4　列表　55

3.1.5　卡片　56

3.1.6　字体图标　58

3.1.7　表单元素　59

3.1.8　集成AngularJS和Ionic CSS组件　65

3.2　Ionic路由　70

3.3　总结　87

第4章　Ionic和SCSS　88

4.1　什么是SASS　88

4.2　在Ionic项目中安装SCSS　90

4.2.1　手动安装　91

4.2.2　Ioinc CLI命令方式安装　92

4.3　使用Ionic SCSS　92

4.4　理解如何使用Ionic SCSS进行开发　95

4.5　使用SCSS的操作流程　100

4.6　创建一个案例　101

4.7　总结　108

第5章　Ionic指令和服务　109

5.1　Ionic指令和服务　109

5.2　Ionic平台服务　110

5.2.1　registerBackButtonAction　113

5.2.2　on方法　114

5.2.3　header和footer　115

5.3　内容的指令和服务　116

5.3.1　ion-content　117

5.3.2　ion-scroll　118

5.3.3　ion-refresher　118

5.3.4　ion-infinite-scroll　122

5.3.5　$ionicScrollDelegate　124

5.3.6　导航　126

5.3.7　ion-view　126

5.3.8　Ionic view的事件　128

5.3.9　ion-nav-bar　129

5.3.10　ion-nav-buttons　131

5.3.11　$ionicNavBarDelegate　133

5.3.12　$ionicHistory　134

5.3.13　选项卡和侧边栏菜单　139

5.4　Ionic loading的服务　143

5.4.1　Action Sheet　146

5.4.2　Popover和Popup　148

5.4.3　$ionicPopup　151

5.5　ion-list和ion-item指令　158

5.6　手势的指令和服务　164

5.7　总结　170

第6章　构建书店App　171

6.1　书店应用程序简介　172

6.2　书店应用的架构　173

6.2.1　服务器端架构　173

6.2.2　服务器端API文档　174

6.2.3　客户端架构　175

6.2.4　GitHub上的代码　176

6.2.5　书店demo　176

6.2.6　开发流程　177

6.3　设置服务器　178

6.4　构建应用程序　179

6.4.1　步骤1：构建side menu模板　179

6.4.2　步骤2：重构模板　180

6.4.3　步骤3：构建authentication、localStorage和REST API factory　186

6.4.4　步骤4：为每个路由增加controller并集成factory　194

6.4.5　步骤5：构建模板并集成controller数据　204

6.5　总结　215

第7章　Cordova和ngCordova　216

7.1　安装设置平台相关SDK　216

7.1.1　Android设置　217

7.1.2　iOS设置　218

7.2　测试设备　218

7.2.1　测试Android设备　219

7.2.2　测试iOS　223

7.3　Cordova插件　224

7.4　Ionic插件API　225

7.4.1　添加一个插件　225

7.4.2　移除插件　225

7.4.3　列出添加的插件　225

7.4.4　搜索插件　225

7.5　Cordova whitelist插件　231

7.6　ngCordova　232

7.6.1　安装ngCordova　233

7.6.2　说明　234

7.6.3　$cordovaToast插件　236

7.6.4　$cordovaDialogs插件　237

7.6.5　$cordovaFlashlight插件　239

7.6.6　$cordovaLocalNotification插件　241

7.6.7　$cordovaGeolocation插件　244

7.7　总结　247

第8章　构建聊天App　248

8.1　Ionic Chat App　248

8.2　应用程序架构　256

8.2.1　授权　257

8.2.2　应用程序流程　257

8.2.3　预览App　257

8.2.4　数据结构　259

8.2.5　Cordova插件　259

8.2.6　Github的代码　260

8.3　开发应用程序　260

8.3.1　构建和设置App　260

8.3.2　安装所需的cordova插件　263

8.3.3　获取Google API key　263

8.3.4　设置路由和路由权限　264

8.3.5　创建service/factory　268

8.3.6　创建map指令　272

8.3.7　创建controller　274

8.3.8　创建模板　286

8.3.9　创建SCSS　290

8.4　测试应用程序　294

8.5　总结　299

第9章　发布Ionic App　300

9.1　准备用来发布的App　300

9.1.1　配置图标和启动画面　300

9.1.2　更新config.xml文件　302

9.2　PhoneGap服务　303

9.3　使用Cordova CLI来生成安装包　304

9.3.1　Android安装包　304

9.3.2　iOS安装包　306

9.4　Ionic打包　307

9.4.1　上传项目到Ionic cloud　307

9.4.2　生成需要的密钥　307

9.5　总结　308