Angular 4 - 概述

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

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

Angular 4与Angular几乎相同2.它与Angular 2具有向后兼容性.在Angular 2中开发的项目在Angular 4中没有任何问题.

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

为什么选择Angular4而不是Angular3？

Angular团队在内部遇到了一些版本问题，因为他们不得不继续发生冲突并发布Angular的下一个版本 -  Angular4.

现在让我们看看添加到Angular 4&minus的新功能;

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