<dl id="3wz6h"></dl><li id="3wz6h"></li>

      1. <dl id="3wz6h"></dl>

      2. <dl id="3wz6h"><ins id="3wz6h"></ins></dl>

            <dl id="3wz6h"></dl>

            <dl id="3wz6h"><ins id="3wz6h"></ins></dl>
            1. 
              
              <output id="3wz6h"><ins id="3wz6h"><nobr id="3wz6h"></nobr></ins></output>

              <li id="3wz6h"><ins id="3wz6h"></ins></li>
              
              

            2. <output id="3wz6h"><ins id="3wz6h"><nobr id="3wz6h"></nobr></ins></output>
              首頁»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條評論
              登錄會員中心
              云南十一选往期