Ionic 2 專注于以標準的 HTML 、 CSS 和 JavaScript 來構建移動站點，并可以通過 Cordova 打包成移動 App，只需編寫一次代碼，就可以分別部署到 iOS 、Android 等多種移動平臺上。這項技術已經幫助很多開發者創建了很多漂亮的 App。
<h4>ionic主要包括三個部分：</h4>
CSS框架 - 提供原生App質感的CSS樣式模擬。ionic這部分的實現使用了ionicons圖標樣式庫。
JavaScript框架 - ionic基于AngularJS基礎框架開發，遵循AngularJS的框架約束；主要提供了適應移動端UI的 AngularJS的擴展，主要包括指令和服務。此外，ionic使用AngularUI Router來實現前端路由。
命令行/CLI - 命令行工具集用來簡化應用的開發、構造和仿真運行。ionic命令行工具使用了 Cordova，依賴于平臺SDK（Android & iOS）實現將移動web項目打包成原生app。
<h4>1、安裝ionic</h4> 首先需要安裝 Node.js，接下來的安裝中需要使用到其 NPM 工具，這里下載東西會被墻，下載變得很慢很慢啊,我們最好吧npm的鏡像，改為淘寶的鏡像，
npm config set registry https://registry.npm.taobao.org/
查看是否修改成功
npm config get registry
然后通過命令行工具安裝最新版本的ionic。
運行的命令行
sudo npm install -g cordova ionic
<h4>2、下載項目模版</h4>cd 到開發目錄
執行：
ionic start MyIonic2Project tutorial
其中MyIonic2Project為我們的項目名稱，這個命令將下載項目模板，安裝 npm modules，設置 Cordova 的相關信息。tutorial
參數的意思是下載 tutorial 模板來初始化項目，如果不指定這個參數的話，比如：
ionic start MyIonic2Project
默認會使用 tabs 模板。當然你也可以加一個blank參數，這樣就是一個空項目。
<h4></h4>
<h4>3、在調試運行</h4>
Ionic提供了一個serve命令為我們的應用創建web站點可以非常方便的調試應用， cd到開發目錄下，執行命令：
ionic serve
如果要在手機上調試，執行命令：
ionic cordova run ios
這時會在MyIonic2Project文件夾下生成一個platforms文件夾，platforms文件夾下的iOS文件夾，打開此文件夾用Xcode運行.xcworkspace即可在手機上調試了。
<h4></h4>
<h4>4.項目結構</h4>
<h6> 4-1 ./src/index.html</h6>
./src/index.html 是App的主要入口，設置腳本和CSS，運行整個App。我們不會花費太多時間在這個文件上，你可以看到HTML代碼里有一個 <ion-app> 標簽，像下面這樣：
<ion-app></ion-app>
在底部還有以下的腳本：
<script src="cordova.js"></script>
<script src="build/main.js"></script>
build/main.js是自動生成的，實際上是把TypeScript轉成了普通的JavaScript。
<h6>4-2 ./src/</h6>在src目錄里我們會找到原始的沒有經過編譯的代碼，這也是我們的主要工作目錄。當我們運行ionic serve
命令的時候，在src/目錄下的文件會被轉譯成正確的瀏覽器能夠解釋的JavaScript版本（當前是ES5）。這意味著我們可以使用高級的TypeScript，但是會編譯回瀏覽器需要的老版本的JavaScript。
src/app/app.module.ts
是App的入口。
在文件底部我們會看到以下的代碼：
<pre>@NgModule({
declarations: [MyApp,HelloIonicPage, ItemDetailsPage, ListPage],
imports: [IonicModule.forRoot(MyApp)],
bootstrap: [IonicApp],
entryComponents: [MyApp,HelloIonicPage,ItemDetailsPage,ListPage],
providers: []
})
export class AppModule {}
</pre>
每個App都有一個root module來控制應用中其他的部分。如果你用過Ionic1和Angular1的話，有點類似ng-app。這也是我們使用ionicBootstrap來啟動應用的地方。
<h6>4-3 ./src/app/app.html</h6>src/app/app.html是主要的模板文件：
<pre>
<ion-menu [content]="content">
<ion-header>
<ion-toolbar>
<ion-title>Pages</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<button ion-item *ngFor="let p of pages" (click)="openPage(p)">
{{p.title}}
</button>
</ion-list>
</ion-content>
</ion-menu>
<ion-nav id="nav" [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>
</pre>
在這個模板中，我們使用了ion-menu來作為菜單，使用ion-nav組件當做主要的內容區域。ion-menu的[content]屬性被綁定到ion-nav的本地變量content上，所以它能夠知道要顯示什么。<h4></h4>
<h4>5、添加頁面</h4>
Ionic2中創建一個頁面很方便，在頁面之間相互切換也很方便，我們在命令行實現如下需求：
進入項目目錄：<pre>cd MyIonic2Project </pre>
創建一個新頁面：<pre> ionic g page NewPage </pre> NewPage為新頁面的名稱；
在app.module.ts配置
<pre>import{ NewPage } from'../pages/new-page/new-page'</pre>
<pre>declarations: [
MyApp,
AboutPage,
ContactPage,
HomePage,
NewPage,
TabsPage
]，
entryComponents：[
MyApp,
AboutPage,
ContactPage,
HomePage,
NewPage,
TabsPage
]</pre>
在home.ts文件中item1，name是傳的值
<pre>import { NewPage } from '../new-page/new-page';</pre>
<pre>constructor(public navCtrl: NavController) {
}
testNewPage(){
console.log('點我了');
this.navCtrl.push(NewPage,{
item1: "ios-newPage"，
name: "我是張大爺"
});
}</pre>
在home.html頁面添加button
<pre><button style="background-color: #2ec95c; margin-left: 100px" (click)="openModal()">點擊我跳轉到下一頁</button></pre>
在new-page.ts中取值，并且可以添加一個返回上一個頁面的方法backToPage
<pre>import { NavController,NavParams } from 'ionic-angular';</pre>
<pre>export class NewPagePage {
data:any;
constructor(public navCtrl: NavController,public navParams: NavParams) {
console.log(this.navParams.data)//打印的是傳過來的所有數據
this.data = navParams.get('item1')
console.log(this.data);
}
ionViewDidLoad(navParams: NavParams) {
console.log('Hello NewPagePage Page');
console.log(this.data);
}
backToPage() {
this.navCtrl.pop();
}
}</pre>
在new-page.html中獲取參數，添加返回按鈕
<pre><ion-content padding>
<div>我的myitem＝{{this.data}} </div>
<button style="background-color: #2ec95c; margin-left: 100px" (click)="backTopage()">返回按鈕</button>
</ion-content></pre>
<h4>6、在自己創建的iOS原生項目中嵌入Ionic</h4>
參考 cordova官方文檔
還有中文的參考資料哦，這里面的CordovaLib文件和我的不一樣，
6-1、首先要先安裝cordova，終端輸入如下命令<pre>sudo npm install –g cordova</pre>
6-2、用Xcode新建一個命名為IonicDemo的項目。Finder中文件
6-3、（1）將"MyIonic2ProjectDemo1/config.xml"文件，復制到 IonicDemo項目的文件夾下；
（2）將"MyIonic2ProjectDemo1/platforms/ios"文件夾下面的cordova、platform_www、www。復制到 IonicDemo項目的文件夾下；
（3）將"MyIonic2ProjectDemo1/node_modules/cordova-ios/CordovaLib"文件夾, 復制到 IonicDemo項目的文件夾下；[這里不用“MyIonic2ProjectDemo1/platforms/ios/CordovaLib”是因為我發現導入這個文件夾以后，在IonicDemo項目在Xcode中CordovaLib.xcodeproj下面的Cordova文件夾中找不到Cordova.h和Info.plist, 這里我也沒搞清楚，所以就不用這個]
（4）最后IonicDemo文件夾下面有這些文件
6-4、(1) 用xcode打開我們創建的IonicDemo項目，"Add Files to "IonicDemo",添加"IonicDemo/config.xml"文件,選擇create groups；
(2) 然后繼續"Add Files to "IonicDemo"，,添加"IonicDemo/CordovaLib/CordovaLib.xcodeproj"文件,選擇create groups；
(3) 繼續"Add Files to "IonicDemo"，,添加"IonicDemo/www"文件夾,選擇create folder references；記住上面三個文件添加的時候都不要勾選，copy items if needed，因為我們都已經添加到IonicDemo文件夾下面了，最后項目的結構是這樣的
6-5、.選擇工程的Build Settings->Other Links, 設置-Objc -all_load
6-6、選擇Build Phases->New Run Script Phase，將新增New Run Script Phase命名為copy www directory，輸入框中是：cordova/lib/copy-www-build-step.js
6-7、Build Phases->Target Dependencies添加CordovaLib
6-8、.Link Binary With Librarys添加libCordova.a, MobileCoreServices,AssetsLibrary
6-9、在IonicDemo中新建一個TestViewController.h，繼承與CDVViewController，
這里通常會報錯找不到文件'Cordova/CDVViewController.h' file not found 這里解決方法有三種
第一種
a、In Xcode, go to Preferences... > Locations, then click on the Advanced... button.
b、Make sure the build location radio button is set to "Unique".
c、Close out the Preferences and Rebuild.
第二種
a、In build settings add this item to "Header Search Path"
b、"$(OBJROOT)/UninstalledProducts/$(PLATFORM_NAME)/include"
第三種
終端里項目路徑下：
a、先 cordova platform rm ios 再 cordova platform add ios ，還是報錯！
b、最后 執行了下 cordova platform update ios，
6-10、然后現在就是創建一個Button跳轉到TestViewController里面，就是我用Ionic寫的頁面了，，哈哈哈！！！我就問6不6 ，，，張大爺666的飛起啊！！！，，還有以后要更新ionic中的頁面只需把更改后的頁面ionic cordova run ios，然后把新生成的"MyIonic2ProjectDemo1/platforms/ios/www"文件夾copy到自己原生項目中替換www文件就好了
<h4>7、調用相機，回顯圖片</h4>
7-1、添加插件cordovaCamera.
<pre>$ cd MyIonic2Project
$ ionic cordova plugin add cordova-plugin-camera
$ npm install --save @ionic-native/camera</pre>
7-2、添加這個plugin到"src/app/app.module.ts"
<pre>...
import { Camera } from '@ionic-native/camera';
...
@NgModule({
...
providers: [
...
Camera
...
]
...
})
export class AppModule { }</pre>
7-4、在"src/pages/home/home.html"中添加相應的方法
<pre><button (click)="opencamer()">打開相機</button>
拍到的照片:
<img [src]="base64Image" *ngIf="base64Image"></pre>
其他調用Calendar，3DTouch，等設備功能都是這個流程方法
<h4>8、遇到問題</h4>
1、添加本地圖片讀取不出來
我在"src/assets/icon/icon_image.png"添加圖片,在"src/pages/second/second.html"中讀取圖片，
錯誤原因：src相當于工程的源文件，而模擬器跑出來是在www中的打包文件，而我沒有安裝打包工具，所以src中的源文件不會自動生成到www中，所以解決方法，，，只需添加圖片到"www/assets/icon/icon_image.png"，這樣手動打包進去就可以讀取到文件。 當然如果安裝了打包工具就不用這樣手動添加了，它自己會生成
2、安裝打包工具Webpack
采用npm的方式來安裝Webpack：
npm install webpack -g
因為要用到angular，所以要安裝angular：
npm install angular
還要安裝一系列加載器(loader)：
npm install style-loader css-loader url-loader sass-loader raw-loader
注意：除了webpack是全局安裝之外，其他組件都是安裝在app文件夾下面，會自動生成node_modules文件夾。
