混合开发Ionic+angular快速开发App

对于新入门的移动开发者而言，摆在面前的移动应用开发有三种口味

Native App： 本地应用程序（原生App）

Web App：网页应用程序（移动web）

Hybrid App：混合应用程序（混合App）

Hybrid App兼具了Native App良好用户体验的优势，也兼具了Web App使用HTML5跨平台开发低成本的优势。目前已经有众多Hybrid App开发成功应用，比如美团、爱奇艺、微信等知名移动应用，都是采用Hybrid App开发模式，今天实训邦带你学习利用Ionic+angular如何快速开发混合应用App。

分享目录

概念介绍

开发环境及搭建

项目文件目录结构

技术模型及动态数据请求流程图

Ionic组件及storage本地缓存

一、 概念介绍

1.1 Ionic介绍

2013年第一个版本，目前已经发布到了4.0 Beta 也是发展比较快的一个

开发框架。Ionic以AngularJS和ApacheCordova为基础，使用Node.js进行模块管理，使用Html5、Css(SASS)和Javascript技术进行APP开发。

1.2 Node.js与npm简单介绍

Node.js(http://nodejs.cn/download/)是基于Chrome’sV8 Javascript engine 构建的一个Javascript runtime(Javascript运行时)，特点是事件驱动、非阻塞等。

npm(https://www.npmjs.com/)是Node.js中的Javascript包管理。

1.3 相关资料

Ionic文档：https://ionicframework.com/docs/v3/

Ionic Github: https://github.com/ionic-team/ionic

Ionic Cli：https://github.com/ionic-team/ionic-cli

Ionic Icons: https://ionicframework.com/docs/v3/ionicons/

Ionic 开发博客: https://www.joshmorony.com/

二、 开发环境搭建

2.1 开发环境

2.1.1、Node.js不管是Window|Mac系统，都需要Node.js

2.1.2、代码编辑器，如VsCode、Sublime等

2.1.3、开发IOS需要Mac系统，安装Xcode即可，上架需开发者证书

2.1.4、 开发Android，推荐Android Studio

2.2 Node.js搭建

2.2.1、安装Node.js（Windows下安装）

2.2.2、下载地址：https://nodejs.org/en/download/

2.2.3、安装后命令行下执行：node --version出现版本号表示安装成功

2.3npm安装

2.3.1、执行：npminstall npm -g 命令

2.4 Cordova、Ionic 安装

2.4.1、资源包下载地址：http://ionicframework.com/docs/overview/#download

2.4.2、命令行下执行：npminstall -g cordova ionic 命令进行安装

2.4.3、 设置npm 淘宝镜像(GFW，导致很多插件下载失败) ：npm install -g cnpm --registry=https://registry.npm.taobao.org 命令进行设置

2.4.4、创建应用实例：ionicstart 应用名称 初始类型， 有 blank、tabs、sidemenu3 种类型可选（例如：ionic start myApp tabs）