Angular 是最流行的 Web 应用程序开发框架之一。随着 Angular 7 的发布,它为 Web 开发人员带来了更多功能,包括核心框架、Angular Material、与主要版本保持同步的 CLI 和 工具 链,并且还有了几个主要合作伙伴。

依赖更新
TypeScript 3.1
       在使用 Angular 7 时,必须使用 TypeScript 的最新版本。

RxJS 6.3
      Angular 7 添加了最新版本的 RxJs(6.3.3),带来了一些令人兴奋的补充和变更。这些变更带来了性能提升,并且让开发人员        更易于调试调用栈,并改进了模块化,同时尽可能向后兼容。

Node 10
       具有向后兼容性

CLI提示
Angular CLI 已经更新到 v7.3.4,添加了一些新的功能。在运行像 ng new 或者 ng add @angular/material 命令的时候,CLI 将会提示用户,是否添加路由,使用那种css预处理器等类似的提示。以帮助我们发现其内置的一些功能。

CLI提示已添加到Schematics中,因此任何发布Schematics的包都可以通过向Schematics集合添加x-prompt来利用它们。

"routing": {

"type": "boolean",

"description": "Generates a routing module.",

"default": false,

"x-prompt": "Would you like to add Angular routing?"

}

应用程序性能
持续我们对性能的关注,我们分析了整个生态的常见错误。我们发现许多开发者在产品中包含了 reflect-metadata 包,它仅仅在开发中才需要。

为了处理该问题,作为版本 7 升级的一部分,将会自动从你的 polyfills.ts 中删除它,在 JIT 模式构建应用的时候会作为其中一步包含,默认会从产品构建中删除该 polyfile。

对于版本 7,我们还对 CLI 中的新项目获得打包的好处。在初始包大于 2M 的时候,新的应用将会警告,如果是 5M 则会报错。这些限额可以在 angular.json 中很容易修改。

"budgets": [{

"type":"initial",

"maximumWarning":"2mb",

"maximumError":"5mb"

}]

这些限额可以获益于 Chrome 的 Data Saver 特性并显示给用户。

Angular Material & the CDK
Material Design 在 2018 年获得一个大的升级。Angular Material 用户升级到版本 7 会与 material Design 规范有些小的变化。

新加入到 CDK 中,你可以通过导入 DragDropModule 或者 ScrollingModule 来获取虚拟滚动和拖拽功能。

虚拟滚动

虚拟滚动基于列表的可见部分从DOM中加载和卸载元素,使得有可能为拥有非常大的可滚动列表的用户构建非常快速的体验。

<cdk-virtual-scroll-viewport itemSize="50" class="example-viewport">
<div *cdkVirtualFor="let item of items" class="example-item">{{item}}</div>
</cdk-virtual-scroll-viewport>

注意区分虚拟滚动和无限滚动的区别。

拖动

CDK现在支持拖放功能,并且包括当用户移动元素时的自动渲染、用于列表重新排序( moveItemInArray )和在列表之间移动元素( transferrarrayitem)的辅助方法。

<div cdkDropList class="list" (cdkDropListDropped)="drop($event)">
<div class="box" *ngFor="let movie of movies" cdkDrag>{{movie}}</div>
</div>
drop(event: CdkDragDrop<string[]>) {
moveItemInArray(this.movies, event.previousIndex, event.currentIndex);
}

angular DoBootstrap
它用于引导需要引导组件的模块。Angular 7 增加了一个新的生命周期钩子(ngDoBootstrap)和接口(DoBootstrap)。

提高Selects的可访问性
通过在mat-form-field中使用原生select元素来提高应用程序的可访问性。原生select具有一些性能、可访问性和可用性优势,但是我们保留mat-select,它可以完全控制选项的呈现。

了解有关mat-select和mat-form-field字段的更多信息。

合作伙伴发布
Angular的成功很大程度上归功于社区

Angular Console — 一个可下载的控制台,用于在本地机器上启动和运行Angular项目
@angular/fire — AngularFire在NPM上有了一个新的家,并首次为Angular发布了稳定的版本
NativeScript — 现在可以使用NativeScript一套代码适配Web端和移动端
StackBlitz — StackBlitz 2.0 已经发布,现在包括了 Angular Language Service和更多的功能,比如多个Tab页同时编辑
如何升级到Angular 7
如果要将应用程序从Angular 6更新到Angular 7,请在项目文件夹中运行以下命令:

ng update @angular/cli @angular/core

