第一課：生成一個(gè)Ionic2應(yīng)用
我們已經(jīng)講了不少內(nèi)容了亭枷，現(xiàn)在我們需要知道Ionic 2是干什么的稚矿，為什么要對(duì)他做這么多更改。帶著這個(gè)疑問(wèn)敛助，我們開(kāi)始學(xué)習(xí)如何使用Ionic 2粗卜。
安裝Ionic
在使用Ionic 2制作應(yīng)用之前，我們需要裝好所有需要用到的東西辜腺。用的是Mac還是PC不重要休建，我們都可以用來(lái)學(xué)完這本書(shū)生產(chǎn)一個(gè)iOS和Android應(yīng)用提交到App商店乍恐。
重要：如果你電腦上已經(jīng)裝了Ionic 1那么你可以直接跳到下一部分评疗。你只需要運(yùn)行npm install -g ionic或者sudo npm install -g ionic來(lái)設(shè)置Ionic 2需要的任何東西。如果你想繼續(xù)使用Ionic 1的話茵烈，用不著擔(dān)心百匆，更新之后，Ionic 1和Ionic 2你都可以用呜投。
首先加匈，你得裝個(gè)Node.js。Node.js是一個(gè)用來(lái)制作快速仑荐，伸展性網(wǎng)絡(luò)應(yīng)用的平臺(tái)雕拼，他可以用來(lái)做很多不同的事情。如果你不熟悉Node.js你也無(wú)須擔(dān)心粘招，我們基本上不怎么用的上——但是他是跑Ionic和安裝其他包必備的啥寇。
** > 訪問(wèn)以下網(wǎng)址安裝Node.js**:
https://nodejs.org/en/download/
一旦安裝好了Node.js，你可以通過(guò)命令行去訪問(wèn)node包管理器了洒扎。
> 在終端運(yùn)行如下命令安裝Ionic和Cordova：
npm install -g ionic cordova
或者
sudo npm install -g ionic cordova
如果沒(méi)有設(shè)置好你的Android SDK的話辑甜，請(qǐng)參考如下方案去設(shè)置好：
如果你是Mac機(jī)的話，那么你也要安裝好XCode袍冷，因?yàn)槟阈枰盟麃?lái)構(gòu)建應(yīng)用和為應(yīng)用簽名磷醋。
iOS SDK的配置無(wú)須擔(dān)心，因?yàn)閄Code已經(jīng)幫你擺平了胡诗，如果你沒(méi)有Mac的話邓线，那么你就沒(méi)法設(shè)置了淌友。（后續(xù)我們會(huì)講到如何在沒(méi)有Mac的情況下構(gòu)建iOS應(yīng)用）
現(xiàn)在你的開(kāi)發(fā)環(huán)境應(yīng)該設(shè)置好了。通過(guò)以下命令骇陈，查看你是否成功安裝Ionic CLI（Command Line Interface亩进，命令行交互界面）：
'''
ionic -v
'''
你也可以通過(guò)在你的ionic項(xiàng)目?jī)?nèi)運(yùn)行:
'''
ionic info
'''
來(lái)查看更多信息。
以下是我寫(xiě)作本書(shū)的時(shí)候的輸出信息：
如果你在安裝ionic或者生成新項(xiàng)目的時(shí)候發(fā)生錯(cuò)誤缩歪，先保證下你是否安裝了最新（當(dāng)前版本）的Node归薛。安裝好了最新的版本之后，先運(yùn)行如下命令：
npm uninstall -g ionic npm cache clean
注意：Ionic框架和Ionic CLI是兩個(gè)不同的東西匪蝙。CLI是咱們剛裝的主籍，他通過(guò)命令行提供了一系列的工具幫助我們創(chuàng)建和管理Ionic項(xiàng)目。Ionic CLI負(fù)責(zé)下載實(shí)際的Ionic框架到每個(gè)你創(chuàng)建的項(xiàng)目中逛球。
生成第一個(gè)Ionic項(xiàng)目
Ionic裝好后千元，生成應(yīng)用特別簡(jiǎn)單。你只需要簡(jiǎn)單的運(yùn)行ionic start命令就可以創(chuàng)建一個(gè)新項(xiàng)目颤绕，包括一些模板代碼和文件幸海。
> 運(yùn)行如下命令生成一個(gè)新的Ionic應(yīng)用：
ionic start MyFirstApp blank --v2
以上命令會(huì)生成一個(gè)名為‘MyFirstApp’的應(yīng)用，使用的是‘blank’模板奥务。Ionic有一些內(nèi)置的模板物独，上面我們用的上‘blank’，我們也可以用其他的：
ionic start MyFirstApp sidemenu --v2
或者
ionic start MyFirstApp tutorial --v2
又或者運(yùn)行默認(rèn)命令：
ionic start MyFirstApp --v2
默認(rèn)的是一個(gè)標(biāo)簽頁(yè)應(yīng)用模板氯葬。記住挡篓，想要?jiǎng)?chuàng)建Ionic 2應(yīng)用的話就必須在后面加‘--v2’。如果不加的話就會(huì)創(chuàng)建Ionic 1項(xiàng)目了帚称。
注意：當(dāng)前所有Ionic 2項(xiàng)目默認(rèn)使用TypeScript官研。由于TypeScript是一個(gè)ES6的擴(kuò)展，所以可以在TypeScript項(xiàng)目里面直接使用ES6闯睹，但是所有的Javascript必須是.ts戏羽，而不是.js。
下面我們開(kāi)始研究枯燥的blank模板項(xiàng)目楼吃。項(xiàng)目創(chuàng)建成功之后始花，立刻將項(xiàng)目作為當(dāng)前目錄，這樣我們就可以對(duì)他做更多事情了所刀。
> 運(yùn)行如下命令轉(zhuǎn)到Ionic項(xiàng)目目錄
cd MyFirstApp
如果對(duì)命令行或者終端不熟悉的話衙荐，先考慮讀下這個(gè)。雖然內(nèi)容是針對(duì)Ionic 1的浮创，但是里面有關(guān)于命令行界面工作原理的內(nèi)容忧吟。
添加平臺(tái)
終于，我們要開(kāi)始使用Cordova制作我們的應(yīng)用了（實(shí)際上Ionic CLI生成的應(yīng)用是一個(gè)Cordova應(yīng)用）斩披，首先我們得添加我們的目標(biāo)平臺(tái)溜族。如果要添加Android平臺(tái)的話讹俊，那么運(yùn)行這個(gè)命令：
ionic platform add android
添加iOS平臺(tái)的話，運(yùn)行：
ionic platform add ios
如果你制作的是這兩個(gè)平臺(tái)應(yīng)用的話煌抒，那么你都應(yīng)該運(yùn)行一下仍劈。這樣你的項(xiàng)目就可以構(gòu)建對(duì)應(yīng)平臺(tái)的應(yīng)用了。
在這里我簡(jiǎn)單解釋一下寡壮，我們大部分的代碼將會(huì)在app文件夾內(nèi)贩疙，同時(shí)你也可以在你的項(xiàng)目下找到一個(gè)名為platforms的文件夾——對(duì)應(yīng)平臺(tái)的相關(guān)配置都是存放在此處的。后續(xù)我們會(huì)集體講一遍况既。
運(yùn)行應(yīng)用
HTML5移動(dòng)應(yīng)用的美好之處在于你可以一邊開(kāi)發(fā)一邊做瀏覽器中查看他这溅。但是如果你直接利用瀏覽器打開(kāi)index.html文件的話，估計(jì)你會(huì)遭遇到不開(kāi)心的事情棒仍。
Ionic項(xiàng)目是需要到服務(wù)端上運(yùn)行的——意思是你不能直接訪問(wèn)這些文件悲靴，也不是意味著你需要把他放到互聯(lián)網(wǎng)上去，你可以將一個(gè)完全自容的Ionic應(yīng)用部署到應(yīng)用商店去（這個(gè)我們后面會(huì)學(xué)到）莫其。幸運(yùn)的是癞尚，Ionic提供一個(gè)了一個(gè)簡(jiǎn)單的在本地網(wǎng)絡(luò)服務(wù)器同步開(kāi)發(fā)和測(cè)試的方法。
> 運(yùn)行如下命令可以在瀏覽器中預(yù)覽你的應(yīng)用：
ionic serve
這個(gè)命令會(huì)打開(kāi)一個(gè)新的瀏覽器乱陡，瀏覽器會(huì)打開(kāi)你當(dāng)前應(yīng)用在本地服務(wù)器上運(yùn)行的地址浇揩。目前，他看起來(lái)應(yīng)該是這樣的：
這個(gè)命令不僅可以給你查看你的應(yīng)用蛋褥，當(dāng)你代碼改動(dòng)的時(shí)候临燃，他會(huì)實(shí)時(shí)更新顯示睛驳。讓你編輯或者保存任何文件的時(shí)候烙心，你不用在瀏覽器中重新刷新頁(yè)面就可以看到更改自動(dòng)映射到瀏覽器中了。
停止此進(jìn)程請(qǐng)使用：
Ctrl + C
同時(shí)請(qǐng)記住乏沸，運(yùn)行了ionic serve后不能運(yùn)行其他Ionic CLI命令來(lái)淫茵。你需要通過(guò) Ctrl + C 終止此命令然后運(yùn)行指定的命令。
（譯者注：Windows上可以重新開(kāi)一個(gè)命令行來(lái)運(yùn)行）
更新應(yīng)用
有時(shí)候你可能需要更新到新的Ionic版本蹬跃。更新項(xiàng)目中的ionic版本最簡(jiǎn)單的方法是先更新Ionic CLI：
npm install -g ionic
或者
sudo npm install -g ionic
然后匙瘪，更新項(xiàng)目中的package.json，你應(yīng)該可以在其中看到這樣的一部分：
"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的版本號(hào)到最新的版本號(hào)蝶缀，然后在項(xiàng)目文件夾中運(yùn)行：
npm install
就可以了丹喻。這個(gè)命令將自動(dòng)抓取最新版的框架并添加到你的項(xiàng)目中來(lái)。
重要：記住攀隔，如果需要更新package.json其他依賴庫(kù)到最新版本的話也是一樣的操作蝇狼。
在新版本發(fā)布之后逗宁，先閱讀更新日志查看是否有任何重大變更，因?yàn)槿绻械脑捘憔陀锌赡苄枰薷牟糠猪?xiàng)目代碼了鳍悠。
通常做法是利用更新后的Ionic CLI新建一個(gè)項(xiàng)目税娜，然后將你在個(gè)人代碼覆蓋進(jìn)去。如果不想這么做的話藏研，一定要確保仔細(xì)閱讀了更新日志敬矩，然后相應(yīng)的更新你的依賴庫(kù)和代碼。隨著Ionic 2越來(lái)越穩(wěn)定蠢挡，后續(xù)變動(dòng)其實(shí)也不會(huì)很大弧岳，所以這也不會(huì)是個(gè)太大的問(wèn)題。
