ionic2+：环境搭建及项目创建（入门指南）

首先要感谢yanxiaodi同意我转发ionic2指南 https://yanxiaodi.gitbooks.io/ionic2-guide。
之前学习了一段时间的ionic2，希望通过这篇分享给一些开始学习的伙伴们，自己也能巩固一下知识点。

1.安装Node.js

Node.js建议安装最新版本，下载地址：

https://nodejs.org/en/

经测试，5.x版本在编译的时候有可能会报错，请安装最新的6.x版本。

安装完后请打开Node命令行（Node.js command prompt），如果使用 Win 10 系统的话，可以在小娜搜索框里输入一个n，就会显示出来。输入以下命令看一下版本号：

Your environment has been set up for using Node.js 6.8.1 (x64) and npm.
C:\Users\yxd>node -v
v6.8.1
C:\Users\yxd>npm -v
3.10.8

请保证安装的 Node 和 npm 为较新的版本。根据近期学习 Ionic 的经验，Ionic 2是个非常喜欢追求最新版本的项目组，以前用的好好的代码，说不定某个版本就无法编译通过。某次更新后，JDK也需要升级到最新版本才行。所以强烈建议所有的工具都保持最新。

还有一点需要注意的，因为国内的网络环境原因，在下载npm包的时候经常会遇到无法正常下载的情况。国内淘宝推出了 npm 镜像，这是一个完整的 npmjs.org 镜像，同步频率为15分钟一次，保证与官方服务同步。推荐使用该镜像。使用方法如下：

输入以下命令，切换到淘宝镜像源：

npm install -g cnpm --registry=http://registry.npm.taobao.org

本GitBook之后所有用到的 npm 命令都可以使用 cnpm 来代替进行 install。但是 cnpm 不支持 publish 命令，需要注意。

关于淘宝 npm 镜像的其他使用问题，请参考：

https://npm.taobao.org/

2.安装Ionic2

输入以下命令安装 Ionic （如果刚才设置了淘宝镜像源，可以使用 cnpm 代替 npm）：

npm install -g ionic

需要注意的是，如果之前安装过 Ionic 2 的 beta 版本，需要先卸载掉：

npm uninstall -g ionic

然后重新安装。

安装完成后输入以下命令看一下版本号：

C:\Users\yxd>ionic -version
2.1.0

目前最新版本是2.1.0。如果是 beta 版本的话，请重新安装，确保安装最新版。

3.安装Cordova

输入以下命令安装 Cordova：

npm install -g cordova

看一下版本号：

C:\Users\yxd>cordova -version
6.3.1

4.安装JDK

为了编译到 Android平台，还需要安装JDK。因为我木有 iOS 设备，就不研究 iOS 的打包了。

注意请安装最新版本的 JDK，下载地址：

http://www.oracle.com/technetwork/java/javase/downloads/index.html

下载8u111或8u112以上版本。安装时建议安装到C:\Java 目录下。然后设置系统变量：

名称：JAVA_HOME，值（根据你的安装路径改）： C:\Java\jdk1.8.0_101

在Path中添加 %JAVA_HOME%\bin

千万不要从百度搜索安装，会带垃圾的。

安装完后输入以下命令看一下版本：

C:\Users\yxd>java -version
java version "1.8.0_101"
Java(TM) SE Runtime Environment (build 1.8.0_101-b13)
Java HotSpot(TM) 64-Bit Server VM (build 25.101-b13, mixed mode)

C:\Users\yxd>javac -version
javac 1.8.0_101

这就表示安装成功了。

5.安装Android SDK

Android SDK 的安装就麻烦一点，因为国内的网络环境……

这个就自想办法吧，网上有资源包，这里就不提供下载地址了。

还是需要设置一下系统变量：

名称：ANDROID_HOME，值（根据你的SDK路径改）：D:\Android\sdk

6.创建项目

打开 Node 命令行，首先 cd 到项目目录，使用 start 命令来创建一个新App：

ionic start MyIonic2Project tutorial --v2

这个命令将下载项目模板，安装 npm modules，设置 Cordova 的相关信息。

tutorial 参数的意思是下载 tutorial 模板来初始化项目，如果不指定这个参数的话，比如：

ionic start MyIonic2Project --v2

默认会使用 tabs 模板。

当然你也可以加一个 blank 参数，这样就是一个空项目。

--v2 的参数必须要加，不然会建立 v1.x 版本的项目。

如果失败，有可能会出现以下信息：

Creating Ionic app in folder E:\Workspaces\Ionic2\MyIonic2Project based on tutorial project
Downloading: https://github.com/driftyco/ionic2-app-base/archive/master.zip
[=============================] 100% 0.0s
Downloading: https://github.com/driftyco/ionic2-starter-tutorial/archive/master.zip
[=============================] 100% 0.0s
Installing npm packages...
Error with start undefined
Error Initializing app: There was an error with the spawned command: npminstall
There was an error with the spawned command: npminstall
Caught exception:
 undefined
