Angular 4 概述

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

Angular 的结构基于组件/服务架构。 AngularJS 基于模型视图控制器。 Angular 4 2017 年 3 月发布的版本被证明是一个重大突破，是 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 关键字可以存储值如下图：

<div *ngFor="let i of months | sliceAngular 4 概述5 as total">
    Months: {{i}} Total: {{total.length}}
</div>

变量 total 使用 as keyword.

动画包

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

Template

Angular 4 uses 作为标签而不是 <模板>; 后者用于Angular2。 Angular 4 改变的原因 <模板> to 是因为名字冲突 <模板> 带有 html 的标签 <模板> 标准标签。它将完全弃用。这是 Angular 4 的主要变化之一。

打字稿 2.2

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

管道标题案例

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

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

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

Http 搜索参数

简化了 http get api 的搜索参数。我们不需要打电话 URL搜索参数 与在 Angular2 中所做的相同。

更小更快的应用程序

与 Angular2 相比，Angular 4 应用程序更小更快。它使用 TypeScript 2.2 版，这是使最终编译体积更小的最新版本。