目录

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 。 它的向后兼容性方面仍然保持不变。

Template

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版,这是最新版本,使最终编译的尺寸很小。

↑回到顶部↑
WIKI教程 @2018