Mind letting us know? https://github.com/driftyco/ionic-cli/issues

这说明 npm 安装的时候失败了，可以 cd 到项目目录，使用之前设置过的 cnpm 命令：

E:\Workspaces\Ionic2>cd MyIonic2Project
E:\Workspaces\Ionic2\MyIonic2Project>cnpm install

直到最后输出类似以下信息：

All packages installed (319 packages installed from npm registry, use 2m, speed 37.49kB/s, json 659(4MB), tarball 1.07MB)

说明 npm modules 安装成功。

7.在浏览器中运行

现在 cd 到项目目录，使用 serve 命令来快速浏览项目：

E:\Workspaces\Ionic2>cd MyIonic2Project
E:\Workspaces\Ionic2\MyIonic2Project>ionic serve

接下来 CLI 会编译项目，输出类似下面的内容：

> ionic-app-base@ watch E:\Workspaces\Ionic2\MyIonic2Project
> ionic-app-scripts watch
[14:38:58] ionic-app-scripts 0.0.36
[14:38:58] watch started ...
[14:38:58] build dev started ...
[14:38:58] clean started ...
[14:38:58] clean finished in 1 ms
[14:38:58] copy started ...
[14:38:58] transpile started ...
[14:38:58] lint started ...
[14:39:17] lint finished in 18.68 s
[14:39:19] transpile finished in 21.32 s
[14:39:19] bundle started ...
[14:39:23] copy finished in 25.39 s
[14:39:49] bundle finished in 29.75 s
[14:39:49] sass started ...
[14:39:53] sass finished in 4.10 s
[14:39:53] build dev finished in 55.20 s
[14:39:54] watch ready in 55.95 s
Running live reload server: http://localhost:35729
Watching: www/**/*, !www/lib/**/*
√ Running dev server: http://localhost:8100
Ionic server commands, enter:
 restart or r to restart the client app from the root
 goto or g and a url to have the app navigate to the given url
 consolelogs or c to enable/disable console log output
 serverlogs or s to enable/disable server log output
 quit or q to shutdown the server and exit
ionic $

接着浏览器会打开一个地址为 http://localhost:8100 的窗口，端口号根据当前PC的实际情况可能会有变化，如果8100被占用了会使用8101等。

你可以看到运行效果：

image

8.项目结构

现在来看一下一个 Ionic 2 App的结构。这是一个标准的Cordova项目结构。

./src/index.html

./src/index.html 是App的主要入口，设置脚本和CSS，运行整个App。我们不会花费太多时间在这个文件上，你可以看到HTML代码里有一个 标签，像下面这样：

在底部还有以下的脚本：

build/main.js是自动生成的，实际上是把TypeScript转成了普通的JavaScript。

cordova.js在本地开发的时候在浏览器中浏览会报404错误，这个文件会在Cordova打包的时候自动加到项目里。
./src/

在src目录里我们会找到原始的没有经过编译的代码，这也是我们的主要工作目录。当我们运行ionic serve命令的时候，在src/目录下的文件会被转译成正确的浏览器能够解释的JavaScript版本（当前是ES5）。这意味着我们可以使用高级的TypeScript，但是会编译回浏览器需要的老版本的JavaScript。 src/app/app.module.ts是App的入口。

在文件底部我们会看到以下的代码：

@NgModule({
 declarations: [MyApp,HelloIonicPage, ItemDetailsPage, ListPage],
 imports: [IonicModule.forRoot(MyApp)],
 bootstrap: [IonicApp],
 entryComponents: [MyApp,HelloIonicPage,ItemDetailsPage,ListPage],
 providers: []
})
export class AppModule {}

每个App都有一个root module来控制应用中其他的部分。如果你用过Ionic1和Angular1的话，有点类似ng-app。这也是我们使用ionicBootstrap来启动应用的地方。

./src/app/app.html

src/app/app.html是主要的模板文件：

 
     
         Pages
     
 
 
     
         
             {{p.title}}
         
     
 

在这个模板中，我们使用了ion-menu来作为菜单，使用ion-nav组件当做主要的内容区域。ion-menu的[content]属性被绑定到ion-nav的本地变量content上，所以它能够知道要显示什么。

下面我们来看如何来创建新页面并实现基本的导航。

9.添加页面

现在我们对Ionic 2 App的布局有了一个基本的认识，继续来实现添加和导航页面的功能。

看一下src/app/app.html,在底部会看到以下代码：

注意root属性的绑定。对于ion-nav组件来说，这是第一个或者说是“根”页面。当ion-nav组件载入时，组件引用的rootPage变量将会作为根页面被载入。

在src/app/app.component.ts,MyApp组件在构造函数里指定了这个变量：

...
import {HelloIonicPage} from '../pages/hello-ionic/hello-ionic';
...

