Angular 4 - 概述

Angular 共有三个主要版本。 发布的第一个版本是 Angular1，也称为 AngularJS。 Angular1 之后是 Angular2，与 Angular1 相比，它有很多变化。

Angular 的结构基于组件/服务架构。 AngularJS 基于模型视图控制器。 2017 年 3 月发布的 Angular 4 被证明是一个重大突破，是 Angular 团队继 Angular2 之后的最新版本。

Angular 4 与 Angular 2 几乎相同。它与 Angular 2 向后兼容。在 Angular 2 中开发的项目可以在 Angular 4 中正常运行，不会出现任何问题。

现在让我们看看 Angular 4 中的新功能和所做的更改。

为什么选择 Angular4 而不是 Angular3?

Angular 团队在模块内部面临一些版本控制问题，由于冲突，他们不得不继续发布 Angular 的下一个版本 - Angular4。

现在让我们看看 Angular 4 中添加的新功能 −

ngIf

Angular2 仅支持 if 条件。 但是，Angular 4 也支持 if else 条件。 让我们看看它如何使用 ng-template 工作。

<span *ngIf="isavailable; else condition1">Condition is valid.</span>
<ng-template #condition1>Condition is invalid</ng-template>

for 循环中的 as 关键字

借助 as 关键字，您可以存储如下所示的值 −

<div *ngFor="let i of months | slice:0:5 as total">
   Months: {{i}} Total: {{total.length}}
</div>

变量 Total 使用 as 关键字存储切片的输出。

动画包

Angular 4 中的动画作为单独的包提供，需要从 @angular/animations 导入。 在 Angular2 中，它可以通过 @angular/core 来使用。 由于向后兼容性方面，它仍然保持不变。

模板

Angular 4 使用 <ng-template> 作为标签，而不是 <template>;，后者在 Angular2 中使用。 Angular 4 将 <template> 更改为 <ng-template> 的原因是因为 <template> 标签与 html <template> 标准标签的名称冲突。 它将完全弃用。 这是 Angular 4 的主要变化之一。

TypeScript 2.2

Angular 4 已更新到 TypeScript 的最新版本，即 2.2。 这有助于提高速度并在项目中提供更好的类型检查。

管道标题大小写

Angular 4 添加了新的管道标题大小写，它将每个单词的第一个字母更改为大写。

<div>
   <h2>{{ 'Angular 4 titlecase' | titlecase }}</h2>
</div>

上面的代码行生成以下输出 - Angular 4 Titlecase。

Http 搜索参数

简化了 http get api 的搜索参数。 我们不需要像 Angular2 中那样调用 URLSearchParams。

更小更快的应用

与 Angular2 相比，Angular 4 应用程序更小、速度更快。 它使用最新版本的 TypeScript 2.2 版本，这使得最终编译的大小较小。