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，即最新版本，使最終編譯後的檔案大小更小。