ionic3 教程（一）安装和配置

连接：
ionic3教程（一）安装和配置
ionic3教程（二）登陆页制做
ionic3教程（三）设置页制做
ionic3教程（四）安卓硬件返回键处理
ionic3 教程（五）基本的网络请求

学习本教程前你须要了解如下内容：

• 前端基本知识（HTML五、JavaScript、CSS）
• TypeScript
• Angular

TypeScript的话至少须要了解基本语法，能够看看
TS 中文官方文档

对 Angular 不太熟悉的能够点这里：
Angular 4.0 架构详解
Angular 4.0 内置指令全攻略

什么是 ionic？他和 Cordova、Angular2 有什么联系？

ionic = Cordova + Angular + ionic CSS
Cordova 提供了使用 JavaScript 调用 Native 功能，ionic CSS 是一套 UI 框架，ionic 对 Angular 进行了封装。

ionic3

ionic 基于 AngularJS 开发。因为 AngularJS1.x 版本在性能上已经很难有较大提高，Google 推出了全新设计的 Angular 2，ionic 也对应着出了2。

ionic2 与一代相比有较大的变化，基于最新的 Angular 2 ，使用 TypeScript 进行开发，若是您没有接触过 AngularJS 或 Ionic1.x，彻底不用担忧，直接从 ionic2 开始学习便可。

ionic3 是 Angular4.0 推出以后的跟进版本，变化幅度不大。

安装和运行

若是没有安装过 Node.js，先去官网下载一下。

// 安装（失败的话 Mac 尝试使用 sudo，Windows 尝试管理员身份运行 cmd）
$ npm install -g cordova ionic
// 安装后能够验证一下 ionic cli 版本
$ ionic -version
3.5.0

// 建立应用
// cd 到要建立项目的目录，输入如下内容建立ionic项目
// ionic3Demo 是项目名，tabs是模板（默认是tabs，其余还有blank的单页等）
$ ionic start ionic3Demo tabs

// 安装依赖
// 会生成一个 node_modules 文件夹，并在里面安装 package.json 上写下的文件
$ cd ionic3Demo/
$ npm install

// 在浏览器中运行项目
$ ionic serve

有的朋友可能对 cli 不太熟悉，简单说两句。
-g 表明全局安装、install 能够简写为 i、-version 能够简写为 -v
剩下的还有 --save、--dev 等，想要了解更多能够参考官方文档
http://ionicframework.com/doc...

如图：

在web上运行 iOS、Android、WindowsPhone 项目

把浏览器中的地址改成：
http://localhost:8100/ionic-lab

不喜欢使用命令行的朋友，能够试一试 ionic lab，他是桌面版的开发环境。不过我没有尝试过，感兴趣的能够下载看看。
下载地址：http://lab.ionic.io

// 若是须要在手机运行，则执行如下命令
// 添加iOS项目
$ ionic platform add ios
// 把src里的内容同步到ios项目中(src后面会讲到)
$ ionic cordova build ios
// 运行iOS项目,至关于在Xcode里面按Command+R
$ ionic cordova emulate ios

//安卓的话同理，把ios替换为android便可
$ ionic platform add android
$ ionic cordova build android
$ ionic cordova emulate android

成功后目录结构以下，platform 里面是你添加的 iOS 和 Android 项目。

src 就是之后开发写代码主要的地方。每次写完要同步到手机项目中，须要使用

$ ionic cordova build ios
$ ionic platform add android

同步到 iOS 和 Android 平台里。

Tabs 分析

打开 app.component.ts 能够看到这句代码

rootPage:any = TabsPage;

这个至关于 iOS 的 rootViewController 和 Android 的 MainActivity。

回忆一下咱们一开始选择的 Tabs 模板，因此这里生成的是 tabs。打开 src/pages/tabs/tabs.ts，能够看到这些代码：

import { Component } from '@angular/core';

import { AboutPage } from '../about/about';
import { ContactPage } from '../contact/contact';
import { HomePage } from '../home/home';

@Component({
  templateUrl: 'tabs.html'
})
export class TabsPage {

  tab1Root = HomePage;
  tab2Root = AboutPage;
  tab3Root = ContactPage;

  constructor() {

  }
}

这个 TabsPage，就表明了应用最下面的三个 TabBar。上面分别指出了他们的路径。

Ionic 3 的导航和 iOS 同样是一个栈，push 到新界面，pop 回旧界面。咱们在构造函数中设置了 this.navCtrl 属性，咱们能够调用 this.navCtrl.push() 方法，来导航到一个新的页面。

好了，这一节内容就到这里。

补充

最近有不少朋友私信问我，如何升级 ionic 版本和 ionic cli 版本，也搞不清楚这两个东西的区别和联系，这里统一进行解释。

ionic 版本是 package.json 中的 ionic-angular。

// 升级方法：
// 修改 ionic-angular 的版本号，并在项目目录下执行如下命令
npm install

ionic cli 版本是一套 ionic 的命令行界面，用于执行各类命令行的命令。

// 升级方法：
// 在任意目录下，执行如下命令
npm install -g ionic@lastest