Ionic2入門教程 實現TodoList App-1 初識Ionic2

Ionic是一個基於Angular2的開發手機web app的框架，它包含了一整套手機端的樣式組件，和一系列的功能服務組件。樣式包括像按鈕、表單、列表、header等都有提供。服務組件的話，包括tab、slider、側邊欄、模態窗口等也有不少，基本上能知足大部分手機web應用的開發需求。

須要說明的是，Ionic的版本也跟隨Angular的版本，Ionic1是基於Angular1的，Ionic2是基於Angular2的。而Ionic提供了一個命令行的工具ionic-cli，他同時支持Ionic1和2的版本，只是經過選項來幫助建立不一樣版本項目腳手架。

同時，咱們開發手機web應用的時候，常常會結合Cordova來將它打包成手機應用。對於這一點，ionic也提供了ionic-native來更方便的使用ng-cordova的插件。

總之，ionic提供了一整套完整的手機app開發的解決方案，從建立項目、開發、測試、打包、生成app甚至簽名和提交app store都提供了完整的工具。（要使用它的雲編譯功能，須要上傳開發者帳號的證書，國內用戶通常爲了安全都不會這麼用。）在這個教程裏面，咱們就來看看用如何用ionic來建立一個最簡單的手機web應用，咱們仍是實現一個Todolist的例子，你們也能夠結合着以前的教程Angular2入門教程-2 實現TodoList App ，來看看ionic2和Angular2在使用上的區別。

在教程的第一部分，咱們先介紹Ionic2，包括安裝、建立項目，以及瞭解一下用Ionic2命令行工具建立的項目結構和各個部分的代碼。

Ionic在github上的地址是 github.com/driftyco/io… ionicframework.com。官方網站上的文檔也比較全，大部分組件都有示例代碼和效果展現。組件文檔能夠查看：http://ionicframe… ，各個組件的api文檔能夠查看：ionicframework.com/docs/api/。

安裝Ionic命令行工具

首先咱們須要安裝Ionic命令行工具，使用npm安裝：

npm install -g ionic複製代碼

由於咱們這個實例是隻建立web應用，不打包成手機app，若是你須要打包，或使用cordova插件，還須要安裝cordova。
安裝完成後，能夠經過ionic help來查看各個提供的功能。ionic命令行工具除了提供建立項目、打包web應用（底層使用的是webpack來編譯、minify和打包代碼）等功能之外，它還封裝了cordova的功能，因此它也能夠用來添加cordova的插件、平臺、打包手機app等。

我當前的版本是2.2.1。若是你以前安裝過以前的版本，請先更新。雖然2.x版本開始就支持Angular2，可是，新版本老是會修復一些bug，或者完善編譯、打包的一些功能和選項。

建立項目和運行

接下來使用下面的命令建立一個應用：

ionic start ionic2-todolist blank --v2 --no-cordova複製代碼

其中ionic start就是根據項目腳手架建立一個項目, ionic2-todolist是咱們的app的名字，blank的腳手架的模板，咱們使用blank來從頭建立一個應用。ionic2提供了幾個模板，有sidemenu, tabs， blank, complex-list等，能夠經過ionic start -l查看可用的模板。固然你也能夠在github上找其餘開發者提供的模板或腳手架，能夠直接下載下來來使用。
--v2指的是咱們要建立ionic2的版本。--no-cordova是說不使用cordova，由於這個例子裏咱們不打包手機app。
建立建立完之後，它會自動調用npm install安裝依賴包，根據你的網絡狀況，可能很慢甚至有些沒法下載，請自行想辦法解決。

而後，進入新建的目錄，運行：

ionic serve複製代碼

它會編譯ts文件，打包、使用監聽方式啓動測試服務器運行，若是修改了文件，會自動編譯而後刷新頁面。

項目結構

ionic是基於Angular2的，因此它的項目結構跟Angular2相似，目錄結構以下：

