詳細解讀Angular5.1新功能

這篇文章主要介紹了Angular5.1新功能以及相關的用法，需要的朋友參考學習下吧。

本篇文章透過介紹Angular5.1新特性給大家詳細分享了的5.1改進和增加的內容，以下是全部內容：

新特性

# #Angular Material和CDK穩定版

CLI中支援Service Worker

在CLI中改進了Universal和AppShell的支援

改進了裝飾器的錯誤訊息

支援TypeScript2.5

有關功能和bug修復的完整列表，請參閱Angular，Material和CLI的更新日誌。

Angular Material和CDK穩定版

在發布了11個alpha版本，12個beta版本以及3個候選版本之後，我們很高興現在能夠標記Angular Material和Angular CDK的5.0 .0的穩定版。基於Google的Material Design視覺設計語言，Angular Material提供了30個UI元件給你的Angular應用。組合使用Angular CDK，Angular CDK（組件開發工具包）提供了一組構建模組，幫組您構建自己的定制組件，而不需要再次解決常見問題。這些組件已經被許多GOogle應用程式（包括Google Analytics套件，Google雲端平台開發人員控制台以及Google Shopping Express）用於生產。

從這個版本開始，Angular Material將遵循與Angular相同的語義化哲學，主版本的Angular Materital和Angular CDK同時作為其它平台的主版本發布。 bug修復的版本將按照每週的迭代進行，而次版本將在功能完成時發布。

訪問matrial.angular.io獲取文檔，演示和我們的入門指南。你也可以在Github上跟進我們的進度，因為我們將繼續為框架添加更多類容。在接下來的幾個月中，請關注諸如新的mat-tree，virtual scrolling，組件測試套件以及拖放功能。

CLI1.6的Service Worker支援

效能一直是Web開發人員的重要目標，在今天的區域網路WIFI和行動網路事件中，效能一直是重要的目標。現代瀏覽器有一個新的API用於建立可靠且快速載入的站點，稱為Service Worker API。

Angular5.0.0附帶了一個為Angular應用程式定制的新的Service Worker實現，而Angular CLI 1.6包含了支援利用這個新特性構建應用的功能。使用@angular/service-worker可以提升你的應用程式的載入效能在支援該API的瀏覽器中，以及讓你的應用程式的載入體驗更像是本機app。

CLI1.6 改進Universal和App Shell支援

此外，隨著Angular CLI1.6的發布，更好的透過Schematics將Universal添加到你現有的專案中，並為App Shell提供支援。

Angular Universal

加入Universal到你目前的CLI專案中，你可以在你的專案目錄下使用下面的指令：

npm generate universal <name>

用你想給你的應用程式的名字取代。這將會採用你採用的應用程序，並創建一個通用的模組，並為你自動配置你的angular-cli.json檔案。然後你可以跳到我們的指南中的第4步使用Universal。

要建立你的Universal應用，只需要執行以下指令：

ng build --app=<name>

#App Shell

額外加入的功能是對App Shell的支持。現在你可以產生和建立一個應用程式shell，它使用Universal來為你的應用程式建立一個靜態的首次渲染在你的index.html頁面中。當你的應用程式正在啟動時，這會給用戶更好的體驗。

首先，確保在你的應用程式中的NgModule中有一個RouterModule的模組被導入，以及有一個在你應用組件的模組中。 App Shell使用路由來渲染你的應用程式。

執行以下命令：

ng generate app-shell [ --universal-app <universal-app-name>] [ --route <route>]

透過傳遞app-shell參數，將主應用程式的all shell的支援加入到你的angular-cli.json檔案中。如果Universal應用程式沒有通過，則第一次執行Universal Schematic的時候會建立一個Universal應用程式。路由參數指定了在生成應用期間產生的路由配置。 （App Shell需要有路由的支援）。預設是/shell。

完成這一步之後，只需要使用ng build就可以正常建立應用程序，index.html檔案將包含自動渲染的路由。

改進的裝飾器錯誤訊息

#由編譯器產生的診斷已經得到了明顯的改善，特別是當裝飾器包含不支援或不正確的表達式的時候。

例如：呼叫一個函數來處理模板是不支援的。

@Component({
 template: genTemplate()
})

這是以前會產生的錯誤：

Error encountered resolving symbol values statically. Calling function ‘genTemplate', function calls are not supported. Consider replacing the function or lambda with a reference to an exported function, resolving symbol MyComponent in components.ts, resolving symbol MyComponent in components.ts

這個錯誤已經得到改善，並澄清了問題的來源和性質。

component.ts(9,16): Error during template compile of 'MyComponent'.
 Function calls are not supported in decorators but 'genTemplate' was called.

支援TypeScript 2.5

我們已經新增了TypeScript 2.5的支持，這是所有的開發人員推薦的。這個TypeScript版本包含了幾個有用的進階功能。

你可以升級你的Typescript透過yarn add typescript@'~2.5.3'或npm install typescript@'~2.5.3'。

這個更新是可選的，TypeScript 2.4繼續支援Angular 5.X我們還不支援TypeScript 2.6。我們的計劃實在未來的次版本中添加支援。

重要提示：如果你的程式碼使用injector.get(Token)，Token有靜態成員，那麼你將會遇到TypeScript的問題，回傳的型別是｛｝而不是Token。你可以使用Injector.get(Token)來獲得爭取的回傳值。

上面是我整理給大家的，希望今後對大家有幫助。

相關文章：

js數組reduce的相關用法

#javascript如何使用replace函數

使用JavaScript如何實作音訊播放功能

使用js程式碼如何實作複製功能

使用tangram.js函式庫如何實作js類別

在JS中如何實現非首屏圖片延遲載入

#使用React如何防止重複渲染

在vue中如何實作directive功能

以上是詳細解讀Angular5.1新功能的詳細內容。更多資訊請關注PHP中文網其他相關文章！