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 的主要变化之一。

打字稿 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 版本，这使得最终编译的大小较小。