├── ionic.config.json #ionic的配置文件
├── package.json
├── resources # 打包app使用的icon圖標和加載頁圖片
│   ├── android # 生成的android平臺的各個尺寸的圖標和加載頁圖片
│   ├── icon.png # 應用圖標
│   ├── ios # 生成的ios平臺的各個尺寸的圖標和加載頁圖片
│   └── splash.png # 加載頁圖片
├── src # 頁面源文件
│   ├── app
│   ├── assets
│   ├── declarations.d.ts
│   ├── index.html
│   ├── manifest.json
│   ├── pages
│   ├── service-worker.js
│   └── theme
├── tsconfig.json
├── tslint.json
└── www # 編譯後的文件夾, Cordova默認用www路徑並打開裏面的index.html
    ├── manifest.json
    └── service-worker.js複製代碼

在上面的目錄結構中，對於部分ionic用到的文件，在它的文件後面做了簡要的說明，下一節再詳細說明每一個部分的用途的配置方式。

項目環境相關文件說明

首先，package.json就不用說了，每一個基於node平臺的項目都有一個這樣的文件，裏面定義了項目的基本信息，還有開發和運行須要用到的庫。

ionic.config.json

這個ionic項目的基本配置文件，無論你是建立一個單純的web應用，仍是想要封裝成cordova的混合app，都會有一個這樣的文件。裏面的內容也很簡單，咱們最經常使用到的可能就是代理設置：

{
  "name": "TodoList系統",
  "app_id": "",
  "v2": true,
  "typescript": true,
  "proxies": [
    {
      "path": "/api",
      "proxyUrl": "http://service.mydomain.com/api"
    }
  ]
}複製代碼

設置了proxies之後，咱們的服務端就不須要考慮跨域訪問的問題。固然，若是你的服務器端不容許跨域訪問，在你部署你的應用的時候，也須要相應的配置，例如在nginx中設置反向代理。

config.xml

若是你在建立項目的時候，沒有使用--no-cordova，也就是說，你的項目啓用了cordova，而且打算封裝成混合手機app，那就會有這個文件。這個文件的內容大體以下：

...
  <name>TodoList系統</name>
  <description>hunt tickets on-site management system.</description>
  <author email="mavlarn@test.com" href="http://test.com/">mavlarn@獵票</author>
  <content src="index.html"/>
  <access origin="*"/>
  <allow-navigation href="http://ionic.local/*"/>
  <allow-intent href="http://*/*"/>
  <platform name="ios">
    <allow-intent href="itms:*"/>
    <allow-intent href="itms-apps:*"/>
  </platform>
  <preference name="webviewbounce" value="false"/>
  ......
  <preference name="SplashShowOnlyFirstTime" value="false"/>
  <plugin name="ionic-plugin-keyboard" spec="~2.2.1"/>
  <plugin name="cordova-plugin-splashscreen" spec="~4.0.1"/>
</widget>複製代碼

其中，name就是你的app未來打包成app的時候的應用的顯示名。plugin是使用的cordovas插件。裏面還有一些其餘配置，請參考cordova的文檔。

tslint.json、tsconfig.json

這是用tslint作代碼檢查的配置。

resources

裏面有2個文件，icon.png和splash.png，分別的打包的應用的顯示名稱和加載頁的圖片。你只要加了這兩個文件，運行ionic resources就能夠生成各個尺寸的圖標文件和圖片。它會根據你設置的平臺，生成各個平臺的圖標和文件的各個尺寸的文件。

plugins

這裏面存在的你添加的cordova插件。

platforms

裏面存放平臺相關的文件，每次編譯app的時候，就會根據添加的平臺，在這裏面生成編譯文件和打包的文件。

hooks

這裏面存放的是hook文件，也就是鉤子。咱們能夠編寫腳本，來定義在每次執行某些任務的時候被調用的任務。也能夠定義某個插件相關的腳本。例如，若是你加了某一個微信的插件，這個插件可能有一個鉤子，幫助你在每次添加完這個插件的時候，運行一些任務，來進行一些項目的配置，例如微信的appId等。

若是你只是想開發一個web應用，上面這些基本都不會管，有些文件甚至都不會生成。而咱們開發具體的業務須要的，就是src下面的文件。

業務相關文件說明

index.html

