ionic2

1. 安裝使用

ionic2的安裝運行基本和前版本的ionic基本一致，很是簡單。

npm install -g ionic    # 安裝ionic工具集
ionic start projectName --v2    # --v2表示使用ionic2 + angular2的組合方式建立項目，不然使用ionic + angular建立項目，此時ionic會下載所須要的相關包
cd projectName  # 進入建立的項目名稱目錄
ionic serve # 啓用瀏覽器調試應用頁面，這時經過瀏覽器打開默認端口頁面http://localhost:8100/#/tab/dash就能夠打開應用頁面了

固然這裏須要保證你的開發環境SDK已經安裝成功了。

若是須要在移動設備上打包運行，則須要添加相對應的插件模塊。

npm install -g cordova  # 若是沒有真實設備，能夠經過這個命令來安裝模擬環境
ionic platform add ios # 添加ios運行支持
ionic emulate ios   # 模擬運行ios環境
ionic platform add android  # 添加Android運行環境支持
ionic run android   # 使用Android運行應用

正常狀況下，這裏ionic會將打包的文件安裝到設備或調試模擬器上運行打開應用。

2. 和ionic的區別

ionic2是創建在angular 2上的，angular 2推薦使用typescript進行項目的開發，因此到了ionic2，就能夠這樣來開發咱們的項目了。通常狀況下，咱們建立應用完成後，www/目錄爲咱們頁面的源代碼。其目錄結構以下：

+ www/
    + css/
    + img/
    + js/
    + lib/
    + templates/
    + index.html
    + manifest.json
    + service-worker.js

咱們以www/js/app.js爲例。

// 入口JavaScript文件，配置頁面路由與加載的視圖
// ionic版本寫法
.config(function($stateProvider, $urlRouterProvider) {
    $stateProvider.state('tab', {
        url: '/tab',
        abstract: true,
        templateUrl: 'templates/tabs.html'
    }).controller('MainCtrl', function($scope){
        $scope.data ={
            text: 'Hello World'
        }
    }
)

});

// ionic 2寫法
@Component({
    templateUrl:'main/main.html'
});
export class MainCmp {
    constructor(){
        this.data ={
            text: 'Hello World'
        }
    }
}

templates/tabs.html的內容以下。

<ion-content ng-controller="MainCtrl">
    <ion-item>
    
    </ion-item>
</ion-content>

ionic2裏面裏能夠這樣來適應原來的版本：

<ion-content ng-controller="MainCtrl as main">
    <ion-item>
    
    </ion-item>
</ion-content>

值得注意的是，這裏 <ion-content> 等爲ionic-angular提供的組件模塊，它相似於Webcomponent的方式，能被angular識別解析。通俗的理解就是一個相似bootstrap的UI組件庫。

三、組件

ionic2除了提供統一便捷式APP打包的解決方案，還提供了一個用於移動端的UI組件庫。其實相似的組件庫有不少，bootstrap、frozenui、wui等等，可是與其它框架提供UI組件不一樣的是，ionic2提供的組件規範是面向將來Webcomponent的方式實現的。

例如對於一個對話框組件，通常的UI框架可能這樣來實現，相信相似的框架你們多少用過。這裏以frozenui爲例，通常經過對元素添加不一樣的class名稱來控制組件的樣式和顯示，而像 ui-dialog 這些類名是UI庫統必定義好的。

<div class="ui-dialog">
    <div class="ui-dialog-cnt">
      <header class="ui-dialog-hd ui-border-b">
                  <h3>新手任務</h3>
                  <i class="ui-dialog-close" data-role="button"></i>
              </header>
        <div class="ui-dialog-bd">
            <h4>標題標題</h4>
            <div>這是標題的內容！</div>
        </div>
        <div class="ui-dialog-ft">
            <button type="button" data-role="button">取消</button>
            <button type="button" data-role="button">開通</button>
        </div>
    </div>        
</div>
<script class="demo-script">
$(".ui-dialog").dialog("show");
</script>

可是使用ionic2，你可能會這樣來使用，在這裏，咱們沒有去對模塊元素添加一些樣式的類，由於angular2將自定義組件標籤 ion-header 對應的CSS已經經過Webcomponent的形式引入了，那麼咱們只用管怎樣使用結構層結構就能夠了，可是這裏注意的是 primary block 等類名沒有添加到class中。

<ion-header>
    <ion-navbar>
        <ion-title>Confirm</ion-title>
    </ion-navbar>
</ion-header>

<ion-content padding>
    <button primary block (click)="doConfirm()">確認對話框</button>
</ion-content>

<script>
import { AlertController } from 'ionic-angular';
export class MyPage {
    constructor(public alertCtrl: AlertController) {}
    showConfirm() {
        let confirm = this.alertCtrl.create({
            title: '標題標題',
            message: '這是標題的內容',
            buttons: [{
                text: '取消',
                handler: () => {
                    console.log('取消');
                }
            }, {
                text: '肯定',
                handler: () => {
                    console.log('A肯定');
                }
            }]
        });
        confirm.present();
    }
}
</script>

其它的相關組件的方式相似，同時你也能夠去自定義遵循Webcomponent的element 組件。

更多API: http://ionicframework.com/docs/v2/components/#alert-prompt

四、native交互

固然，ionic2還提供了與Native客戶端的相互調用能力，前端相關的一套JavaScript調用庫被稱爲Ionic Native。若是在你的APP須要調用Native調用能力。現須要安裝引入對應的模塊，一邊在分析打包時引入。

npm install ionic-native --save

調用時就能夠這樣來使用。

import {Geolocation} from 'ionic-native';

Geolocation.getCurrentPosition().then(pos => {
    console.log('lat: ' + pos.coords.latitude + ', lon: ' + pos.coords.longitude);
});

let watch = Geolocation.watchPosition().subscribe(pos => {
    console.log('lat: ' + pos.coords.latitude + ', lon: ' + pos.coords.longitude);
});

// to stop watching
watch.unsubscribe();

使用ionic2也能夠使用ES6+的方式來實現。

// ES6 / TypeScript / Ionic 2 / Angular 2
import {Camera} from 'ionic-native';
this.platform().then(() => {
    Camera.getPicture().then(
        res => console.log("We have taken a picture!"),
        err => console.error("Error taking picture", err)
    );
});

具體更多API: http://ionicframework.com/docs/v2/native/

五、主題與圖標

若是你須要改變ionic2 UI組件庫的顯示風格，你也能夠自定義本身的APP樣式。方法也很簡單，ionic2 的UI組件庫樣式引用了通用的樣式變量，在 app/theme/app.variables.scss 裏面修改響應的顏色和字體值就能夠了。這點和其它UI框架是同樣的。固然你也能夠修改保存多個主題風格的變量文件，以供選擇使用。

$colors: (
    primary:    #387ef5;
    secondary:  #32db64;
    danger:     #f53d3d;
    light:      #f4f4f4;
    dark:       #222;
);

對於圖標的話就沒什麼講的了，和fontawsome同樣，ionic2給了UI框架自帶的可選圖標，你們能夠根據下面的文檔說明選擇使用。

圖標參考: http://ionicframework.com/docs/v2/ionicons/

六、總結

總結來看，ionic2不只爲咱們提供了打包前端頁面應用的解決方案，還爲咱們提供了一整套的UI組件庫，並且組件均使用Web Component規範來實現，開發體驗有了較好的改善。

更多API: http://ionicframework.com/docs/v2/