目录：
一、ionic的安装
使用Ionic创建和开发应用程序主要通过Ionic命令行实用程序（“CLI”），并使用Cordova构建和部署为本机应用程序。
CLI：command-line interface的缩写，命令行界面，是指可在用户提示符下键入可执行指令的界面，它通常不支持鼠标，用户通过键盘输入指令，计算机接收到指令后，予以执行。
Cordova：是从PhoneGap中抽出的核心代码，是贡献给Apache后的开源移动开发框架，是驱动PhoneGap的核心引擎。使用它您可以使用web技术（html、css、JavaScript）来进行跨平台的开发，可针对不同的运行平台构建对应的应用程序，同时提供了一组API，使我们开发的应用可以来访问设备的功能，如摄像头、麦克风、传感器、数据、网络状态等。
具体安装如下：
1. 首先我们需要先安装Node.js和NPM
下载 Node.js 6或更高版本的安装程序，下载好后双击下载的pkg包默认安装即可。在dos命令行 或者 git 命令行中，可分别输入以下内容查看npm和node的版本号
1 // 查看node版本 2 node –v 4 // 查看npm版本 5 npm –v
2. 安装 Ionic CLI和Cordova。
- 通过 config 配置指向国内镜像源，避免国内网络安装错误，终端命令：
npm config set registry https://registry.npm.taobao.org //配置指向源 // 配置后可通过下面方式来验证是否成功 npm config get registry // 或 npm info express
- 下载后安装ionic和cordova包，终端命令：
npm install -g cordova ionic
- 安装完成后，检查是否安装成功，终端命令：
ionic -info //检查是否安装成功
ionic -angular //查看Ionic版本
根据信息提示，可对没有成功安装的包再次安装。
二、创建第一个应用程序
进入你想放应用程序的那个目录，比如我放在E盘，打开终端，输入命令
cd e:
使用ionic tutorial作为起始模板创建应用程序
ionic start myapp tutorial
命令说明：
- start 创建一个新的应用程序
- myapp 你项目的目录名称和应用程序名称
- tutorial ，ionic提供的起始模板，ionic提供了5个可用模板
tabs：一个简单的3选项卡布局sidemenu：侧面有可滑动菜单的布局blank一个单独的启动器super：启动项目超过14个可以使用的页面设计tutorial：一个引导启动项目
说明：如果不选择起始模板 ionic start myapp ，默认将使用 tabs 作为起始模板
三、浏览器中预览应用
你创建的应用程序所在文件夹，在浏览器中预览项目
cd myapp //进入程序所在目录 ionic serve //浏览器中预览
四、项目结构
整个应用项目结构如下
src/index.html 是应用程序的主要入口点，第一个打开的文件就是 index.html
1 <!DOCTYPE html> 2 <html lang="en" dir="ltr"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title>Ionic App</title> 7 <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> 8 <meta name="format-detection" content="telephone=no"> 9 <meta name="msapplication-tap-highlight" content="no"> 10 11 <link rel="icon" type="image/x-icon" href="assets/icon/favicon.ico"> 12 <link rel="manifest" href="manifest.json"> 13 <meta name="theme-color" content="#4e8ef7"> 14 15 <!--cordova.js的引用让我们可以使用Cordova创建应用（将应用打包为native应用，可以提交到App Store） --> 16 <script src="cordova.js"></script> 17 18 <!-- un-comment this code to enable service worker 19 <script> 20 if ('serviceWorker' in navigator) { 21 navigator.serviceWorker.register('service-worker.js') 22 .then(() => console.log('service worker installed')) 23 .catch(err => console.error('Error', err)); 24 } 25 </script>--> 26 27 <link href="build/main.css" rel="stylesheet"> 28 29 </head> 30 31 <body> 32 33 <!--Ionic的根组件，同时也是app启动的地方--> 34 <ion-app></ion-app> 35 36 37 38 <!--polyfills.js是在程序构建过程中生成的，是为浏览器某些特点功能生成的基本补丁--> 39 <script src="build/polyfills.js"></script> 40 41 <!-- vendor.js 是在程序构建过程中生成的，它包含了node_modules所有的依赖项 --> 42 <script src="build/vendor.js"></script> 43 44 <!--我们应用绑定的代码，一个包含Ionic，Angular和您的应用程序JavaScript的连接文件--> 45 <script src="build/main.js"></script> 46 47 </body> 48 49 </html>
./src/
在src目录的内部，我们找到我们原始的，未编译的代码。这就是Ionic应用程序的大部分工作。当我们运行ionic serve，我们的代码里面src/是transpiled到浏览器理解正确的JavaScript版本（目前，ES5）。这意味着我们可以使用TypeScript在较高级别工作，但是可以编译成浏览器需要的较早版本的Javascript。
src/app/app.module.ts是我们的应用程序的切入点
1 @NgModule({ 2 //创建的所有页面需添加到declarations数组 和 entryComponents数组 3 //所有自定义的组件或pipes需添加到declarations数组 4 declarations: [MyApp,HelloIonicPage, ItemDetailsPage, ListPage], 5 6 imports: [ BrowserModule, IonicModule.forRoot(MyApp)], 7 8 //每一个app都有一个用来引导其他程序的根组件,这和ionic/Angular 1中的ng-app很相似 9 //引导app程序的地方 10 bootstrap: [IonicApp], 11 12 // 创建的所有页面需添加到declarations数组 和 entryComponents数组 13 entryComponents: [MyApp,HelloIonicPage,ItemDetailsPage,ListPage], 14 15 16 //所有的服务需添加到 provider 数组 17 providers: [] 18 }) 19 export class AppModule {}
五、添加页面