Ionic 2 基础 - 第一课：生成一个Ionic2应用

我们已经讲了不少内容了，现在我们需要知道Ionic 2是干什么的，为什么要对他做这么多更改。带着这个疑问，我们开始学习如何使用Ionic 2。

安装Ionic

在使用Ionic 2制作应用之前，我们需要装好所有需要用到的东西。用的是Mac还是PC不重要，我们都可以用来学完这本书生产一个iOS和Android应用提交到App商店。
重要：如果你电脑上已经装了Ionic 1那么你可以直接跳到下一部分。你只需要运行npm install -g ionic或者sudo npm install -g ionic来设置Ionic 2需要的任何东西。如果你想继续使用Ionic 1的话，用不着担心，更新之后，Ionic 1和Ionic 2你都可以用。
首先，你得装个Node.js。Node.js是一个用来制作快速，伸展性网络应用的平台，他可以用来做很多不同的事情。如果你不熟悉Node.js你也无须担心，我们基本上不怎么用的上——但是他是跑Ionic和安装其他包必备的。

> 访问以下网址安装Node.js:
https://nodejs.org/en/download/

一旦安装好了Node.js，你可以通过命令行去访问node包管理器了。
> 在终端运行如下命令安装Ionic和Cordova：

npm install -g ionic cordova

或者

sudo npm install -g ionic cordova

如果没有设置好你的Android SDK的话，请参考如下方案去设置好：

• 在Mac上安装Android开发环境
• 在Window上安装Android开发环境

如果你是Mac机的话，那么你也要安装好XCode，因为你需要用他来构建应用和为应用签名。
iOS SDK的配置无须担心，因为XCode已经帮你摆平了，如果你没有Mac的话，那么你就没法设置了。（后续我们会讲到如何在没有Mac的情况下构建iOS应用）
现在你的开发环境应该设置好了。通过以下命令，查看你是否成功安装Ionic CLI（Command Line Interface，命令行交互界面）：
‘’’
ionic -v
‘’’
你也可以通过在你的ionic项目内运行:
‘’’
ionic info
‘’’
来查看更多信息。
以下是我写作本书的时候的输出信息：

如果你在安装ionic或者生成新项目的时候发生错误，先保证下你是否安装了最新（当前版本）的Node。安装好了最新的版本之后，先运行如下命令：

npm uninstall -g ionic npm cache clean

注意：Ionic框架和Ionic CLI是两个不同的东西。CLI是咱们刚装的，他通过命令行提供了一系列的工具帮助我们创建和管理Ionic项目。Ionic CLI负责下载实际的Ionic框架到每个你创建的项目中。

生成第一个Ionic项目

Ionic装好后，生成应用特别简单。你只需要简单的运行ionic start命令就可以创建一个新项目，包括一些模板代码和文件。
> 运行如下命令生成一个新的Ionic应用：

ionic start MyFirstApp blank --v2

以上命令会生成一个名为‘MyFirstApp’的应用，使用的是‘blank’模板。Ionic有一些内置的模板，上面我们用的上‘blank’，我们也可以用其他的：

ionic start MyFirstApp sidemenu --v2

或者

ionic start MyFirstApp tutorial --v2

又或者运行默认命令：

ionic start MyFirstApp --v2

默认的是一个标签页应用模板。记住，想要创建Ionic 2应用的话就必须在后面加‘—v2’。如果不加的话就会创建Ionic 1项目了。
注意：当前所有Ionic 2项目默认使用TypeScript。由于TypeScript是一个ES6的扩展，所以可以在TypeScript项目里面直接使用ES6，但是所有的Javascript必须是.ts，而不是.js。
下面我们开始研究枯燥的blank模板项目。项目创建成功之后，立刻将项目作为当前目录，这样我们就可以对他做更多事情了。
> 运行如下命令转到Ionic项目目录

cd MyFirstApp

