1. <em id="2qvri"><tr id="2qvri"></tr></em>
      1. 首頁»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條評論
        登錄會員中心
        江苏快3投注技巧