Angular 2和TypeScript-概述

最新推荐文章于 2024-10-25 09:01:00 发布

cunfu6353

最新推荐文章于 2024-10-25 09:01:00 发布

阅读量665

点赞数

CC 4.0 BY-SA版权

文章标签： java 编程语言 spring python vue ViewUI

原文链接：https://www.infoq.com/articles/Angular2-TypeScript-High-Level-Overview/?topicPageSponsorship=c1246725-b0a7-43a6-9ef9-68102c8d48e1

本文探讨Angular2框架的高级概述，强调其基于组件的架构、TypeScript的使用、依赖注入、组件间通信及性能优化。介绍了Angular2在渲染、测试、部署方面的优势，并讨论了UI组件库选项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Web开发InfoQ趋势报告

从网络开发领域中找出今年您应该关注的技术。成为您团队中的创新者，并了解有关Vue.js，GraphQl和React的更多信息。 阅读报告 。

AngularJS 今天是目前最流行JavaScript框架，可用于创建Web应用程序。现在，Angular 2和TypeScript以与Java 8极为接近的语法将真正的面向对象的Web开发带入主流。

根据Google工程总监Brad Green的说法，有130万开发人员正在使用AngularJS，并且已有30万开发人员正在使用即将发布的Angular2。在与Angular 2一起工作了最近10个月之后，我相信它对JavaScript社区的影响将与Java社区相媲美。 Java上的Spring框架。

在本文中，我将提供Angular 2框架的高级概述。

2014年底，Google宣布Angular 2将完全重写AngularJS，甚至还创建了一种新语言“ AtScript”，该语言旨在用于编写Angular 2应用程序。

但是随后，Microsoft同意在其TypeScript语言（JavaScript的严格超集）中添加对装饰器（aka注释）的支持，从而使之成为Angular 2框架本身开发的语言，并成为使用Angular 2框架开发应用程序的推荐语言。 AngularJS框架。

您还可以使用JavaScript（ECMAScript 5和6）和Dart开发Angular 2应用程序。

此外，Angular团队将另一个Microsoft产品-React性JavaScript扩展的RxJS库集成到Angular 2框架中。

Angular 2不是MVC框架，而是基于组件的框架。在Angular 2中，应用程序是一棵松散耦合的组件树。

例如，下面的屏幕快照显示了一个在线拍卖应用程序示例的登录页面，该应用程序最初是作为Navbar，Search，Carousel，Product和Footer组件的集合而原型化的。

上图说明了所呈现的三个产品组件。通过将模板绑定到从服务器检索的组件数组来完成自动渲染。每个产品的标题是指向相关产品详细信息页面的链接。由于我们希望将拍卖设计为单页应用程序（SPA），因此我们不想刷新整个页面以显示产品详细信息。让我们重用当前轮播和产品占据的区域，以便它还可以呈现产品详细信息，同时保持页面的其余部分不变。可以通过几个简单的步骤完成此任务：

使用Angular的router-outlet指令，该指令允许您将轮播和产品当前占据的区域声明为<router-outlet>，以便它可以根据用户的导航更改内容。
将旋转木马和产品封装在Home组件内
创建一个新的ProductDetail组件
配置Angular的路由器以在指定的<router-outlet>区域中显示Home或ProductDetail组件。

我们已经讨论了很多有关组件的内容，但是还没有定义它们。在TypeScript中，组件只是带有@Component注释的类：

@Component({
  selector: 'auction-home',
  template: `
    HTML or other markup is in-lined here
  `
})
export default class HomeComponent {

 // Application logic goes here
}

注释@Component用于定义组件和关联的元数据。在此示例中， 选择器属性的值标识表示此组件HTML标签的名称。 template属性是HTML（或其他）标记的占位符。

回到我们的拍卖登录页面，顶级ApplicationComponent的模板可能如下所示：

该模板由代表各个组件的标准和自定义HTML标签组成。在示例中，我们内联了HTML。如果我们希望将标记存储在一个单独的文件中（在本例中为application.html ），我们将使用属性templateURL而不是template，ApplicationComponent的代码可能如下所示：

import {Component} from 'angular2/core';
import {Route, RouteConfig, RouterOutlet} from 'angular2/router';
import HomeComponent from '../home/home';
import NavbarComponent from '../navbar/navbar';
import FooterComponent from '../footer/footer';
import SearchComponent from '../search/search';
import ProductDetailComponent from "../product-detail/product-detail";

@Component({
  selector: 'auction-application',
  templateUrl: 'app/components/application/application.html',
  directives: [
    RouterOutlet,
    NavbarComponent,
    FooterComponent,
    SearchComponent,
    HomeComponent
  ]
})
@RouteConfig([
  {path: '/', component: HomeComponent, as: 'Home'},
  {path: '/products/:id', component: ProductDetailComponent, as: 'ProductDetail'}
])
export default class ApplicationComponent {}

类ApplicationComponent用@Component和@RouteConfig注释（用于依赖URL的内容）。选择器属性的值将用作用户定义HTML标记<auction-application>。 templateURL指定标记的位置。 section指令包括RouterOutlet和所有子组件。

注释@RouteConfig为客户端导航配置两条路由：

名为Home的路由的内容将由HomeComponent呈现并映射到URL片段/。
名为ProductDetail的路由的内容将由ProductDetailComponent呈现，并映射到URL片段/ product：id。

当用户单击特定的产品标题时，默认的本地路由的内容将替换为ProductDetail路由的内容，后者提供参数id的值，并在<router-outlet>区域中显示产品详细信息。例如，以产品ID 1234作为参数的导航到ProductDetail路线的链接可以如下所示：

<a [routerLink]="['/ProductDetail', {'prodId': 1234}]"> {{product.id}} </a>

依赖注入

组件使用服务来实现业务逻辑。服务只是Angular实例化然后注入到组件中的类。

export class ProductService {
  products: Product[] = [];
  getProducts(): Array<Product> {
    // The code to retrieve product into goes here
    return products;
  }
}

现在，如果您在HomeComponent构造函数中指定了ProductService类型的参数，Angular将自动实例化该服务并将其注入到组件中：

@Component{
 ...
}
export default class HomeComponent {
  products: Product[] = [];

  constructor(productService: ProductService) {
    this.products = productService.getProducts();
  }
}

Angular的依赖项注入模块非常灵活，并且易于使用，因为只能通过构造函数来注入对象。注入器形成一个层次结构（每个组件都有一个注入器），并且可注入对象不一定是应用程序级别的单例，因为在Spring中默认情况下可能如此。

组件间通信

组件通信可以并且应该以松耦合的方式实现。组件可以声明输入和输出属性。要将数据从父级传递到子级组件，父级会将值绑定到子级的输入属性。孩子不需要知道谁提供了这些价值观。它只知道如何处理他们。

如果组件需要将数据传递到外界，则它通过output属性发出事件。向谁发出？这与组件无关。感兴趣的任何人都可以创建自定义组件事件的侦听器。

这种机制使我们可以将组件视为黑匣子，可以获取值或发送数据。我最近录制了一段短视频，您可能会发现它有用，它说明了Angular 2中Mediator设计模式的一种实现。

为什么使用TypeScript

TypeScript是JavaScript的超集，但像Java一样，它允许您定义新类型。使用类型而不是通用var声明变量为新的工具支持打开了大门，您将发现它是极大的生产力增强器。 TypeScript带有一个静态代码分析器，当您在支持TypeScript的IDE中输入代码（WebStorm / IntelliJ Idea，Visual Studio Code，Sublime Text等）时，您会受到上下文相关帮助的指导，建议对象中的可用方法或函数参数的类型。如果您不小心使用了错误的类型，则IDE将突出显示错误的代码。在此处了解WebStorm如何支持TypeScript。

即使您的TypeScript应用程序使用用JavaScript编写的第三方库，您也可以安装类型定义文件（具有扩展名.d.ts），其中包含该库的类型声明。免费提供了数百种流行JavaScript库的类型声明，您可以使用TypeScript Definition Manager的Typings轻松安装它们。想象一下，您想从TypeScript代码中使用jQuery（用JavaScript编写）。 jQuery的类型定义文件将包含所有jQuery API的声明（带有类型），因此您的IDE可以提示您使用哪种类型，或突出显示任何错误代码。

性能和渲染

在Angular 2中，渲染性能得到了显着改善。最重要的是，渲染模块位于单独的模块中这一事实使您可以在工作线程中运行大量计算代码。访问“重画速率挑战”网站以比较各种框架的渲染性能。您可以感觉到通过不断更新数据来渲染大型数据网格的速度很高。运行名为“ DBMON Angular 2.0 Beta-Web Workers”的测试；浏览器以惊人的速度重绘了具有恒定数据刷新的大型数据网格（在单独的线程中）。

如果您问Angular 2有哪些功能使其与其他框架不同，那么我首先要列出的是用于模板渲染和区域的单独模块：

由独立的渲染器处理在单独的模板中声明的组件的UI，从模板的优化和预编译，到创建用于在不同设备上渲染的模板的能力，都为领域带来了新机遇。
zone.js模块监视应用程序中的更改，并决定何时更新每个组件的UI。任何异步事件都会触发每个组件中UI的重新验证，并且运行速度惊人。

