Angular 6釋出，新功能詳解

覃雲發表於2018-05-09
Angular

　　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/angular@next：安裝設定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

相關文章