Angular 2.0 浅入浅出

by admin on 2020年4月28日

一直以来,Angular
2依然采用TypeScript作为主流开发语言,然后自动编译成JavaScript 和
Dart。Dart开发者一直在进行Angular
2拆分,将其分为TypeScript/JavaScript版本和Dart版本,并成立了AngularDart团队。

今年的3月5号,ng-conf 2015大会上,Angular官方团队对外发布了Angular
2的alpha版本,同时公布了新的网站地址:https://angular.io

图片 1

昨天,AngularDart团队宣布彻底拆分Angular
2,全面采用Dart开发AngularDart。这将带来以下改变:

对于使用Angular的开发者来说是一件喜讯,由于我们的产品Worktile目前也正是使用的Angular.js
1.2.x版本,所以我们更关心Angular的一切,为什么2.0不叫Angular.js而改名叫Angular是由于2.0中包含2个版本,分别为:Angular
for JavaScript 和 Angular for
Dart,alpha版本的下载地址为:https://angular.io/download

谷歌 Dart 曾经踌踌满志地想要取代 JavaScript 成为 Web
开发的首选语言。然而在一年半前,谷歌放弃了这个想法。因为 Dart
不仅仅在语言本身,包括它的整个生态圈,都比 JavaScript 落后了一大截。所以
Dart 最终还是沦落到了跟 TypeScript 和 CoffeeScript
一样的命运——成为另一个可以被编译成 JavaScript 的语言。

  • AngularDart框架更符合Dart语言习惯。

  • 完全符合Dart开发者,告别TypeScript。

  • AngularDart性能将会大幅度提升。

所以在公司内部就有了这次分享,主要是让大家初步了解下Angular
2到底改变了什么,这个彻底革命的MV*框架到底革命了什么,以及未来的新标准是什么样子的?

然而,在沉寂了一段时间之后,在 10 月底举行的慕尼黑 Dart
开发者大会上,Dart 带着赞新的面貌重返我们的视野。

这篇博客主要是把内部分享的内容整理一下,献给关心Worktile技术的使用者们。

事实上,尽管 Dart 无法像当初声称的那样可以取代
JavaScript,但在谷歌内部,它确实是一门很成功的 Web 开发语言。谷歌的
AdWords、AdSense 和 Fiber 项目团队开始把 Dart
融入他们的前端应用开发。一项内部报告表明,Dart 可以帮助他们提升 25% 到
100% 的前端开发效率。谷歌内部的 Dart 代码量比去年增长了 3.5 倍。

Angular 2.0 浅入浅出

为什么起这个标题呢?

由于Angular
2.0目前只是alpha版本,而且相关的API都没有提供,官方只提供了一些简单的示例,所以暂时没有必要深入研究太多,因为很多东西也还没有最终定稿,但可以初步了解下他的一些新特性。

图片 2

图片 3

在谷歌之外,Wrike、Workiva、Blossom 等公司也在使用
Dart。所以不管在内部还是外部,Dart 都有它的市场。

Angular 2.0是什么?

图片 4

Dart 团队不再把精力放在如何构建 Dart 运行时上,而是集中精力做好 Dart 到
JavaScript 的编译器以及相关的工具。因为同时在 Chrome 浏览器里运行
JavaScript 运行时和 Dart
运行时会带来很多问题,比如两种语言之间无法进行交互。

Angular 2.0的动机

为了解决Angular.js 1.x版本中的种种问题,所以才有了彻底的变更。

图片 5

Dart 语言本身也是带来了一些新的特性。比如强类型支持、泛型方法。Dart 到
JavaScript 的编译器也得到改进,在编译速度上有了大幅度的提升。

JavaScript的诞生、发布和标准化

因为Angular 2.0 采用的是AtScript 编写的,AtScript基本上兼容
TypeScript和ECMAScript 5/ECMAScript 6,目前我们所说的Javascript语法都是
ES5.1版本,所以我觉得有必要说下Javascript的一些历史以及标准化的事情。

下图是Javascript发布版本的时间表和浏览器的支持情况,到目前为止,基本上所有主流浏览器都支持ES5。

关于更多详情参考:

http://zh.wikipedia.org/wiki/JavaScript

http://www.w3school.com.cn/js/pro_js_history.asp

图片 6

图片 7

ECMAScript 6的新特性

那么ES6 什么时候发布呢?到底有哪些新特性呢?

