<li id="2aw4k"></li>
  • <div id="2aw4k"><tr id="2aw4k"></tr></div>
  • <div id="2aw4k"><tr id="2aw4k"></tr></div>
    <center id="2aw4k"><small id="2aw4k"></small></center><center id="2aw4k"><small id="2aw4k"></small></center>
    首頁»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條評論
    登錄會員中心
    大乐透彩票预测
    <li id="2aw4k"></li>
  • <div id="2aw4k"><tr id="2aw4k"></tr></div>
  • <div id="2aw4k"><tr id="2aw4k"></tr></div>
    <center id="2aw4k"><small id="2aw4k"></small></center><center id="2aw4k"><small id="2aw4k"></small></center>
    <li id="2aw4k"></li>
  • <div id="2aw4k"><tr id="2aw4k"></tr></div>
  • <div id="2aw4k"><tr id="2aw4k"></tr></div>
    <center id="2aw4k"><small id="2aw4k"></small></center><center id="2aw4k"><small id="2aw4k"></small></center>