TypeScript+Angular2+Ionic2

1.TypeScript學習

TypeScript是微軟推出的編程語言，始於javascript，歸於javascript。說白了你用TypeScript寫的程序最終還是要編譯成javascript。畢竟是要在瀏覽器運行的，目前市面上瀏覽器都基於ES5是不支持TypeScript運行的。按照慣例，先學個五成。

 

//動物父類
class Animal {
    name:string;
    constructor(theName: string) { this.name = theName; }
    move(distanceInMeters: number = 0) {
        console.log(`${this.name} moved ${distanceInMeters}m.`);
    }
}
//蛇繼承動物
class Snake extends Animal {
    constructor(name: string) { super(name); }
    move(distanceInMeters = 5) {
        console.log("Slithering...");
        super.move(distanceInMeters);
    }
}
//小馬也繼承動物
class Horse extends Animal {
    constructor(name: string) { super(name); }
    move(distanceInMeters = 45) {
        console.log("Galloping...");
        super.move(distanceInMeters);
    }
}

let sam = new Snake("Sammy the Python");
let tom: Animal = new Horse("Tommy the Palomino");

sam.move();
tom.move(34);

TypeScript完全學習文檔

2.Angular2學習

以前學過AngularJS，學習曲線確實陡峭。第二代官方去掉JS叫Angular2。不光名字簡單了，上手也容易多了。前提是掌握TypeScript，否則就跟我一開始直接看Angular一樣，她認識你，你不認識她。英語好的直接看官方文檔開始學，英語不好的按着下面的翻譯文檔過一遍，這個文檔做的特別好。首先讓你掌握下基礎的語法、要點，然後從新建項目引導你到最後做一個Demo。一整套下來也就一兩天的時間，Angular的基本知識也就掌握了。如果你沒有Angular基礎，先不要直接從Demo部分開始看哦，免得被打擊。

Angular完全學習文檔

 

3.Ionic2學習

Ionic基於最新的Angular2，用TypeScript語言進行app開發，並用Cordova打包成App，只需一次編寫，就可以分別部署到IOS，Android，WP等系統。
Ionic2也提供了很多的漂亮的組件供開發者快速開發。這一塊不要太簡單，就是封裝了良好樣式的HTML元素。比如下面的組件就是Ionic2提供的按鈕組件，展示了一個紅色的按鈕，color="danger"？danger不就是BootStrap的顏色樣式嗎？

<button ion-button color="danger">Danger</button>

 

Paste_Image.png

 

同樣詳細的文檔將幫助你開始你的Ionic2之旅

Ionic2完全學習文檔

有了前面TypeScript和Angular2打的基礎，現在開始Ionic2如有神助的感覺，倍兒爽。

有了一定的學習基礎以後，聰明的你肯定躍躍欲試了吧。不要急，你的渴望程度還不夠。從GitHub把項目clone下來，本地運行起來，看看效果，再撩撥下你。

服務器：DayBook

Ionic2 APP：DayBookApp

項目clone下來後我們一一部署。

1.部署服務端

系統默認啓動端口是9971，修改端口可以在src/main/resources/application.properties文件中修改
server.port=端口

• 系統打包

在項目根目錄下直接運行下面的命令
mvn clean package assembly:single -Pprod -Dmaven.test.skip=true
打包成功後在根目錄下target/DayBook即爲打包的結果。
. ├── conf ├── DayBook-0.0.1-SNAPSHOT.jar ├── lib ├── DB.db （SQLite數據庫文件，需要從項目根目錄自行拷貝）

• 系統啓動

上一步打包後，從命令行進入target/DayBook根目錄；執行 java -jar DayBook-0.0.1-SNAPSHOT.jar即可看到啓動過程。
如果需要集成JRE，在window環境下，拷貝jre到target/DayBook根目錄，新建start.bat文件，內容爲
start jre/bin/javaw -jar DayBook-0.0.1-SNAPSHOT.jar
雙擊start.bat即可啓動

2.運行Ionic2 App

修改App中服務起訪問地址,src/providers/http-service.ts文件修改API服務器訪問地址
hostUrl:string = "http://192.168.1.1:9971";

修改成功後，運行命令
ionic serve
瀏覽器打開http://localhost:8100即可打開瀏覽器看到效果。
http://localhost:8100/ionic-lab可以看到android、IOS、WP的效果

上面這種方式對於native api是不友好的。比如彈出本地Dialog，是無法正常彈出的，控制檯提示...but Cordova is not available. Make sure to include cordova.js or run in a device/simulator。

• 解決方法：
  $ ionic platform add browser
$ ionic run browser

• 構建Android App

ionic platform add android ionic build android
運行以上兩條命令，提示成功後，在DayBookApp/platforms/android/build/outputs/apk目錄下會生成android apk應用。然後可以安裝到手機~

• 簽名APP生成release版本

app簽名的意義其實就是給app一個身份證。這樣你的app發佈到市場，就擁有了唯一的ID。
如何獲得簽名請點擊查看 如何生成android app簽名文件，下面是給app簽名的步驟，
在ionic2項目platform/android目錄下新建文件 release-signing.properties，內容爲

storeFile=your keystore path

keyAlias=your key aliasstore

Password=your store passwordkey

Password=your key password

然後構建app命令換成 ionic build android --release --prod，最後生成的release app安裝前需要卸載手機中原來的debug版本。這樣一個可發佈到市場的基本APP就生成了，在商業應用中還需要對app進行加固等處理，我打算專門寫一篇這方面的博客。

--prod參數的作用：解決ionic2生成app後啓動的白屏問題。具體原理請查看 解決ionic2 生成app啓動白屏的問題

問題彙總

瀏覽器啓動app訪問時會存在跨域不可訪問的問題。這是瀏覽器的機制決定的。安裝到手機不會有這種問題。爲了便於我們調試，建議用谷歌瀏覽器，然後安裝跨域插件

 

  

TypeScript+Angular2+ionic2

  

 

 

作者：藍山牧童
鏈接：https://www.jianshu.com/p/a8c14409a113
來源：簡書
著作權歸作者所有。商業轉載請聯繫作者獲得授權，非商業轉載請註明出處。