Angular7:新特性的升级和总结
Angular 7 刚刚发布,虽然它看起来对新功能有点轻描淡写,但有一些非常有趣的新工具更改以及一些用于提高性能的强大功能。 并延续以前版本的最新趋势,升级轻而易举(实际上比以往更快)。
添加和新功能
下面的列表只是此版本中新功能的简短摘要,但请确保您找到通往 进一步阅读 部分的方法,并查看此版本提供的更多内容!
CLI 提示
Angular 团队一直致力于改进开发人员可用的工具,新的 CLI 提示也不例外。 通常,当您运行 ng new
或 ng add
之类的命令时,它是单程的。 忘记包含路由? 啊,艰难的休息。 想要跳过安装? 好吧,我想你可以终止命令。
不使用新的 CLI。 现在 CLI 以提示响应。 只需尝试 ng new myangular7app
,你会得到什么? 一个全新的提示,询问您是否要添加路由。 想尝试不同的样式表格式吗? 不用担心。 CLI 将允许您在 CSS
、SCSS
、SASS
和更多(或者实际上是 LESS
HA!)之间进行选择。 好消息,它是可定制的! 使用 Schematic CLI 添加一个 schematic.json ,您可以告诉 Angular CLI 提示执行哪个! 在 进一步阅读 部分中了解有关原理图的更多信息。
Angular 材质 CDK
滚动模块
由于许多移动框架已经开始朝着动态加载数据(例如图像或长列表)的方向发展,Angular 也效仿,添加了 ScrollingModule
以允许虚拟滚动。 随着元素获得或失去可见性,它们实际上会从 DOM 加载和卸载。 性能大大提高到用户的眼中。 下次当您有一个可能很大的项目列表供用户滚动时,请将其粘贴到 cdk-virtual-scroll-viewport
组件中并利用性能提升!
拖放模块
现在,您可以完全保留在 Angular Material 模块中并实现拖放支持,包括重新排序列表和在列表之间传输项目。 CDK 包括自动呈现、拖动处理程序、放置处理程序,甚至传输数据的能力。 不喜欢标准的拖动动画? 没有汗水。 这是角; 这是你的覆盖。
至于 Angular Material 本身, 版本 7 带有一些更新的组件样式,以遵循新的 Material Design 规范。
应用程序性能
首先要做的事:Angular 7 比以前的版本更快。 升级更快(根据官方公告,很多应用不到10分钟),框架更快,上面详述的虚拟滚动CDK模块使应用运行性能更好。
这就是事情变得有趣的地方:Angular 不仅致力于使框架尽可能小,它还致力于使您的应用程序尽可能小! 他们纠正了一个常见的生产错误,即 reflect-metadata polyfill 包含在生产中。 V7 会自动将其删除。
新项目现在也默认使用 Budget Bundles,当您的应用程序达到大小限制时,它会通知您。 默认情况下,当您达到 2MB 时会收到警告,在 5MB 时会收到错误消息。 当您需要更多空间时,只需跳入您的 angular.json 并根据需要进行调整。
"budgets": [{ "type": "initial", "maximumWarning": "2mb", "maximumError": "5mb" }]
更新的依赖项
Angular 升级到 Typescript 3.1,RxJS 升级到 6.3,并且添加了 Node 10 支持! 查看(进一步阅读中的链接)中的发行说明。
常春藤渲染器
下一代ready-when-it's-ready渲染器……还没有完全准备好。 Angular 团队不会承诺最终的时间表,但开发仍在进行中。 他们注意到向后兼容性验证已经开始,虽然没有官方团队成员发表评论,但一些狂热的提交者预计会在 V7 生命周期的某个时间推出完整的测试版,并可能与版本 8 一起正式发布。 在官方 Angular 存储库下的 GitHub Ivy Renderer 问题上自行关注进度。 最好的消息? 他们完全期望 Ivy 可以在次要版本中发布,只要它经过全面测试和验证。 那么谁知道呢? 也许我们最终会在 v7 中看到它。
升级
这会更容易吗?
对于大多数 Angular 应用程序,假设你已经在 Angular 6 和 RxJS 6 上运行,你只需要运行一个命令:
$ ng update @angular/cli @angular/core
如果您使用 Angular Material,只需执行以下命令:
$ ng update @angular/material
如果有些东西看起来有点不对劲,请确保您访问 更新指南 以查看是否需要任何特殊命令。
延伸阅读
确保您在下面查看更多 Angular 7 资源: