Angular 2 与 Angular 1：让我们看看有哪些变化

自从 Angular JS 诞生以来，它已被全球许多开发者广泛用于构建应用程序。这个基于 JavaScript 的开源框架因其出色的功能而受到开发者社区的欢迎，例如简单且更好的方式来管理 MVC 组件、使用 JavaScript 对象等等。

这就是拥有这些出色功能的 Angular 1，这些功能使 Angular JS 成为一个流行且被广泛接受的框架。但我们知道，没有什么是完美的，总有改进的空间，基于这种理念，现在是 Angular 2 的时代了，它带来了许多改进的功能。

凭借其强大的功能和高性能，Angular 2 的受欢迎程度与日俱增，不仅吸引了使用 Angular 1 的开发者，还在 Angular JS 社区建立了坚实的支持基础。

实际上，Angular 2 不是 Angular 1 的升级版，它不是从 1.x 到 2.x 的版本更新；事实上，它是完全重写的，其中包含了急需的更改。

Angular 2 完全使用 TypeScript 编写，并符合 ECMA Script 6 规范，并且比 Angular 1 快得多。它是基于组件的，并使用分层依赖注入系统，从而提高了性能，并且在构建时考虑了对移动设备的支持。

因此，让我们看看 Angular 2 与 Angular 1 的一些关键区别。

与更多语言兼容

在 Angular 1 中，我们有 ECMA Script 5、ECMA Script 6 和 Dart 三种语言选项可供选择，并可以使用其中任何一种来完成我们的工作。

而在 Angular 2 中，我们除了 ES5、ES6 和 Dart 之外，还可以选择 TypeScript。因此，与 Angular 1 相比，您有更多选择。TypeScript 使您的 JavaScript 编写更有趣，它包含 ES6 并且向后兼容 ES5。因此，您将获得 ES6 的所有好处，如反射、Python 风格的生成器、For of 循环、迭代器等。

专注于移动开发

是的，考虑到移动应用程序日益增长的需求，Angular 2 支持移动设备；它最初是为了解决性能问题并提高内存效率而构建的。

Angular 1 在构建时并未考虑移动设备的支持，实际上在 2009 年 Angular 1 进入市场时，它的创建者从未想过要提供移动设备支持，因此它并非从这个角度构建的。

@Component、Controller 和 $Scope 不复存在

目前正在使用或之前使用过 Angular 1 的开发者都了解控制器和 $Scope 的用法。在 Angular 2 中，没有控制器和$Scope，它们被“组件”和“指令”取代。Angular 2 完全是基于组件的。指令被声明为 @Directive 注解。它们也可以在组件中使用。程序中使用的所有组件都必须通过引导程序声明和识别。

让我们看看使用 JavaScript 的组件的一些基本用法

import {Component} from ‘angular2/core’;
@Component({
   selector: ‘Hello-app’,
   template: ‘<h1>{{ title }}</h1>’})
   export class AppComponent {
      title = “This is my first application in Angular 2”
   }

结构指令语法中的变化

了解 Angular 1 的开发者非常熟悉结构指令语法“ng-repeat”的用法，但现在在 Angular 2 中，它已被“*ngFor”取代。

Angular 指令有三种类型：

• 组件
• 属性指令
• 结构指令

正如我们之前讨论的，组件实际上是一个带有模板的指令。属性指令用于更改元素的行为或外观。例如，NgStyle 指令可以同时更改多个元素的样式，例如将文本设置为粗体、斜体等。有三个这样的内置结构指令可供我们使用，它们是 ngIf、ngSwitch 和 ngFor。

让我们看看 Angular 1 和 Angular 2 之间以下**语法**的差异

Angular 1 中的结构指令

<ul>
   <li ng-repeat=” let player of players”>{{players.name}}
   </li>
</ul>
<div ng-if=” players.length “>
   <h3>You have {{ players.length }} players.</h3>
</div>

Angular 2 中的结构指令

<ul>
   <li *ngFor=”let player of players”>{{players.name}}
   </li>
</ul>
<div *ngIf=”players.length”>
   <h3>You have {{players.length}} players.</h3>
</div>

如您在上面的示例中看到的，ng-repeat 被 *ngFor 替换，ng-If 被 *ngIf 替换，“in”被“of”替换。类似地，其他语法中也有一些更改，例如 ng-class 现在是 ngClass，ng-model 现在是 ngModel 等。这些更改是由于 Angular 2 使用驼峰式命名法造成的。

简化的版本控制和发布周期

Angular JS 社区一直要求 Angular 1 采用适当的版本控制和发布周期，现在终于听到了。从 Angular 2.0.0 开始，他们转向语义化版本控制。此后，它将根据语义化版本控制规范遵循 MAJOR.MINOR.PATCH 方案。

将遵循基于时间的发布周期，以便用户可以相应地进行计划。用户将在任何 API 更改之前获得通知。

数据绑定的变化

您可能已经知道 Angular 1 使用内置指令进行单向和双向数据绑定。例如，在 Angular 1 中，ng-bind 用于单向数据绑定，ng-model 用于双向数据绑定。

Angular 2 使用 [property] 取代了它们，因为 Angular 2 直接使用有效的 HTML DOM 元素属性和事件，因此不再需要 Angular 1 的内置指令。

让我们看看语法的差异。

在 Angular 1 中

<input ng-bind = “student.name”></input>
<input ng-model = “student.name”></input>

在 Angular 2 中

<input [value] = “student.name”></input>
<input [(ngModel)] = “student.name”></input>

除了上述基本差异之外，Angular 2 还为长期等待的开发者带来了许多其他更改。

• 在最新的 2.1.0 版本中，对动画工作提供了更多支持，因为它添加了 :enter 和 :leave 别名，用于常见的 void => * 和 * => void 状态更改
• 无需等待服务器访问延迟加载的内容，因为路由器现在支持延迟加载模块的预加载，从而使应用程序快速启动
• 添加了更多指南和精确的实时示例以供参考
• 速度和有效负载大小方面有更多改进

我们讨论了 Angular 2 的一些强大功能，但这并不意味着我们可以完全放弃 Angular 1。Angular 1 仍然存在，并拥有充满活力的社区支持。它仍然是许多 JavaScript 开发者的首选，并且在线提供了大量文档和其他有用的资源。就像我们仍然喜欢使用较低版本的系统、平台或旧版浏览器来测试某些代码和功能一样，Angular 1 也有其自身的意义。但是，Angular 2 拥有一些强大的功能来提升其受欢迎程度，因此它正迅速进入许多开发人员的工作站。

karthikeya Boyini

更新于： 2020-01-20

127 次浏览

开启您的 职业生涯

通过完成课程获得认证

立即开始