export class MyApp {
 ...

 // make HelloIonicPage the root (or first) page
 rootPage: any = HelloIonicPage;
 pages: Array<{title: string, component: any}>;

 constructor(
   private platform: Platform,
   private menu: MenuController
 ) {
 ...
 }
 ...

}

我们看到rootPage被设置为HelloIonicPage，所以HelloIonicPage将是nav controller第一个载入的页面。

创建一个页面

接下来，我们看一下我们导入的HelloIonicPage页面。在src/pages/hello-ionic/目录下，打开hello-ionic.ts。

你可以注意到每个页面都有自己的目录，每个目录中都可以看到具有相同名字的`.html`和`.scss`文件。例如在`hello-ionic/`目录我们可以看到有`hello-ionic.ts`, `hello-ionic.html`, 和`hello-ionic.scss`。虽然这种模式不是必须的，但这有助于项目文件的良好组织。

接下来我们看到HelloIonicPage这个类。这个类创建了一个Page，即Angular中的Component（组件），并且会载入Ionic的导航系统。注意因为Page是被动态载入的，所以他们不需要selector：

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

@Component({
 templateUrl: 'build/pages/hello-ionic/hello-ionic.html'
})

export class HelloIonicPage {}

所有的Page都是一个类，并且关联到对应的模板文件上。看一下src/pages/hello-ionic/hello-ionic.html，即这个页面的模板文件：

 
   
    
   
   Hello Ionic
 


 
Welcome to your first Ionic app!
   

     This starter project is our way of helping you get a functional app running in record time.
   
   

     Follow along on the tutorial section of the Ionic docs!
   
   

   Toggle Menu
 

是navigation bar的模板。当我们导航到页面时，navigation bar的按钮和页面标题将会作为整个页面动画的一部分展现出来。

模板其余的部分是标准的Ionic代码，设置了内容区域和输出我们的欢迎信息。

创建一个新页面

创建这个新页面，我们并不需要做很多配置，只需要确保设置好navigation bar要展示的标题就可以了。

看一下src/pages/list/list.ts的内容，这里定义了一个新页面：

import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
import { ItemDetailsPage } from '../item-details/item-details';

@Component({    
    templateUrl: 'list.html'
})
export class ListPage {    selectedItem: any;    icons: string[];    items: Array<{title: string, note: string, icon: string}>;

    constructor(public navCtrl: NavController, public navParams: NavParams) {
        // If we navigated to this page, we will have an item available as a nav param
        this.selectedItem = navParams.get('item');
        this.icons = ['flask', 'wifi', 'beer', 'football', 'basketball', 'paper-plane', 'american-football', 'boat', 'bluetooth', 'build'];

        this.items = [];        
        for(let i = 1; i < 11; i++) {
            this.items.push({
            title: 'Item ' + i,
            note: 'This is item #' + i,
            icon: this.icons[Math.floor(Math.random() * this.icons.length)]
        });
    }
 }

    itemTapped(event, item) {
        this.navCtrl.push(ItemDetailsPage, {
            item: item
        });
    }}

这个页面将会创建一个基本的列表页面，包含一些数字。

大致上这个页面跟我们之前看的HelloIonicPage非常类似。接下来我们看一下如何导航到这个新页面。

10.导航到页面

回忆一下上个章节，我们在ListPage类里有一些下面的代码：

itemTapped(event, item) { 
    this.navCtrl.push(ItemDetailsPage, { 
        item: item 
    }); 
}

你也许注意到我们引用了ItemDetailPage。我们用以下的代码将其import到app/pages/list/list.ts里：

import {ItemDetailsPage} from '../item-details/item-details';

当保存文件后，ionic serve进程会自动重新编译以应用新的更改，并自动刷新浏览器。重新看一下浏览器中的页面，当点击一个项时，它将会导航到详情页面。注意菜单按钮被一个返回按钮代替了，这是Ionic遵循的一种原生App的导航方式，当然这是可以被配置的。
工作原理

Ionic 2的导航像一个简单的栈，我们使用push方法来导航到新页面，将其放在栈的顶部，并显示一个返回按钮。对于返回，我们使用pop方法将其从栈中移除。因为我们在构造函数中设置了this.navCtrl属性，我们可以调用this.navCtrl.push()方法，来导航到一个新的页面。我们还可以将一个object传递给将要导航过去的页面。使用push方法导航到新页面非常简单，但Ionic的导航系统是非常灵活的。可以从导航文档处获得更详细的导航示例。

对于`Url`，`Ionic 2`与`Ionic 1`是不同的。我们要确保我们可以返回到某个`Page`，所以一般不使用`Url`来进行导航。当然我们在必要的时候还是有办法来使用Url导航的。

接下来

你已经掌握了Ionic 2的入门知识。你可以继续学习Ionic 2的各种Component，和关于硬件的Native APIs。