写点什么

Angular 6 发布,新功能详解

2018 年 5 月 07 日

看新闻很累?看技术新闻更累?试试下载 InfoQ 手机客户端,每天上下班路上听新闻,有趣还有料!

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 <name></name>

该命令将在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

2018 年 5 月 07 日 19:003577
用户头像

发布了 83 篇内容, 共 41.8 次阅读, 收获喜欢 182 次。

关注

评论

发布
暂无评论
发现更多内容

「干货总结」程序员必知必会的十大排序算法

bigsai

排序 排序算法 快速排序

距离 2020 年结束不到2个月,字节跳动员工却在闲鱼卖内推名额登上热搜!

Java架构师迁哥

uml图中各种线的关系

feiyun123

极客大学架构师训练营 UML

MyBatis-技术专题-拦截器原理探究

李浩宇/Alex

26张图带你彻底搞懂volatile关键字的底层实现

autoencoder

volatile 后端 多线程 并发 Java 分布式

从数据仓库双集群系统模式探讨,看GaussDB(DWS)的容灾设计

华为云开发者社区

数据库 数据仓库 数据

京东集团技术委员会主席周伯文:推进产业数智化发展需要技术和生态两把“桨”

京东科技开发者

区块链 大数据 AI 物联网,

五年时间完成业务数字化转型,华为如今做得怎么样了?

华为云开发者社区

效率 提升 数字化

成德眉资现代农业园区大联动促发展,“1链3e”引领四市农业产业数字化建设

CNG农业公链

物化视图如何快速完成数据聚合操作?

VoltDB

数据库 数据分析 sql

2020年10月北京BGP机房网络质量评测:流水的其他,铁打的世纪互联?

BonreeAPM

机房 评测

.net5发布,.NET会就此“支棱起来”吗?

Philips

.net 敏捷开发 .net core

关于 AWS Lambda 中的冷启动,你想了解的信息都在这!

donghui

Serverless Faas 函数计算

推荐几款MySQL相关工具

Simon

MySQL 工具 percona server

Mybatis日志功能是如何设计的?

Java架构师迁哥

区块链医疗、电子票据应用落地开发解决方案

t13823115967

电子票据 区块链医疗

重点人员管控系统开发方案,智慧警务平台搭建

WX13823153201

大厂经验:一套Web自动曝光埋点技术方案

阿亮

埋点 曝光埋点 点击埋点 自动化埋点

SpringBoot-技术专题-如何提高吞吐量

李浩宇/Alex

前端高效开发必备的 js 库梳理

徐小夕

Java GitHub 前端 js

跨语言跨平台聚合OpenAPI文档从来没有这么简单过

Trust Me

OpenAPI Knife4j Knife4jAggregation 微服务聚合OpenAPI

MySQL-技术专题-LEFT JOIN避坑指南

李浩宇/Alex

数字化时代App们将何去何从?

fino星君

区块链技术应用开发、区块链版权应用搭建解决方案

t13823115967

区块链技术应用开发 区块链版权搭建解决方案

京东智能客服品牌焕新:“言犀”亮相2020京东JDD大会

京东科技开发者

大数据 AI 知识图谱

阿里内部11月最新出台Spring Cloud架构设计+程序开发+运维部署

Java架构追梦

Java 阿里巴巴 架构 微服务 SpringCloud

最详尽最通俗易懂的c/c++堆栈机制解读

linux亦有归途

堆栈 C/C++ 堆栈溢出

以 Kubernetes 为代表的容器技术,已成为云计算的新界面

阿里巴巴云原生

云计算 Kubernetes 容器 云原生

中小型企业创业的福音

anyRTC开发者

创业 音视频 WebRTC RTC

京东千亿订单背后的纵深安全防御体系

京东科技开发者

安全 网络 云服务 云安全

2020年9月北京BGP机房网络质量评测:天地祥云木樨园力压群芳终进前三

BonreeAPM

机房 评测

Angular 6发布,新功能详解-InfoQ