angular7新特性的更多相关文章

  1. SQL Server 2014 新特性——内存数据库

    SQL Server 2014 新特性——内存数据库 目录 SQL Server 2014 新特性——内存数据库 简介: 设计目的和原因: 专业名词 In-Memory OLTP不同之处 内存优化表 ...

  2. ElasticSearch 5学习(10)——结构化查询(包括新特性)

    之前我们所有的查询都属于命令行查询,但是不利于复杂的查询,而且一般在项目开发中不使用命令行查询方式,只有在调试测试时使用简单命令行查询,但是,如果想要善用搜索,我们必须使用请求体查询(request ...

  3. [干货来袭]C#6.0新特性

    微软昨天发布了新的VS 2015 ..随之而来的还有很多很多东西... .NET新版本 ASP.NET新版本...等等..太多..实在没消化.. 分享一下也是昨天发布的新的C#6.0的部分新特性吧.. ...

  4. CSS3新特性应用之结构与布局

    一.自适应内部元素 利用width的新特性min-content实现 width新特性值介绍: fill-available,自动填充盒子模型中剩余的宽度,包含margin.padding.borde ...

  5. 【译】Meteor 新手教程:在排行榜上添加新特性

    原文:http://danneu.com/posts/6-meteor-tutorial-for-fellow-noobs-adding-features-to-the-leaderboard-dem ...

  6. 跨平台的 .NET 运行环境 Mono 3.2 新特性

    Mono 3.2 发布了,对 Mono 3.0 和 2.10 版本的支持不再继续,而且这两个分支也不再提供 bug 修复更新. Mono 3.2 主要新特性: LLVM 更新到 3.2 版本,带来更多 ...

  7. Atitit opencv版本新特性attilax总结

    Atitit opencv版本新特性attilax总结 1.1. :OpenCV 3.0 发布,史上功能最全,速度最快的版1 1.2. 应用领域2 1.3. OPENCV2.4.3改进 2.4.2就有 ...

  8. es6 新特性2

    es6其他几个非常有用的新特性. import export 这两个家伙对应的就是es6自己的module功能. 我们之前写的Javascript一直都没有模块化的体系,无法将一个庞大的js工程拆分成 ...

  9. ES6 新特性

    ECMAScript 6(以下简称ES6)是JavaScript语言的下一代标准.因为当前版本的ES6是在2015年发布的,所以又称ECMAScript 2015. 也就是说,ES6就是ES2015. ...

随机推荐

  1. 管中窥豹——框架下的SQL注入 Java篇

    管中窥豹--框架下的SQL注入 Java篇 背景 SQL注入漏洞应该算是很有年代感的漏洞了,但是现在依然活跃在各大漏洞榜单中,究其原因还是数据和代码的问题. SQL 语句在DBMS系统中作为表达式被解 ...

  2. VS Code中无法识别npm命令

    今天在VS Code中执行npm install命令时报了“'npm' 不是内部或外部命令,也不是可运行的程序或批处理文件”的错误. 首先检查环境变量是否配置正常: 系统变量中NODE_PATH,变量 ...

  3. Mysql学习笔记整理之选用B+tree结构

    为什么mysql不使用平衡二叉树? 数据处的深度决定着他的IO操作次数,IO操作耗时大 每一个磁盘块保存的数据量太小 B+Tree和B-Tree的区别? B+树几点关键字搜索采用闭合区间 B+树非叶节 ...

  4. 算法与数据结构基础 - 深度优先搜索(DFS)

    DFS基础 深度优先搜索(Depth First Search)是一种搜索思路,相比广度优先搜索(BFS),DFS对每一个分枝路径深入到不能再深入为止,其应用于树/图的遍历.嵌套关系处理.回溯等,可以 ...

  5. There is a cycle in the hierarchy解决

    前言: 在一次项目中,分页查询公告列表信息后,在遍历查询到的公告列表时出现了死循环“There is a cycle in the hierarchy”错误,分析原因是因为在公告实体类中包含了商铺对象 ...

  6. 【产品】PM常用的流程图

    一.流程图分类 UML有很多种,大体可以分类两类:行为型的图和结构型的图.平时工作中的流程图,只要能把事情清晰的表明,用何种流程图表现形式,其实都无所谓. 但是,作为一名产品经理,共有哪些种类的流程图 ...

  7. kotlin系列文章 --- 3.条件控制

    if表达式 一个if语句包含一个布尔表达式和一条或多条语句 // 基础用法 var max = a if (a<b) max = b // 加上else var max: Int if(a> ...

  8. 关于MySQL的经典例题50道

    --1.学生表Student(S,Sname,Sage,Ssex) --S 学生编号,Sname 学生姓名,Sage 出生年月,Ssex 学生性别--2.课程表 Course(C,Cname,T) - ...

  9. 移动端border-radius的几个BUG

    个人博客: http://mcchen.club 一.Android 2.3 自带浏览器不支持 % 通常我们实现一个正圆只需要border-radius: 50%即可,大致代码如下 .foo { wi ...

  10. idea中添加Run Dashboard

    可以在工程目录下找到.idea文件夹下的workspace.xml,在其中加入以下代码即可: <component name="RunDashboard"> <o ...