Build Your First Mobile App With Ionic 2 & Angular 2 - Part 3
2016-05-22 08:59
525 查看
http://gonehybrid.com/build-your-first-mobile-app-with-ionic-2-angular-2-part-3/
20 January 2016 on
Ionic 2, Angular 2,
TypeScript |
3 Comments
The Ionic 2 and Angular 2 frameworks are both built with TypeScript and while you don't need to write your own code in TypeScript, it is recommended by both the Angular and Ionic teams. Let's find out more about TypeScript and which concepts you need to
understand before you can continue to build your first Ionic 2 app.
This tutorial is for Ionic 2, you can find the Ionic 1.x tutorial
here.
This tutorial is part of a multi-part series:
Part 1 - Introduction to Hybrid Mobile Apps
Part 2 - Set Up your Development Environment
Part 3 - Introduction to TypeScript & ES6 (this post)
Part 4 - Introduction to Angular 2
Part 5 - Build an Ionic 2 App
Part 6 - Navigating between Pages
Part 7 - Test on Emulators and Mobile Devices
new features.
Not all the ES6 features are currently supported in the browsers. So if you want to write your code in ES6, there are transpilers like
Babel, which compile your code to ES5 as part of your development process.
ES6 adds many new features to ES5, like
classes, arrow functions and module loaders and we'll have a look at some of these later.
We can build our Ionic 2 and Angular 2 apps using only ES5 or ES6, but as I mentioned before, the recommended language is TypeScript.
type.
A very simple example is when you declare a variable as a number and then try to put a
string value into it.
If your code editor supports TypeScript, you'll see that the second line will be marked as an error. When you run the TypeScript compiler it will also output that error.
Using types is optional, you can still write the following code as TypeScript code, and the compiler will happily accept that.
Let's have a look at some other TypeScript features we'll be using in our Ionic app.
Let's have a look at what the Typescript compiler will output to ES5 code:
Let's look at an example in ES5 code:
With the arrow function syntax, this becomes:
I've only covered a very small part of the features in TypeScript, so I encourage you to check out the resources below and get more familiar with it. In
Part 4 we'll have a look at what Angular 2 has to offer and we'll also have a look at decorators and modules.
TypeScript Playground
TypeScript Language Specificiation
Follow me on Twitter @ashteya and
If you found this article useful, could you hit the share buttons so that others can benefit from it, too? Thanks!
20 January 2016 on
Ionic 2, Angular 2,
TypeScript |
3 Comments
The Ionic 2 and Angular 2 frameworks are both built with TypeScript and while you don't need to write your own code in TypeScript, it is recommended by both the Angular and Ionic teams. Let's find out more about TypeScript and which concepts you need to
understand before you can continue to build your first Ionic 2 app.
This tutorial is for Ionic 2, you can find the Ionic 1.x tutorial
here.
This tutorial is part of a multi-part series:
Part 1 - Introduction to Hybrid Mobile Apps
Part 2 - Set Up your Development Environment
Part 3 - Introduction to TypeScript & ES6 (this post)
Part 4 - Introduction to Angular 2
Part 5 - Build an Ionic 2 App
Part 6 - Navigating between Pages
Part 7 - Test on Emulators and Mobile Devices
What is ES5/ES6?
As you may know, the version of JavaScript that is currently supported in all browsers is ES5 (ECMAScript 5). The latest version is ES6 (officially ES2015) which is a superset of ES5. This means that you can still write ES5 code in ES6 since it only addsnew features.
Not all the ES6 features are currently supported in the browsers. So if you want to write your code in ES6, there are transpilers like
Babel, which compile your code to ES5 as part of your development process.
ES6 adds many new features to ES5, like
classes, arrow functions and module loaders and we'll have a look at some of these later.
We can build our Ionic 2 and Angular 2 apps using only ES5 or ES6, but as I mentioned before, the recommended language is TypeScript.
What is TypeScript?
TypeScript is a superset of ES6, so it includes all of the new features of ES6 and adds the ability to declare variables as a specifictype.
A very simple example is when you declare a variable as a number and then try to put a
string value into it.
var index: number; index = "this is a string, not a number";
If your code editor supports TypeScript, you'll see that the second line will be marked as an error. When you run the TypeScript compiler it will also output that error.
Using types is optional, you can still write the following code as TypeScript code, and the compiler will happily accept that.
var index; index = "this is a string, not a number";
Let's have a look at some other TypeScript features we'll be using in our Ionic app.
Classes
A class has a constructor, properties and methods. Here is an example of what that looks like in TypeScript.class User { name: string; constructor(name: string) { this.name = name } sayHello() { console.log('Hello, I am', this.name); } } var user = new User('Ashteya'); user.sayHello();
Let's have a look at what the Typescript compiler will output to ES5 code:
var User = (function () { function User(name) { this.name = name; } User.prototype.sayHello = function () { console.log('Hello, I am', this.name); }; return User; })(); var user = new User('Ashteya'); user.sayHello();
Arrow Functions
Arrow functions are a new and shorter syntax for writing anonymous functions. It's important to know thatthisin an arrow function references the parent, it doesn't define a new
thiscontext.
Let's look at an example in ES5 code:
function updateTime() { var _this = this; var time = new Date(); setInterval(function () { return _this.time = new Date(); }, 1000); }
With the arrow function syntax, this becomes:
function updateTime() { var time = new Date(); setInterval(() => this.time = new Date(), 1000); }
I've only covered a very small part of the features in TypeScript, so I encourage you to check out the resources below and get more familiar with it. In
Part 4 we'll have a look at what Angular 2 has to offer and we'll also have a look at decorators and modules.
Resources
TypeScript HandbookTypeScript Playground
TypeScript Language Specificiation
Follow me on Twitter @ashteya and
sign up for my weekly emails to get new tutorials.
If you found this article useful, could you hit the share buttons so that others can benefit from it, too? Thanks!
相关文章推荐
- 设计模式 观察者模式 以微信公众服务为例
- Build Your First Mobile App With Ionic 2 & Angular 2 - Part 2
- Build Your First Mobile App With Ionic 2 & Angular 2 - Part 1
- Android 自定义View——蒙版擦除效果实现
- Android 图文弹幕 不叠加 不丢失
- Android 自定义View——Path的使用
- android分包
- Dapper、Entity Framework 和混合应用
- swift 之 namespace
- Core Image坐标系的ScaleCTM(1,-1)和TranslateCTM(0, y)-记录便于理解
- 使用visual studio开发android程序
- 浅谈多线程中GCD(有图有真相) iOS中如何实现多线程同步
- 将项目改为MRC的方法(有图有真相)
- 微信开发获取code
- 使用PHP开发一个简单的后台接口(响应移动端的get请求和post请求)
- iOS开发拓展篇—音效的播放
- [Android]WebView使用详解(一)——Native与JS相互调用(附JadX反编译)20160522
- iOS包大小分析和减包大小
- Android 笔记—2
- $Android设置TextView的字体