我觉得这个问题,所有做前端的人都应该要了解,因为这即将成为未来的标准,预计2015年6月份左右,ECMAScript
6会正式发布,很多主流的浏览器在正式发布之后肯定会逐渐的支持这些特性。

关于ES6到底有哪些新特性,大家可以看下https://github.com/lukehoban/es6features,基本上涵盖了大部分功能。

我觉得重要的几个特性是:Class、Module、一些语法糖、基础功能的增强等。

图片 8

下面这几个图主要展示下ES5>>ES6>>TypeScript>>AtScript的演变过程

图片 9

图片 10

图片 11

图片 12

在大会上,Dart 团队启动了 AngularDart 2.0 项目,使用 Dart 语言作为
Angular 的实现。同时还发布了基于 AngularDart 的 Material Design
的内部开发者预览版。

关于AtScript

AtScript是Angular团队为了打造Angular 2.0
专门开发的一门语言,官方团队的解释是:AtScript并不是一门新的语言,而是
TypeScript + 注解 + 类型检查,而TypeScript =
ES5+ES6+Types,所以说大家掌握了ES6,基本上也就理解了AtScript了。

关于AtScript的注解和类型检查可以参考:https://docs.google.com/document/d/11YUzC-1d0V1-Q3V0fQ7KSit97HnZoKVygDxpWzEYW0U/edit

注意:Angular 2.0是采用 AtScript写的,并不意味着我们使用Angular 2.0
开发应用也需要AtScript,我们可以使用ES5、ES6、TypeScript、甚至CoffeScript,这2个没有直接的联系。

图片 13

另外,谷歌启动了一个新项目 Flutter。Flutter
使用响应式函数编程模型,允许开发者基于单个代码库开发跨平台的移动应用。虽然
Flutter 的想法跟 Facebook 的 React Native 如出一辙,不过 Flutter
团队还是希望能够为开发者提供一套基于 Dart 的完整解决方案。

Angular 2.0 HelloWorld

此次的分享是Angular 2.0 浅入浅出,但是一直到现在都没有提到Angular
2.0。

是的,因为Angular
2.0现在只是发布了Alpha版本,没有API文档、很多东西还没有最终定稿,官方网站只提供了几个示例程序,大家只有掌握了我前面说的ES6的新特性和AtScript后回过头来看Angular的HelloWorld示例就会非常轻松。

可以根据https://angular.io/docs/js/latest/quickstart.html的说明自己下载示例本地运行下。看下示例中的这段代码:

// app.es6

// Annotation section

@Component({

selector: ‘my-app’

})

@Template({

inline: ‘<h1>Hello</h1>’

})

// Component controller

class MyAppComponent {

constructor() {

this.name = ‘Alice’;

     }

}

bootstrap(MyAppComponent);

<!–index.html –>

<html>

     <head>

           <title>Angular 2 Quickstart</title>

          <script
src=”/quickstart/dist/esd-shim.js”></script>

    </head>

<body>

    <!– The app component created in app .es6 –>

    <my-app></my-app>

<script>

// Rewrite the paths to load the files

System.paths = {

‘angular2/*’:’/quickstart/angular2/*.js’, // Angular

‘rtts_assert/*’: ‘/quickstart/rtts_assert/*.js’, //Runtime
assertions

‘app’: ‘app.es6’ // The my-app component

};

// Kick off the application

System.import(‘app’);

</script>

   </body>

</html>

通过这段简短的代码可以大致知道Angular2.0
是怎么回事了,没有了angular.module、没有了Controller、没有了$scope、没有了xxx.directive()

基本上一切都是基于对象,基于注解。应该是更易学,更简单了。

从 Dart 在谷歌内部的受欢迎程度来看,Dart
的势头会继续增长。这个也就是谷歌想要通过这次大会传达给我们的信息。不过要想在外部同样获得开发者的支持,Dart
团队仍然任重而道远。

引用材料

图片 14

https://angular.io

https://github.com/lukehoban/es6features

http://eisenbergeffect.bluespire.com/all-about-angular-2-0/

http://www.typescriptlang.org/Content/TypeScript%20Language%20Specification.pdf

https://docs.google.com/document/d/11YUzC-1d0V1-Q3V0fQ7KSit97HnZoKVygDxpWzEYW0U/edit

https://github.com/xufei/blog/issues/8

http://es6.ruanyifeng.com/

来自:InfoQ

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图