AngularJS已然成為Web應用開發世界中最受歡迎的開源JavaScript框架。自成立以來,見證其成功的是驚人的經濟成長以及團體的支持與採用——包括個人開發者、企業、社區。
Angular已經變成一個建立複雜單一頁面應用程式的客戶端MVW框架(Model-View-Whatever)。它在應用測試和應用程式編寫方面都扮演著重要角色,同時簡化了開發過程。
Angular目前的版本為1.3,該版本穩定,並被Google(框架維護者)用於支援眾多應用(據估計,在Google有超過1600個應用程式運行於Angular1.2或1.3)。 Angular 2.0正式宣布與去年10月份的奈及利亞會議上,該版本不會是一個複雜的重大更新。
為什麼要推出Angular 2.0?
在進一步討論Angular 2.0(估計發布日期為2015年底)之前,讓我們簡單的思考下新版本背後的哲學。 Angular 2.0開發始於解決以下問題:
行動:新的版本將專注於行動應用的開發。依據是它更容易處理桌面方面的事情,一旦挑戰涉及移動(效能、載入時間),注重這方面會使問題得到解決。
模組化:各個模組將從Angular的核心中移除,從而獲得更好的性能。這意味著你可以選擇你需要的零件。
現代化:Angular 2.0將把ES6和「常青」現代瀏覽器(自動更新到最新版本)作為目標。這意味著開發者可以專注於與業務領域相關的程式碼。
有哪些爭議?
在尼日利亞會議上並沒有提及遷移到2.0版本的途徑。同時也指出跳到2.0版本將會打破原有的1.3版本應用,且不會有任何的向後相容性。自從那時開始開發者社群一直充斥著不確定性和猜測,一些開發者也開始質疑是否值得開始一個新的Angular 1.3專案。
有哪些改變?
AtScript
AtScript是ES6的一個父集,被用來開發Angular 2.0。它是由Traceur編譯器(連同ES6)處理來產生ES5程式碼並用TypeScript類型語法來產生執行時間的斷言,以此來取代編譯時的檢查。不過AtScript並不是強制的,你仍然能夠使用純JavaScript/ES5程式碼取代AtScript來編寫Angular應用程式。
改善依賴入駐(DI)
依賴注入(Dependency injection )模式的基本思想是客戶類別Client不用自己來初始化它所依賴的成員變數IServer,使用一個獨立的物件建立IServer適當的實作類別並將它賦值給Client的成員變數。它對模組開發與組件隔離特別有益。 Angular 2.0將會解決Angular 1.X所存在的這個面向的問題。加入遺失的特性,如child injectors和lifetime/scope控制。
Annotations
AtScript提供工具關聯元資料和功能。這有助於建立提供必要資訊到DI庫的物件實例(檢查相關元資料時呼叫一個函數或建立一個類別的實例)。它也容易透過提供一個註解重載參數資料。
Child Injectors
一個child injector繼承了其父類別的所有效能服務。根據要求,不同類型的物件可以被調用,並且自動覆蓋不同的範圍。
實例範圍
改進的DI庫將以實例範圍為特性,這在使用Child Injectors和自己的範圍標識符時變得更加強大。
模板與資料綁定
在開發應用中,模板和資料綁定將齊頭並進。
動態載入
這是目前Angular版本所缺少的一個特性,不過將在Angular 2.0中出現。這將讓開發者可以在忙碌中添加新的指令或控制器。
模板
在Angular 2.0中,模板編譯過程將是非同步的。由於程式碼是基於ES6模組規格,因此此模組載入器將透過簡單的引用組件定義來載入依賴關係。
指令
Angular 2.0將會出現三種指令:
元件指令-這些將透過JavaScript、HTML或一個可選的CSS樣式表的封裝邏輯建立可重複使用的元件。
裝飾指令-這些指令將被用來裝飾元素(例如新增一個工具提示,或使用ng-show/ng-hide來顯示/隱藏元素)。
範本指令-這些將把HTML改為可重複使用的範本。模板的實例化以及嵌入到DOM可以完全由指令控制。這樣的例子包括ng-if和ng-repeat。
Routing plan
The initial Angular routing is designed to handle some simple situations. However, as the framework evolves, more and more features are added. Routing is already extensible in Angular 2.0 and will include the following basic features:
Simple json-based routing configuration;
Optional contracts over configuration;
Static. Parameterized routing mode;
URL parser;
Supports query string;
Use push status or Hashchange;
Navigation model (generates a navigation UI);
Document title updated;
404 routing processing;
Location services;
Historical operations.
Now, let’s take a look at the routing features that take Angular 2.0 to new heights:
Subroute
Sub-routing will transform each component of the application into smaller applications by providing them with their own routes, which will help encapsulate the feature set of the entire application.
Screen activation
This will help developers better control the navigation lifecycle through a set of can* callbacks:
canActivate - allow/block navigation to new controllers;
activate - respond to successful navigation to the new controller;
canDeactivate - Allow/block navigation away from old controllers;
deactivate - responds to successful navigation away from the old controller;
These callbacks will allow developers to return a Boolean value or a command (for lower level control).
Design
All this logic is built using a pipeline structure, making it very easy to add your own steps to the pipeline or remove the default stuff. In addition, its asynchronous nature will allow developers to use server requests to authenticate or load data for controllers, although this is still planned.
Log
Angular 2.0 will include a logging service called diary.js - a very useful feature for measuring where your time is spent in your application.
Scope
$scope will be removed from Angular 2.0 and replaced by ES6 classes.
Conclusion
The excitement and buzz surrounding Angular 2.0 will intensify as the release date approaches. Is breaking change a good thing? We have no way of knowing, but opponents are understandably nervous given the apparent lack of plans to relocate. The excitement came right away. But since it is coming, what we can do is to welcome it actively.
The above content introduces you to the new features of AngularJS 2.0. I hope it will be helpful to you!