資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究Angular 2 與 Angular 1：讓我們看看有哪些變化
自從 Angular JS 誕生以來，它已被全球許多開發者廣泛用於構建應用程式。這個基於 JavaScript 的開源框架因其出色的功能而受到開發者社群的歡迎，例如簡單且更好的方式來管理 MVC 元件、使用 JavaScript 物件等等。
這就是擁有這些出色功能的 Angular 1，這些功能使 Angular JS 成為一個流行且被廣泛接受的框架。但我們知道，沒有什麼是完美的，總有改進的空間，基於這種理念，現在是 Angular 2 的時代了，它帶來了許多改進的功能。
憑藉其強大的功能和高效能，Angular 2 的受歡迎程度與日俱增，不僅吸引了使用 Angular 1 的開發者，還在 Angular JS 社群建立了堅實的支援基礎。
實際上，Angular 2 不是 Angular 1 的升級版，它不是從 1.x 到 2.x 的版本更新；事實上，它是完全重寫的，其中包含了急需的更改。
Angular 2 完全使用 TypeScript 編寫，並符合 ECMA Script 6 規範，並且比 Angular 1 快得多。它是基於元件的，並使用分層依賴注入系統，從而提高了效能，並且在構建時考慮了對移動裝置的支援。
因此，讓我們看看 Angular 2 與 Angular 1 的一些關鍵區別。
與更多語言相容
在 Angular 1 中，我們有 ECMA Script 5、ECMA Script 6 和 Dart 三種語言選項可供選擇，並可以使用其中任何一種來完成我們的工作。
而在 Angular 2 中，我們除了 ES5、ES6 和 Dart 之外，還可以選擇 TypeScript。因此，與 Angular 1 相比，您有更多選擇。TypeScript 使您的 JavaScript 編寫更有趣，它包含 ES6 並且向後相容 ES5。因此，您將獲得 ES6 的所有好處，如反射、Python 風格的生成器、For of 迴圈、迭代器等。
專注於移動開發
是的，考慮到移動應用程式日益增長的需求，Angular 2 支援移動裝置；它最初是為了解決效能問題並提高記憶體效率而構建的。
Angular 1 在構建時並未考慮移動裝置的支援，實際上在 2009 年 Angular 1 進入市場時，它的建立者從未想過要提供移動裝置支援，因此它並非從這個角度構建的。
@Component、Controller 和 $Scope 不復存在
目前正在使用或之前使用過 Angular 1 的開發者都瞭解控制器和 $Scope 的用法。在 Angular 2 中，沒有控制器和 $Scope，它們被“元件”和“指令”取代。Angular 2 完全是基於元件的。指令被宣告為 @Directive 註解。它們也可以在元件中使用。程式中使用的所有元件都必須透過載入程式宣告和識別。
讓我們看看使用 JavaScript 的元件的一些基本用法
import {Component} from ‘angular2/core’;
@Component({
selector: ‘Hello-app’,
template: ‘<h1>{{ title }}</h1>’})
export class AppComponent {
title = “This is my first application in Angular 2”
}結構指令語法中的變化
瞭解 Angular 1 的開發者非常熟悉結構指令語法“ng-repeat”的用法，但現在在 Angular 2 中，它已被“*ngFor”取代。
Angular 指令有三種類型：
- 元件
- 屬性指令
- 結構指令
正如我們之前討論的，元件實際上是一個帶有模板的指令。屬性指令用於更改元素的行為或外觀。例如，NgStyle 指令可以同時更改多個元素的樣式，例如將文字設定為粗體、斜體等。有三個這樣的內建結構指令可供我們使用，它們是 ngIf、ngSwitch 和 ngFor。
讓我們看看 Angular 1 和 Angular 2 之間以下**語法**的差異
Angular 1 中的結構指令
<ul>
<li ng-repeat=” let player of players”>{{players.name}}
</li>
</ul>
<div ng-if=” players.length “>
<h3>You have {{ players.length }} players.</h3>
</div>Angular 2 中的結構指令
<ul>
<li *ngFor=”let player of players”>{{players.name}}
</li>
</ul>
<div *ngIf=”players.length”>
<h3>You have {{players.length}} players.</h3>
</div>如您在上面的示例中看到的，ng-repeat 被 *ngFor 替換，ng-If 被 *ngIf 替換，“in”被“of”替換。類似地，其他語法中也有一些更改，例如 ng-class 現在是 ngClass，ng-model 現在是 ngModel 等。這些更改是由於 Angular 2 使用駝峰式命名法造成的。
簡化的版本控制和釋出週期
Angular JS 社群一直要求 Angular 1 採用適當的版本控制和釋出週期，現在終於聽到了。從 Angular 2.0.0 開始，他們轉向語義化版本控制。此後，它將根據語義化版本控制規範遵循 MAJOR.MINOR.PATCH 方案。
將遵循基於時間的釋出週期，以便使用者可以相應地進行計劃。使用者將在任何 API 更改之前獲得通知。
資料繫結的變化
您可能已經知道 Angular 1 使用內建指令進行單向和雙向資料繫結。例如，在 Angular 1 中，ng-bind 用於單向資料繫結，ng-model 用於雙向資料繫結。
Angular 2 使用 [property] 取代了它們，因為 Angular 2 直接使用有效的 HTML DOM 元素屬性和事件，因此不再需要 Angular 1 的內建指令。
讓我們看看語法的差異。
在 Angular 1 中
<input ng-bind = “student.name”></input> <input ng-model = “student.name”></input>
在 Angular 2 中
<input [value] = “student.name”></input> <input [(ngModel)] = “student.name”></input>
除了上述基本差異之外，Angular 2 還為長期等待的開發者帶來了許多其他更改。
- 在最新的 2.1.0 版本中，對動畫工作提供了更多支援，因為它添加了 :enter 和 :leave 別名，用於常見的 void => * 和 * => void 狀態更改
- 無需等待伺服器訪問延遲載入的內容，因為路由器現在支援延遲載入模組的預載入，從而使應用程式快速啟動
- 添加了更多指南和精確的即時示例以供參考
- 速度和有效負載大小方面有更多改進
我們討論了 Angular 2 的一些強大功能，但這並不意味著我們可以完全放棄 Angular 1。Angular 1 仍然存在，並擁有充滿活力的社群支援。它仍然是許多 JavaScript 開發者的首選，並且線上提供了大量文件和其他有用的資源。就像我們仍然喜歡使用較低版本的系統、平臺或舊版瀏覽器來測試某些程式碼和功能一樣，Angular 1 也有其自身的意義。但是，Angular 2 擁有一些強大的功能來提升其受歡迎程度，因此它正迅速進入許多開發人員的工作站。
127 次瀏覽
