Angular 4 简介

Angular 4 简介

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

Angular的结构基于组件/服务架构。AngularJS 基于模型视图控制器。2017年3月发布的Angular 4被证明是一项重大突破，也是Angular 2之后Angular团队发布的最新版本。Angular 4与Angular 2几乎相同。它与Angular 2向后兼容。在Angular 2中开发的项目在Angular 4中不会有任何问题

为什么是Angular4而不是Angular3?

Angular团队在其模块内部面临一些版本控制问题，由于冲突他们不得不发布下一个版本的Angular - Angular 4。

现在让我们来看看Angular 4中的新增的功能

Angular 4中的新增的功能

ngIf

Angular2仅支持if条件，Angular4也同时支持if else条件。让我们看看它是如何使用的。

<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关键字存储切片的输出。

Animation包

Angular 4中的Animation可作为单独的包，需要从@angular/animations导入。在angular 2中，它集成在@angular/core中。由于其向后兼容性方面，它仍然保持不变。

模板

Angular 4使用<ng-template>作为标签，而不是<template>，后者用于Angular 2。Angular 4将<template>更改为<ng-template>的原因是<template>标签与html标准标签<template>的名称冲突，这是Angular 4的主要变化之一。

TypeScript 2.2

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

Title Case管道

Angular 4添加了一个新的Title Case管道，将每个单词的第一个字母改为大写。

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

上面的代码行生成以下输出：

Angular 4 Titlecase

HTTP搜索参数

http get API的搜索参数被简化了。我们不需要像在Angular 2中那样调用URLSearchParames。

更小更快的应用程序

与Angular 2相比，Angular 4应用更小、更快。它使用TypeScript版本2.2，这是最新版本，使得最终编译的规模较小。