如果对命令行或者终端不熟悉的话，先考虑读下这个。虽然内容是针对Ionic 1的，但是里面有关于命令行界面工作原理的内容。

添加平台

终于，我们要开始使用Cordova制作我们的应用了（实际上Ionic CLI生成的应用是一个Cordova应用），首先我们得添加我们的目标平台。如果要添加Android平台的话，那么运行这个命令：

ionic platform add android

添加iOS平台的话，运行：

ionic platform add ios

如果你制作的是这两个平台应用的话，那么你都应该运行一下。这样你的项目就可以构建对应平台的应用了。
在这里我简单解释一下，我们大部分的代码将会在app文件夹内，同时你也可以在你的项目下找到一个名为platforms的文件夹——对应平台的相关配置都是存放在此处的。后续我们会集体讲一遍。

运行应用

HTML5移动应用的美好之处在于你可以一边开发一边做浏览器中查看他。但是如果你直接利用浏览器打开index.html文件的话，估计你会遭遇到不开心的事情。
Ionic项目是需要到服务端上运行的——意思是你不能直接访问这些文件，也不是意味着你需要把他放到互联网上去，你可以将一个完全自容的Ionic应用部署到应用商店去（这个我们后面会学到）。幸运的是，Ionic提供一个了一个简单的在本地网络服务器同步开发和测试的方法。
> 运行如下命令可以在浏览器中预览你的应用：

ionic serve

这个命令会打开一个新的浏览器，浏览器会打开你当前应用在本地服务器上运行的地址。目前，他看起来应该是这样的：

这个命令不仅可以给你查看你的应用，当你代码改动的时候，他会实时更新显示。让你编辑或者保存任何文件的时候，你不用在浏览器中重新刷新页面就可以看到更改自动映射到浏览器中了。

停止此进程请使用：

Ctrl + C

同时请记住，运行了ionic serve后不能运行其他Ionic CLI命令来。你需要通过 Ctrl + C 终止此命令然后运行指定的命令。
（译者注：Windows上可以重新开一个命令行来运行）

更新应用

有时候你可能需要更新到新的Ionic版本。更新项目中的ionic版本最简单的方法是先更新Ionic CLI：

npm install -g ionic

或者

sudo npm install -g ionic

然后，更新项目中的package.json，你应该可以在其中看到这样的一部分：

"dependencies": {
    "@angular/common": "^2.0.0",
    "@angular/compiler": "^2.0.0",
    "@angular/compiler-cli": "0.6.2",
    "@angular/core": "^2.0.0",
    "@angular/forms": "^2.0.0",
    "@angular/http": "^2.0.0",
    "@angular/platform-browser": "^2.0.0",
    "@angular/platform-browser-dynamic": "^2.0.0",
    "@angular/platform-server": "^2.0.0",
    "@ionic/storage": "^1.0.3",
    "ionic-angular": "^2.0.0-rc.1",
    "ionic-native": "^2.2.3",
    "ionicons": "^3.0.0",
    "rxjs": "5.0.0-beta.12",
    "zone.js": "^0.6.21"
},
"devDependencies": {
    "@ionic/app-scripts": "^0.0.33",
    "typescript": "^2.0.3"
},

只要改掉ionic-angular的版本号到最新的版本号，然后在项目文件夹中运行：

npm install

就可以了。这个命令将自动抓取最新版的框架并添加到你的项目中来。
重要：记住，如果需要更新package.json其他依赖库到最新版本的话也是一样的操作。
在新版本发布之后，先阅读更新日志查看是否有任何重大变更，因为如果有的话你就有可能需要修改部分项目代码了。
通常做法是利用更新后的Ionic CLI新建一个项目，然后将你在个人代码覆盖进去。如果不想这么做的话，一定要确保仔细阅读了更新日志，然后相应的更新你的依赖库和代码。随着Ionic 2越来越稳定，后续变动其实也不会很大，所以这也不会是个太大的问题。