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
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。