Angular2是一個全新的框架,它從ReactJS以及其餘web移動框架借鑑了很多經驗和優勢,巨大的改進使得開 發體驗和性能已經超越了Angular1,並且Ionic2不管是從UI交互效果和跨平臺的差別性都優於Ionic1javascript
1. 安裝使用php
ionic2的安裝運行基本和前版本的ionic基本一致,很是簡單。css
npm install -g ionic # 安裝ionic工具集html
ionic start projectName --v2 # --v2表示使用ionic2 + angular2的組合方式建立項目,不然使用ionic + angular建立項目,此時ionic會下載所須要的相關包前端
cd projectName # 進入建立的項目名稱目錄 java
ionic serve # 啓用瀏覽器調試應用頁面,這時經過瀏覽器打開默認端口頁面http://localhost:8100/#/tab/dash就能夠打開應用頁面了git
2. 和ionic的區別web
ionic2是創建在angular 2上的,angular 2推薦使用typescript進行項目的開發,因此到了ionic2,就能夠這樣來開發咱們的項目了。通常狀況下,咱們建立應用完成後,www/目錄爲咱們頁面的源代碼。其目錄結構以下:typescript
+ www/
+ css/
+ img/
+ js/
+ lib/
+ templates/
+ index.html
+ manifest.json
+ service-worker.js
咱們以www/js/app.js爲例。npm
// 入口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
4.模板的語法結構
ionic2的模板語法與Ionic1很是類似,可是看起來又有點古怪,其實Ionic2的模板語法更爲簡潔。咱們來看一下對比。
ionic1:
<img ng-src="{{photo.image}}" />
<img [src]="photo.image" />
咱們看一下 事件調用:
<button ng-click="doSomething()">
<button (click)="doSomething()">
5.它僅僅是javascript而已
ionic1和angular1都有一些特定的語法,可是追其根本只不過是javascript
可是從使用上,EM6/ TS可以讓你避免不少問題,好比說:
jsvascript:
this.someData = null; var me = this; doSomething(function(data){ me.someData = data; });
看到了麼?你問了使用this指針,不得不在函數外面做爲變量me的引用,可是你使用了EM6:
this.someData = null; doSomething((data) => { this.someData = data; })
六、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/