目录：

 

---

 

 

一、ionic的安装

使用Ionic创建和开发应用程序主要通过Ionic命令行实用程序（“CLI”），并使用Cordova构建和部署为本机应用程序。

CLI：command-line interface的缩写，命令行界面，是指可在用户提示符下键入可执行指令的界面，它通常不支持鼠标，用户通过键盘输入指令，计算机接收到指令后，予以执行。

Cordova：是从PhoneGap中抽出的核心代码，是贡献给Apache后的开源移动开发框架，是驱动PhoneGap的核心引擎。使用它您可以使用web技术（html、css、JavaScript）来进行跨平台的开发，可针对不同的运行平台构建对应的应用程序，同时提供了一组API，使我们开发的应用可以来访问设备的功能，如摄像头、麦克风、传感器、数据、网络状态等。

 

具体安装如下：

1. 首先我们需要先安装Node.js和NPM

6或更高版本的安装程序，下载好后双击下载的pkg包默认安装即可。在dos命令行 或者 git 命令行中，可分别输入以下内容查看npm和node的版本号

1 // 查看node版本2 node –v4 // 查看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  2  3  4      5         
      6          7         
      8         
      9         
     10 11         
     12         
     13         
     14 15         
     16         17 18         
     26 27         
     28 29     30 31     32 33         
     34         
     35 36 37 38         
     39         40 41         
     42         43 44         
     45         46 47     48 49 

./src/

在src目录的内部，我们找到我们原始的，未编译的代码。这就是Ionic应用程序的大部分工作。当我们运行ionic serve，我们的代码里面src/是到浏览器理解正确的JavaScript版本（目前，）。这意味着我们可以使用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 {}

 

五、添加页面