05.25 angular6.0詳解

Angular 6 正式發佈

Angular 6 已經正式發佈了!這個主要版本並不關注於底層的框架,更多地關注於工具鏈,以及使 Angular 在未來更容易快速推進。

angular6.0詳解

作為發佈的一部分,我們同步了主要的框架包 (@angular/core, @angular/common, @angular/compiler, etc), Angular CLI, 以及 Angular Material + CDK。現在全部都是作為 6.0.0 發佈。我們理清了它們之間的兼容性。小的更新的補丁將會基於項目的需要發佈。

可以通過每個項目的變更清單來查看全部的內容:framework, material+cdk, cli.

1. ng update

ng update 是一個新的 CLI 命令,用於分析 package.json 並使用其關於 Angular 的知識來更新您的應用。請查看升級手冊來查看其行為。

不僅可以使用 ng update 來幫助您適配正確版本的依賴項,並保持依賴同步,而且第三方也可以使用 schematics來提供 update 腳本命令。如果您的某個依賴庫提供了 ng update 語法,在其有大更新的時候,就可以自動更新您的代碼了。

ng update 並不會替換您的包管理器,而是使用 npm 或者 yarn 在底層管理依賴,然後更新依賴,ng update 將對您的項目進行必要的轉換。

例如,ng update @angular/core 將會更新所有的 Angular 框架包,比如:RxJS 和 TypeScript,並運行這些包中可用的 schematics 來保持最新。作為命令的一部分,我們將會自動安裝 rxjs-compat 到您的應用中以平滑遷移。

我們期待更多的庫和包在隨後支持 ng update 語法,我們已經 聽到一些企業庫的團隊在計劃使用 ng update 來自動更新重要的變更升級,以減少開發時間。

學習更多關於如何使用 ng update, 開始學習如何創建您自己的 ng update 語法,可以參考 rxjs 的 package.json 的入口,它關聯了 collection.json。

2. ng add

另一個新的 CLI 命令是 ng add,它可以使您添加新包變得更加容易。ng add 將使用您的包管理器來下載新的依賴項,並運行安裝腳本(以 schematics 實現)。通過配置文件來更新項目。添加額外的依賴項(例如 polyfill 等),或者執行包特定的初始化代碼。

可以在您的使用 ng new 創建的新項目上試一下下面的命令:

ng add @angular/pwa, 通過為您的應用添加 manifest 文件和 service worker 將其轉換為 PWA 項目

ng add @ng-bootstrap/schematics, 將 ng-bootstrap 添加到項目中

ng add @angular/metarial, 安裝與設置 Angular Metarial ,並使用 ng generate 添加新的啟動組件。

ng add @clr/angular@next, 從 VMWare 安裝和設置 Clarity。

ng add @angular/elements, 為 Angular elements 安裝 document-register-element.js 和依賴項。

由於 ng add 基於 schematics 和 Npm ,我們希望庫和社區支持我們構建一個 ng add 支持包的生態圈。

請查看 Angular Metarial 的 ng add schemetic,作為示例來幫助您開始創建您自己的 ng add。

3. Angular Elements

第一個版本的 Angular Elements 支持您在現有的 Angular 應用中通過註冊 Angular Component 作為自定義元素。我們在 angular.io 內容管理系統中使用這種擴展能力,通過嵌入 HTML 來支持動態。這替換掉了手動啟動 Angular 組件。

請查看註冊 Angular Component 作為 custom element,或者學習更多的 Angular Elements.

已經有一個社區成員發佈了 Angular Elements Quick Start, 我們非常建議您參考。

4. Angular Metarial + CDK component

最大的更新是增加了新的 tree 組件以顯示層次結構,遵循 table 組件的模式,CDK 支持了核心 tree 指令,Angular Metarial 通過 Metarial Design 提供了一致的體驗,我們最近提供了一個關於它的內容,可以參考(video, slide ).新的 tree 組件有兩種風格:(Metarial 風格)mat-tree 和未修飾的版本 cdk-tree

除了 tree 組件之外,我們還提供了 badge 和 bottom-sheet-components。徽章用於顯示小的幫助信息。例如未讀項目數量等等,Bottom-sheet 是移動設備專用的對話框,通常用於提供一系列動作的選項。

@angular/cdk/overlay 是 CDK 中非常有用的包,在新的 v6 版中,其包含新的定位邏輯,以在各種場景下幫助彈出。

5. Angular Metarial Starter Components

一旦您執行 ng add @angular/metarial 將 Metarial 添加到您的項目中,您將得到 3 個新的 starter 組件:

angular6.0詳解

Metarial SideNav

您現在可以生成一個包含 app 名稱的 toolbar 和邊欄導航的起步組件。

執行

ng generate @angular/material:material-nav

將會生成這樣的起步組件。

angular6.0詳解

Metarial Dashboard

您可以生成一個包含動態表格的卡片列表 。

執行

ng generate @angular/material:material-dashboard

可以生成這樣的組件。

angular6.0詳解

Material Data Table

您可以生成支持排序、分頁的預配置 datasource 的數據表組件。

執行

ng generate @angular/material:material-table

將會生成這樣的組件。

angular6.0詳解

在這裡查看更多資料:Angular Material Schematics

6. CLI Workspaces

Angular CLI v6 現在支持包含多個項目的工作空間,比如多個應用或者庫。CLI 項目現在將使用 angular.json 來替代 .angular-cli.json 進行配置和構建。

每個 CLI 可以有多個項目,每個項目有 target, 每個 target 有配置文件。

angular6.0詳解

{

"projects": {

"my-project-name“: {

"projectType": "application",

"architect": {

"build": {

"configurations”: {

"production": {},

"demo": {},

"staging": {},

}

},

"serve": {},

"extrace-i18n": {},

"test": {},

}

},

"my-project-name-e2e": {}

}

}

angular6.0詳解

更多信息請參考:新的配置文件。

7. 庫的支持

被廣泛請求的一個 CLI 特性現在支持了:創建和構建庫。我很榮幸介紹它。

ng generate library

angular6.0詳解

該命令將會在您的 CLI 工作空間創建一個庫項目,並配置其測試和構建。

更多信息請參考:使用 Angular CLI 創建庫

8. Tree Shakable 提供器

為使您的應用尺寸更小,我們從模塊引用服務變成了服務引用模塊。這使得我們可以僅僅打包模塊中注入到代碼中的服務。

以前

@NgModule({

...

providers: [ MyService ]

})

export class AppModule {}

其中,服務的定義

import { Injectable } from '@angular/core';

@Injectable()

export class MyService {

constructor() {}

}

以後的用法

不需要在模塊中引用。

angular6.0詳解

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

angular6.0詳解

更多信息,參考依賴注入。


分享到:


相關文章: