Angular 7 刚刚发布,虽然它看起来有点新功能,但有一些非常有趣的新工具变化以及一些很棒的功能来提高性能。并且延续了以前版本的最新趋势,升级是轻而易举的事情(实际上比以往任何时候都快)。
新增功能
下面的列表只是对此版本中新功能的简短总结,但请确保您找到了[进一步阅读](# 进一步阅读)部分,并查看此版本提供的更多功能!
命令行界面提示
Angular团队一直专注于改进开发人员可用的工具,新的CLI提示符也没有什么不同。通常,当你运行像ng new
或ng add
这样的命令时,它是一个单一的过程。忘记包含路由?啊,真倒霉。想要跳过安装?好吧,我想你可以终止命令了。
不是新的CLI。现在,CLI将使用提示符进行响应。简单地尝试'ng new myangular 7app',你会得到什么?一个全新的提示,询问您是否要添加路由。想要尝试不同的样式表格式吗?别担心CLI将允许您在CSS
、SCSS
、SASS
和更多(或实际上是LESS
HA!)之间进行选择。好消息是,它是可定制的!使用Schematic CLI添加一个schematic.json,你可以告诉Angular CLI哪个提示执行!在[further reading](# furtherreading)部分找到更多关于原理图的信息。
角质CDK
ScrollingModule
随着许多移动框架开始向动态加载数据(如图片或长列表)的方向发展,Angel也紧随其后,添加了ScrollingModule‘来支持虚拟滚动。当元素获得或失去可见性时,它们将从DOM中虚拟加载和卸载。极大地提高了用户的视觉性能。下一次你有一个可能很大的项目列表供你的用户滚动时,把它放在一个
cdk-虚-scroll-viewport`组件中,并利用性能提升!
拖放模块
现在,您可以完全保留在Angular Material模块中,并实现拖放支持,包括重新排序列表和在列表之间传输项目。CDK包括自动渲染、拖动处理程序、放置处理程序,甚至传输数据的能力。不喜欢标准的拖动动画?没问题.这是Angular,你可以覆盖它
至于Angular Material本身,版本7附带了一些更新的组件样式,以遵循新的Material Design规范。
应用性能
首先,Angular 7比以前的版本更快。升级更快(根据官方公告,许多应用程序不到10分钟),框架更快,上面详细介绍的虚拟滚动CDK模块使应用程序运行更好的性能。
这就是事情变得有趣的地方:Angel不仅致力于使框架尽可能小,它还致力于使您的应用程序尽可能小!他们已经更正了一个常见的生产错误,即在生产中包括了反射元数据填充。V7会自动删除它。
新项目现在也默认使用预算捆绑包 ,当你的应用程序达到大小限制时,它会通知你。默认情况下,内存达到2MB时会收到警告,内存达到5MB时会出现错误。当您需要更多空间时,只需跳转到angular.json并根据需要进行调整。
1"budgets": [{
2 "type": "initial",
3 "maximumWarning": "2mb",
4 "maximumError": "5mb"
5}]
更新依赖关系
Angular升级到Typescript 3.1,RxJS升级到6.3,Node 10支持已经添加!请查看中的发行说明([进一步阅读](# further-reading)中的链接)。
常春藤呈现器
下一代ready-when-it-ready渲染器...还没完全准备好Angular团队不会承诺最终的时间轴,但开发仍在进行中。他们注意到向后兼容性验证正在开始,虽然没有官方团队成员发表评论,但一些提交的狂热追随者希望在V7的生命周期内推出一个完整的测试版,并可能与版本8一起发布。在官方的Angular repo下,自己在GitHub Ivy Rendererissue上跟踪进度。最好的消息?他们完全期望Ivy可以在一个小版本中发布,只要它经过充分的测试和验证。谁知道呢也许我们会在V7中看到它。
升级
这还能更简单吗?
对于大多数ANGLE应用程序,假设您已经在ANGLE 6和RxJS6]上运行,您只需运行一条命令:
1$ ng update @angular/cli @angular/core
如果你使用的是Angular Material,只需执行以下命令:
1$ ng update @angular/material
如果有些地方看起来有点不对劲,请务必访问更新指南),查看是否需要任何特殊命令。
进一步阅读
确保你了解更多关于7号角星的资源:
- Angular 7 官方公告.
- Angular 7 CLI documentation.
- [Schematics]简介(https://blog.angular.io/schematics-an-introduction-dc1dfbc2a2b2)。
- 阅读更多关于虚拟滚动和拖放的内容。
- Angular Update Guide.
- Typescript 3.1 版本说明。
- RxJS 6.3 CHANGELOG.
- Node 10 支持.