首頁»JavaScript»Angular 6發布,新功能詳解

                    Angular 6發布,新功能詳解

                    來源:覃云 發布時間:2018-05-09 閱讀次數:

                      5月4日,Angular 6.0.0正式發布,新版本重點關注工具鏈以及工具鏈在Angular中的運行速度問題。

                      這次更新還包括框架包(@angular/core,@angular/common,@angular/compiler等)、Angular CLI、Angular Material + CDK,這主要是為了解決兼容問題,這些項目的補丁版本將根據項目需求發布。

                      ng update

                      ng update <package>是一種新的CLI命令,它可分析你的package.json,并基于對Angular的了解向你的應用程序推薦更新。

                      ng update可以幫助你使用正確版本的依賴包,讓你的依賴包與你的應用程序同步,使用schematics時,第三方還能提供腳本更新。如果你的某個依賴包提供了ng update schematic,那么它在進行重大更改時會自動更新代碼!

                      ng update不會取代你的軟件包管理器,而是在后臺使用npm或yarn來管理依賴包,除了更新和監視依賴包外,ng update還會在必要的時候對你的項目進行改造。

                      例如,命令ng update @angular/core將會更新所有的Angular包以及RxJS、FTypeScript,它還將在這些包中運行可用的schematics以保證版本是最新的。同時,這個命令還能自動安裝rxjs-compat到你的應用程序中,以使RxJS v6更加流暢。

                      ng add

                      另一項新的CLI命令ng add <package>將使你的項目更容易添加新功能。ng add使用軟件包管理器來下載新的依賴包并調用安裝腳本,它可以通過更改配置和添加額外的依賴包(如polyfills)來更新你的應用。

                      你可在新的ng new應用程序中嘗試以下動作:

                    • ng add @angular/pwa:添加一個app manifest 和service worker,將你的應用程序變成PWA。
                    • ng add @ng-bootstrap/schematics:將ng-bootstrap添加到你的應用程序中。
                    • ng add @angular/material:安裝并設置Angular Material和主題,注冊新的初級組件 到ng generate中。
                    • ng add @clr/[email protected]:安裝設置VMWare Clarity。

                      Angular Elements

                      Angular Elements的第一個版本專注于在現有的Angular應用程序中啟動Angular組件,方法是將它們注冊為Custom Elements,目前已被廣泛用于angular.io內容管理系統中,它嵌入HTML,可動態啟動系統功能。

                      Angular Material + CDK 組件

                      最值得一提的是用于顯示分層數據的樹形控件,遵循數據表組件的模式,CDK包含樹的核心指令,而Angular Material則提供與頂層的Material Design樣式相同的體驗。

                      于此同時,還更新了徽章(badge)和底部菜單欄的組件,徽章用于顯示小而有用的信息,例如未讀信息的數量。

                      目前,@angular/cdk/overlay軟件包是CDK最強大的基礎架構之一,你可以利用他們來構建自己的UI庫。

                      Angular Material 初級組件

                      一旦運行ng add @angular/material并添加材料到現有的應用程序中,就能夠生成3個新的初級組件。

                      Material Sidenav

                      Material Sidenav是帶有應用程序名稱和側面導航的工具欄的初級組件,它基于斷點窗口(breakpoints)進行響應。

                      運行:

                    ng generate @angular/material:material-nav

                      會生成以下組件:

                      Material Dashboard

                      Material Dashboard是包含動態網格列表的啟動組件。

                      運行:

                    ng generate @angular/material:material-dashboard

                      會生成以下組件:

                      Material Data Table

                      Material Data Table已預配置了一個用于排序和分頁的datasource。

                      如下圖:

                      CLI Workspaces

                      CLI v6現已支持多項目工作區,如多個應用程序或庫,CLI項目用angular.json取代angular-cli.json構建和配置項目。

                      每個CLI工作區都有項目,每個項目都有目標,每個目標都可以有配置。

                    angular.json:
                    {
                      "projects": {
                        "my-project-name": {
                          "projectType": "application",
                          "architect": {
                            "build": {
                              "configurations": {
                                "production": {},
                                "demo": {},
                                "staging": {},
                              }
                            },
                            "serve": {},
                            "extract-i18n": {},
                            "test": {},
                          }
                        },
                        "my-project-name-e2e": {}
                      },
                    }
                    

                      庫支持

                      接下來介紹CLI最重要的一項功能:支持創建和構建庫。

                    ng generate library 

                      該命令將在CLI工作區內創建一個庫,并對其進行配置以進行測試和構建。

                      Tree Shakable Providers

                      為了讓你的應用更小,我們將服務引用模塊改為模塊引用服務,這讓我們只需要構建在模塊里注入的服務。

                      之前:

                    app.module.ts:
                    @NgModule({
                      ...
                      providers: [MyService]
                    })
                    export class AppModule {}
                    
                    my-service.ts:
                    import { Injectable } from '@angular/core';
                    @Injectable()
                    export class MyService {
                      constructor() { }
                    }
                    

                      以后,NgModule不再需要引用:

                    my-service.ts
                    import { Injectable } from '@angular/core';
                    @Injectable({
                      providedIn: 'root',
                    })
                    export class MyService {
                      constructor() { }
                    }
                    

                      動畫性能提升

                      更新后,以后將不再需要網頁動畫polyfill。這意味著你可以從應用程序中刪除此polyfill,可以節省大約47KB的內存,同時提高Safari中的動畫性能。

                      RxJS v6

                      RxJS v6也將被Angular 6使用,RxJS v6于上個月發布。RxJS v6帶來了一個向后兼容的軟件包rxjs-compat,它可以讓你的應用程序保持運行。

                      RxJS已重新安排,使其更具樹型動搖性,確保只有你使用的RxJS部分能放置在生產bundle中。

                      長期支持(LTS)

                      Angular表示他們正在將長期支持版本擴展到所有主版本中。

                      之前只有v4和v6是LTS版本,但為了使開發者從一個主版本更新到另一個主版本更容易,并給更多的項目充足時間來規劃更新,Angular團隊表示從v4開始,將擴大對所有主版本的長期支持。

                      每個主版本的支持時間是18個月,其中,前6個積極開發階段,接下的12個月是錯誤修正和安全補丁階段。

                      如何更新到Angular 6.0.0

                      請訪問更新指南,以獲取更新指導。

                      更新通常遵循3個步驟,請使用新ng update工具:

                    • 更新@ angular / cli
                    • 更新你的Angular框架包
                    • 更新其他依賴包

                      鏈接

                      原文鏈接:

                      https://blog.angular.io/version-6-of-angular-now-available-cc56b0efa7a4

                      更新指南:

                      https://update.angular.io/

                      Angular官方公告:

                      https://angular.io/guide/releases

                    QQ群:WEB開發者官方群(515171538),驗證消息:10000
                    微信群:加小編微信 849023636 邀請您加入,驗證消息:10000
                    提示:更多精彩內容關注微信公眾號:全棧開發者中心(fsder-com)
                    網友評論(共0條評論) 正在載入評論......
                    理智評論文明上網,拒絕惡意謾罵 發表評論 / 共0條評論
                    登錄會員中心
                    福彩试机号今天 16027足彩任九奖金 七星彩票app下载安装 二分彩计划走势图 吉林快3预测推荐号码 波叔一波中特第零零011期 天津时时彩开奖号码 开奖直播现场手机开奖 北京快三一定牛走势图l 福建彩票大奖那里领 重庆时时彩能刷龙虎吗 广西11选5大小走势图 小财神3d彩票走势图 象棋什么吃什么 福彩排列七综合走势图 体彩十一运夺金