AI实践哪家强?来 AICon, 解锁技术前沿,探寻产业新机! 了解详情
写点什么

Angular 6 发布,新功能详解

  • 2018-05-07
  • 本文字数:2462 字

    阅读完需:约 8 分钟

看新闻很累?看技术新闻更累?试试下载 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-05-07 19:004512
用户头像

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

关注

评论

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

大数据在互联网时代的意义!

镭速

TiDB 中标杭州银行核心系统数据库项目

编程猫

java培训技术学习对学历有什么要求

小谷哥

数据库日常实操优质文章分享(含Oracle、MySQL等) | 2023年1月刊

墨天轮

数据库 oracle postgresql MySQL 运维 故障处理

亚马逊云科技核心服务之计算服务(Part1:Amazon EC2 星巴克为什么横向排队)

亚马逊云科技 (Amazon Web Services)

云原生 亚马逊云科技 Builder 专栏

百丈竿头,勠力同心丨九科信息CEO万正勇专访《数字助力赋能产业发展》在央视【中央新影-老故事】频道播出

九科Ninetech

小红书2023春节消费报告解读:大众消费意愿集中释放,表达和分享成为新经济消费诉求

易观分析

春节 小红书 消费

从理论到实践:MySQL性能优化和高可用架构,一次讲清

Java MySQL 数据库 性能优化

推进媒体深度融合:腾讯与上海文广集团达成战略合作,腾讯云、SMT成立联合实验室

科技热闻

互联网医疗领域月度观察——互联网医院可线上开具新冠处方,互联网首诊“破冰”

易观分析

疫情 互联网医疗

建设经营指标体系,国央企需要什么样的指标平台?

Kyligence

指标中台

AR Engine毫秒级平面检测,带来更准确的呈现效果

HarmonyOS SDK

HMS Core

MASA Stack 1.0 发布会讲稿——趋势篇

MASA技术团队

.net 云原生 dapr blazor MASA

快速上手python的简单web框架flask

程序那些事

Python flask Web Web框架 程序那些事

一张图看懂CodeArts TestPlan 5大特性,带你玩转测试服务

JVM 如何获取当前容器的资源限制?

阿里巴巴中间件

Java 阿里云 云原生 中间件

新泰山众筹SUN4.0系统开发模式详情

开发微hkkf5566

微众银行 TiDB HTAP 和自动化运维实践

PingCAP

TiDB 自动化运维

参加大数据开发培训机构怎么样

小谷哥

写给go开发者的gRPC教程-通信模式

凉凉的知识库

golang 微服务 gRPC 服务治理

大数据开发技术如何选择培训机构

小谷哥

面试必问:说一下 Java 虚拟机的内存布局?

王磊

java面试

Dubbo 3 之 Triple 流控反压原理解析

阿里巴巴中间件

阿里云 微服务 云原生

大数据编程培训课程怎么选择

小谷哥

C++数据结构

老浩

盘点2022:开源热度居高,技术思考与经验分享是开发者的最爱

阿里巴巴中间件

阿里云 中间件

Spring Cloud Alibaba 在 Proxyless Mesh 上的探索

阿里巴巴中间件

阿里云 S而vice Mesh Spring Cloud Aliababa

Apipost全局变量和环境变量的使用

popo223344

测试 测试工具 测试开发

解析机器学习中的数据漂移问题

Baihai IDP

人工智能 机器学习 AI 机器学习模型 企业号 2 月 PK 榜

一文梳理 Code Review 方法论与实践总结

阿里巴巴中间件

阿里云 云原生 Code Review

web前端培训班口碑比较好有哪些

小谷哥

Angular 6发布,新功能详解_语言 & 开发_覃云_InfoQ精选文章