Angular2、Ionic、TypeScript、es6的关系？

自从接触angular2以来，组长就提到了3个对于我来说是新东西的东西：

• angular2
• typescript
• es6
• ionic

其实对于这3个东西来说，我根本搞不清楚他们之间的关系，突然之间意识到，自己不能再这样搞不清楚关系的就学下去。这样就像angular1似的，自己还是什么都不会，angular1我会用，但是不会讲，你要问我angular1和ionic的关系，我现在也不能讲清楚，说明白。 那么没关系，从小白做起，不会的就问，据说大神们都是乐于分享的。

接下来就是小白贺贺彻底搞清楚这四者的关系，加油！(づ￣ 3￣)づ

es6

ECMAScript 6.0（以下简称ES6）是JavaScript语言的下一代标准，已经在2015年6月正式发布了。它的目标，是使得JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言。 --阮一峰

ECMAScript和JavaScript的关系

由于JavaScript的创造者Netscae公司的版权问题吧，ECMAScript不能叫Javascript。总之，ECMAScript和JavaScript的关系是，前者是后者的规格，后者是前者的一种实现（另外的ECMAScript方言还有Jscript和ActionScript）。

angular2

AngularJS是一款优秀的前端JS框架**。 AngularJS2是基于typescript来开发的。

在2014年底，Google宣布Angular 2将会对AngularJS进行完全地重写，他们甚至还创建了一门新的语言，名为“AtScript”，他们本来希望使用这门语言来编写Angular 2应用。

但是，随后Microsoft同意在它们的TypeScript语言（JavaScript的一个严格超集）上添加对装饰符（decorator）的支持，所以，它就成为了开发Angular 2框架本身所使用的语言，并且还是使用AngularJS框架开发应用的推荐语言。

另外，我们还可以使用JavaScript（ECMAScript 5和6均可）和Dart来编写Angular 2应用。

除此之外，Angular团队还集成了Microsoft的另外一个产品到Angular 2框架之中，这就是反应型JavaScript扩展（reactive JavaScript extension）的RxJS库。

Angular 2并不是一个MVC框架，而是基于组件（component）的框架。在Angular 2中，应用是松耦合组件所组成的树。

typescript

TypeScript是ES6的超集。至于需不需要使用，在于你所需要的场景。比如在Angular2中，用TypeScript明显好于ES6。 -- 某网友

TypeScript的开发者c#之父，所以这个TypeScript的很多语言特性是从c#中移过来的。TypeScript大概是ES7的实现，所以从语法角度来讲，是具有很大优势。TypeScript可选择编译成ES5或ES3，ts文件编译成js文件，并且ts文件可直接在浏览器中调试。TypeScript还有一大优势是配合宇宙最强编译器VS,开发效率非常高。唯一的不足只是用TypeScript开发的人太少。

ionic

ionic和angular的关系，相信大家一定和我一样好奇，这二者之间的关系是什么呢？自从工作以来，我就知道我们用的东西是angular和ionic，但是我还是不太清楚这二者之间的关系。那么今天就让我把这二者之间的关系搞清楚，不要让他再迷惑我。

其实二者没有什么关系，angular开发的应用可以使用ionic来定义UI，也可以使用其他的来定义UI。

Ionic 是一个强大的 HTML5 应用程序开发框架。号称Advanced HTML5 Hybrid Mobile App Framework 是AngularJS 移动端解决方案 可以帮助您使用 Web 技术，比如 HTML、CSS 和 Javascript 构建接近原生体验的移动应用程序。

Ionic 主要关注外观和体验，以及和你的应用程序的 UI 交互。

该框架基于流行的来自于Google的AngularJS框架实现，Ionic利用AngularJS提供应用结构，而Ionic本身则关注用户界面。这意味着所有的视图、应用路由和控制器都是由AngularJS处理的。Ionic为它自己的组件提供了一组指令，因此开发者能够使用Angular创建自定义HTML元素的能力定义Ionic UI组件。

Ionic是一个新的、可以使用HTML5构建混合移动应用的用户界面框架，它自称为是“native与HTML5的结合”。

Ionic宣称他们极度强调性能，并且通过限制DOM交互、完全移除jQuery以及使用像translate(z)这种特定的硬件加速的CSS滤镜触发移动设备上GPU——与由动力不足的移动浏览器提供的交互相比这种方式提供了硬件加速的交互——等方式使速度最大化。

Ionic仅支持iOS6及更高版本和Android 4.1及更高版本。推送设备的更新换代。

就好像我们公司的同事们还在绞尽脑汁的思考怎么支持ie6一样，我们不能总是这样，要推新技术，那么老设备的淘汰就不可避免，所以必须强烈推进这一点。

总结一下： ES6是Javascript语言的标准，typescript是ES6的超集，Angular2是基于typescript来开发的JS框架。Ionic是一个强大的UI开发框架。

错误更正

由于之前错误的把decorator解释为注解，那么下面就Angular2 中的Annotation和Decorator之间做一个简单的对比性学习。

Annotation

@Component({
  selector: 'tabs'
})
@View({
  template: `
    <ul>
      <li>Tab 1</li>
      <li>Tab 2</li>
    </ul>
  `
})
export class Tabs {
}

我们有一个空的Tabs类，这个类有两个Annotation，@Component和 @View,如果我们删除了所有的Annotation，剩下的只是一个没有任何特殊意义的空类?如此看来,@Component和@View为这个空的类添加一些元数据，以给它一个特定的含义。这就是Annotation,他们是以一个声明的方式将元数据添加到代码中。

@Component这个Annotation告诉Angular,这个类是一个组件，这个@View，给出这个组件关于视图相关信息，在这里，他是一个HTML模板。

Decorator

Decorator是由Yehuda Katz提出的 ECMAScript 7中建议的标准，让你可以在设计时对类和类的属性进行注解和修改，这听起来很像annotation做的事。好吧，让我们来看看什么是decorator?

// A simple decorator
@annotation
class MyClass { }

等等。这看起来酷似一个AtScript Annotation！ 对。但事实并非如此。从消费者的角度来看，一个Decorator确实看起来像我们所知道的“AtScript Annotation”。但有一个显著差异。你需要负责装饰你的代码。上面的代码，相应的@annotationDecorator实现看起来应该是这样的：

function annotation(target) {
 // Add a property on target
 target.annotated = true;
}

decorator只是一个函数，让你访问一个需要被装饰的目标。明白了吧？而不是由transpiler来决定你的注释应该怎么转换，我们是负责定义具体的decorator.

当前，我们也可以实现一个decorator同AtScript Annotations(也就是现在typescript)一样为我们的代码添加元数据(我一直提到“AtScript Annotation”,因为他们所做的事情,确实是一个AtScript具体的事情)，或者换句话说，<u>通过decorator我们可以创建Annotations.</u>

这里有更加详细的解释：参考