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 关键字

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

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

变量 total 使用as 关键字存储 slice 的输出。

动画包

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，即最新版本，使最终编译后的文件大小更小。