[译]Angular2 和TypeScript

原文链接：https://www.infoq.com/articles/Angular2-TypeScript-High-Level-Overview

作者：  Yakov Fain Posted on  Apr 26, 2016

------------------------------------------------------------------------------------------------------------------------------

AngularJS是目前最流行的可用于创建网页应用的javascript框架。而且现在Angular2和TypeScript正在让真正的面向对象开发方式的成为网页开发的主流方式，而且在语法上与Java 8惊人的相似。

根据Google工程总监Brad Green介绍， 有130万开发人员在使用AngularJS且有30万开发人员已经准备好开始使用Angular2了。 在使用了Angular2将近十个月之后，我相信其对javascript社区的影响将能媲美Spring框架对于Java社区的影响。

在这篇文章中，我将会展示一个关于Angular2框架的简要概述。

在2014年末，google宣布Angular2将会对AngularJS进行完全的重写， 为了写Angular2的应用程序，他们甚至创建了一个全新的语言“AtScript”。

但同时， 微软答应要对他们的TypeScript语言（一个严格类型的Javascriptz超集语言）增加对装饰（亦称注释）的支持，这就为开发Angular2框架诞生了一个新语言，并且这是一门使用AngularJS框架开发应用的推荐语言。

你当然也可以用Javascript（ECMAScript5和6都可以）和Dart开发Angular 2应用。

此外，Angular团队集成了另一个微软的项目到Angular2框架中-- RxJS库，一个原生Javascript的扩展类库。

Angular2不是一个MVC框架，而是一个基于组件化的框架。在Angluar2种，应用是一个松散耦合的组件树。

举个栗子，下面这个截图展示了一个示例在线拍卖应用的登陆页面， 该页面是由导航栏、搜索框、轮转展示区、产品和底部这些组件组合而成的最初原型。

上面这张图片演示了3个产品呈现组件。自动呈现功能是通过在模板上绑定一个从服务端获取数据的组件数组。 每个产品的title是一个关联到产品详情页的链接。既然我们想将拍卖系统设计为一个单页面应用（SPA），我们就不希望为了展示产品详情而刷新整个页面。让我们重复利用现在被轮转区和产品列表占用的区域，它也可以用来呈现产品详情同时保持页面的其他区域不变。这个任务可以通过简单的几步完成：

　　1. 用Angular的路由-出口指令，这允许你将被轮转区和产品列表占用的区域定义为《路由出口》， 以便它可以通过用户的导航栏来改变内容。

　　2. 将轮转区和产品组件封装到主页组件里

　　3. 新建一个产品详情组件

　　4. 配置Angular的路由让其在特定的《路由出口》区域显示主页或产品详情组件。

我们已经说了很多关于组件的内容，但我们还没有明确定义什么是组件。在TypeScript中，一个组件就是一个简单的通过@Component关键字注释的类：

 1 @Component({ 2  selector: 'auction-home', 3  template: ` 4   HTML or other markup is in-lined here 5  ` 6 }) 7 export default class HomeComponent { 8  9 // Application logic goes here10 }

海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理：https://www.xlkjsw.com

原标题：[译]Angular2 和TypeScript

关键词：ip