注意事项 ：

尽管对于大多数应用程序，您无需了解zone.js的内部信息，但是如果您的项目工作需要在复杂的应用程序中微调UI渲染，那么您将可以花一些时间来了解有关该区域的更多信息内部工作。

将渲染引擎放在单独的模块中，可使第三方供应商用针对非基于浏览器平台的DOM渲染器替换默认的DOM渲染器。例如，这允许使用使用本机组件的移动设备的UI渲染器跨设备重用应用程序代码。 TypeScript类的代码保持不变，但是@Component批注的内容将包含XML或另一种用于呈现本机组件的语言。自定义Angular 2渲染器已在NativeScript框架中实现，该框架充当JavaScript与本机iOS和Android UI组件之间的桥梁。使用NativeScript，只需将模板中HTML替换为XML，即可重用组件的代码。另一个自定义UI渲染器允许将Angular 2与React Native一起使用，这是为iOS和Android创建本机（非混合）UI的另一种方法。

工装

虽然Angular 2应用程序的语法和体系结构比AngularJS 1.X更易于理解，但工具却有点复杂。这不足为奇。毕竟，您将用一种语言编写代码，然后用另一种语言进行部署，因为所有内容都已编译为JavaScript。

Angular CLI是一个正在进行中的项目，有望提供一个命令行界面，该界面将大大简化从初始项目生成到生产部署的各种过程。

可以在IDE或浏览器中完成应用程序调试。我们使用Chrome开发者工具进行调试。生成的源映射允许您在浏览器运行JavaScript时调试TypeScript代码。如果您喜欢调试JavaScript，也可以这样做，因为TypeScript编译器会生成人类可以读取JavaScript。

测试与部署

Angular 2带有一个测试库，该库允许您以BDD格式编写单元测试。当前，它仅支持Jasmine框架，但其他框架支持正在开发中。我们使用Karma测试运行程序，该测试运行程序允许在各种浏览器上运行测试。

利用Protractor框架，您可以为应用程序编写端到端测试。如果在开发模式下加载简单应用程序时监视网络，则会看到浏览器下载的数据量超过5Mb（其中一半是模块加载器SystemJS使用的TypeScript编译器）。但是，在运行部署和优化脚本（我们使用Webpack捆绑程序）之后，小型应用程序的大小可以小至160K（包括Angular 2框架）。我们期待看到Angular CLI如何实现生产捆绑。 Angular团队致力于离线模板的编译，这会将框架的开销降低到50Kb。

UI组件库

在撰写本文时，您可以将多个UI组件库与Angular 2应用程序一起使用：

PrimeNG-由PrimeFaces（与JavaServer Faces框架一起使用的流行库）的创建者提供的Angular 2 UI组件库。
Wijmo 5 -Angular 2 UI组件的商业库。您必须购买开发者许可证才能使用它。
Polymer -Google提供的外观漂亮的可扩展组件库。在我们公司，我们设法创建了一个使用Polymer组件的Angular 2试点应用程序，但两者的集成仍存在改进的空间。
Material Design 2-由Google专为Angular 2开发的UI组件库。当前该库位于Alpha早期，但是开发非常活跃，我希望在接下来的三个中可以看到数十个设计良好的UI组件。四个月。
NG-Lightning-使用Lightning Design System CSS框架在TypeScript中从头开始编写的Angular 2组件和指令库。

在体内使用Angular 2是否安全？

从第一个Beta版本开始，我们在Farata Systems的实际项目中使用Angular 2，并且没有遇到任何重大问题，至少没有一个没有实际解决方法的问题。

为了安全起见，请再等几个月。有传言称，Angular 2的候选版本将在2016年5月的Google I / O会议上宣布。

未来会怎样

2016年3月，布拉德·格林（Brad Green）在O'Reilly的Fluent会议上作了主题演讲。观看此演示文稿的视频。您印象深刻吗？我是。

关于作者

是位于纽约的Java Champion，也是IT咨询公司Farata Systems的合作伙伴。他领导了Princeton JUG，撰写了许多有关软件开发的文章和几本书。最近，他与人合着了《用TypeScript开发Angular 2》这本书，该书将由曼宁于2016年6月出版。Yakov经常在会议上讲话，并教授Java和Angular 2类。他在yakovfain.com上发表博客。

对Angular 2感兴趣？

更多更新： 新闻，深入探讨和演示。

翻译自: https://www.infoq.com/articles/Angular2-TypeScript-High-Level-Overview/?topicPageSponsorship=c1246725-b0a7-43a6-9ef9-68102c8d48e1