src下面有幾個文件，index.html固然就是打開的首頁了。這個首頁裏面的內容(main.js, polyfills.js等)會在編譯後生成。

menifest.json

這個文件是在index.html使用，用來設置網頁的不少屬性，包括網站的圖標(favicon.ico)，搜索引擎的參數，應用名等。能夠參考：developer.mozilla.org/en-US/Add-o…

theme/variables.scss

ionic有設計良好的手機端的組件，也提供了幾個默認顏色，咱們能夠經過修改這個文件，修改幾個默認顏色，也能夠設置不少組件的顏色等屬性。

assets

這裏面就是存放應用中用到的各類圖片等資源文件。

app

這裏面有幾個文件：

main.ts
app.module.ts
app.component.ts
app.html
app.scss複製代碼

這幾個文件，從名字就能看出來，跟Angular2項目中的幾個入口文件相似。其中main.ts就是入口文件，它用下面的方式初始化咱們的app模塊：

platformBrowserDynamic().bootstrapModule(AppModule);複製代碼

app.module.ts裏面就是定義的app模塊，app.component.ts定義的就是應用的根組件，這裏跟Angular2不同的地方是，須要用ionic的方式來加載根組件：

declarations: [ MyApp, HomePage ],
  imports: [
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
  ],複製代碼

在引入根組件的時候，須要用IonicModule.forRoot(MyApp)來引入，在bootstrap裏面就不是直接初始化MyApp，而是IonicApp。同時，對於Ionic2裏面的全部的組件（簡單來講就是須要顯示在頁面上的組件），須要加入到entryComponents的列表裏。

除了上面說的覺得，其餘的配置，像declarations，providers，配置方式跟運行機制跟Angular2是同樣的。

ionicons

Ionic還提供了一套設計很是好的圖標庫，ionicons。地址是 ionicframework.com/docs/ionico… 。Ionic的不少組件也都用到了一些圖標，例如後退、關閉等圖標。這些圖標是在ionic的css裏面以字體的方式加載的，因此，你應該在項目中儘可能使用這些圖標。

@ionic/app-scripts

最後須要說明的就是ionic-app-scripts，它在package.json文件中做爲devDependencies加入，裏面有不少幫助咱們編譯、運行項目的腳本。除了建立是項目裏面自帶的build, clean，還有不少其餘的腳本能夠容許。例以下面的內容：

"scripts": {
    "clean": "ionic-app-scripts clean",
    "build": "ionic-app-scripts build",
    "min": "ionic-app-scripts minify",
    "ionic:build": "ionic-app-scripts build",
    "ionic:serve": "ionic-app-scripts serve"
  },複製代碼

當咱們運行ionic serve時，實際上就是運行的是npm run ionic:serve，也就是對應的ionic-app-scripts serve 這個命令。
當我運行npm run min時，運行的是ionic-app-scripts minify。
通常狀況下，你運行build就會執行項目的編譯（將TypeScript文件編譯成js），而後把全部的js文件打包成main.js，以及把全部的css合併成一個main.css。可是，這樣生成的文件比較大，也沒有作代碼混淆，你能夠在運行build之後，再運行min,來進行代碼的壓縮、混淆等。運行完minify之後，main.js文件能夠從原先的6.5M左右，減小到不到1.6M。在進行gzip壓縮的話，基本上下載全部的文件是550K左右。已經基本能夠知足手機端下載文件大小的須要。

完整的文檔能夠查看GitHub的地址

熟悉Angular2的架構的可能知道Angular2的編譯可使用Tree Shaking技術進一步減小文件的大小，ionic-app-scripts也提供了rollup的參數來實現Tree Shaking，具體方法請參考官方文檔。

有關項目的結構和配置，差很少就是這些，雖說，即便你不知道這些是幹嗎的，也能直接開始着手開發應用。可是，那就像閉着眼睛跑步，隨便一個小坑就能讓你跌倒。況且，不少人所謂的坑，實際上也只是他本身不會用或者用得不對。因此，開始Angular和Ionic的應用，仍是須要對node, npm, webpack等有必定的瞭解，而後對項目中的各類配置有一些瞭解，才能在以後的開發中比較順利的進行。