Angular v6 正式发布

Angular 6 正式发布

 Angular 6 已经正式发布了!这个主要版本并不关注于底层的框架,更多地关注于工具链,以及使 Angular 在未来更容易快速推进。

作为发布的一部分,我们同步了主要的框架包  (@angular/core, @angular/common, @angular/compiler, etc),  Angular CLI, 以及 Angular Material + CDK。现在全部都是作为 6.0.0 发布。我们理清了它们之间的兼容性。小的更新的补丁将会基于项目的需要发布。

可以通过每个项目的变更清单来查看全部的内容: framework, material+cdk, cli.

1. ng update

ng update <package>  是一个新的 CLI 命令,用于分析 package.json 并使用其关于 Angular 的知识来更新您的应用。请查看升级手册来查看其行为。

不仅可以使用 ng update 来帮助您适配正确版本的依赖项,并保持依赖同步,而且第三方也可以使用 schematics 来提供 update 脚本命令。如果您的某个依赖库提供了 ng update 语法,在其有大更新的时候,就可以自动更新您的代码了。

ng update 并不会替换您的包管理器,而是使用 npm 或者 yarn 在底层管理依赖,然后更新依赖,ng update 将对您的项目进行必要的转换。

例如,ng update @angular/core 将会更新所有的 Angular 框架包,比如:RxJS 和 TypeScript,并运行这些包中可用的 schematics 来保持最新。作为命令的一部分,我们将会自动安装 rxjs-compat 到您的应用中以平滑迁移。

我们期待更多的库和包在随后支持 ng update 语法,我们已经 听到一些企业库的团队在计划使用 ng update 来自动更新重要的变更升级,以减少开发时间。

学习更多关于如何使用 ng update , 开始学习如何创建您自己的 ng update 语法,可以参考 rxjs 的 package.json 的入口,它关联了  collection.json。

2. ng add

 另一个新的 CLI 命令是 ng add,它可以使您添加新包变得更加容易。ng add 将使用您的包管理器来下载新的依赖项,并运行安装脚本(以 schematics 实现)。通过配置文件来更新项目。添加额外的依赖项(例如 polyfill 等),或者执行包特定的初始化代码。

可以在您的使用 ng new 创建的新项目上试一下下面的命令:

  • ng add @angular/pwa, 通过为您的应用添加 manifest 文件和 service worker 将其转换为 PWA 项目
  • ng add @ng-bootstrap/schematics, 将 ng-bootstrap 添加到项目中
  • ng add @angular/metarial, 安装与设置 Angular Metarial ,并使用 ng generate 添加新的启动组件。
  • ng add @clr/angular@next, 从 VMWare 安装和设置 Clarity。
  • ng add @angular/elements, 为 Angular elements 安装 document-register-element.js 和依赖项。

由于 ng add 基于 schematics 和 Npm ,我们希望库和社区支持我们构建一个 ng add 支持包的生态圈。

请查看 Angular Metarial 的 ng add schemetic ,作为示例来帮助您开始创建您自己的 ng add。

3. Angular Elements

第一个版本的 Angular Elements 支持您在现有的 Angular 应用中通过注册 Angular Component 作为自定义元素。我们在 angular.io 内容管理系统中使用这种扩展能力,通过嵌入 HTML 来支持动态。这替换掉了手动启动 Angular 组件。

请查看注册 Angular Component 作为 custom element,或者学习更多的 Angular Elements.

已经有一个社区成员发布了 Angular Elements Quick Start, 我们非常建议您参考。

4. Angular Metarial + CDK component

最大的更新是增加了新的 tree 组件以显示层次结构,遵循 table 组件的模式,CDK 支持了核心 tree 指令,Angular Metarial  通过 Metarial Design 提供了一致的体验,我们最近提供了一个关于它的内容,可以参考(video, slide ).新的 tree 组件有两种风格:(Metarial 风格)mat-tree 和未修饰的版本 cdk-tree

除了 tree 组件之外,我们还提供了 badge 和 bottom-sheet-components。徽章用于显示小的帮助信息。例如未读项目数量等等,Bottom-sheet  是移动设备专用的对话框,通常用于提供一系列动作的选项。

@angular/cdk/overlay 是 CDK 中非常有用的包,在新的 v6 版中,其包含新的定位逻辑,以在各种场景下帮助弹出。

5. Angular Metarial Starter Components

一旦您执行 ng add @angular/metarial 将 Metarial 添加到您的项目中,您将得到 3 个新的 starter 组件:

Metarial SideNav

您现在可以生成一个包含 app 名称的 toolbar 和边栏导航的起步组件。

 执行

ng generate @angular/material:material-nav

 

将会生成这样的起步组件。

Metarial Dashboard

您可以生成一个包含动态表格的卡片列表 。

执行

ng generate  @angular/material:material-dashboard

 

可以生成这样的组件。

Material Data Table

您可以生成支持排序、分页的预配置 datasource 的数据表组件。

执行

ng generate  @angular/material:material-table

 

将会生成这样的组件。

在这里查看更多资料:Angular Material  Schematics

6. CLI Workspaces

Angular CLI v6 现在支持包含多个项目的工作空间,比如多个应用或者库。CLI 项目现在将使用 angular.json 来替代 .angular-cli.json 进行配置和构建。

每个 CLI 可以有多个项目,每个项目有 target, 每个 target 有配置文件。

{"projects": {"my-project-name“: {"projectType": "application","architect": {"build": {"configurations”: {"production": {},"demo": {},"staging": {},}},"serve": {},"extrace-i18n": {},"test": {},}},"my-project-name-e2e": {}}
}

 

更多信息请参考:新的配置文件。

7. 库的支持

被广泛请求的一个 CLI 特性现在支持了:创建和构建库。我很荣幸介绍它。

ng generate  library <name>

 

该命令将会在您的 CLI 工作空间创建一个库项目,并配置其测试和构建。

更多信息请参考:使用 Angular CLI 创建库

8. Tree Shakable 提供器

为使您的应用尺寸更小,我们从模块引用服务变成了服务引用模块。这使得我们可以仅仅打包模块中注入到代码中的服务。

以前

@NgModule({...providers: [ MyService ]
})
export class AppModule {}

 

其中,服务的定义

import { Injectable } from '@angular/core';@Injectable()
export class MyService {constructor() {}
}

 

以后的用法

不需要在模块中引用。

import { Injectable } from '@angular/core';@Injectable( {providedIn: 'root',
})
export class MyService {constructor() {}
}

 

更多信息,参考依赖注入。

9. 动画性能改进

我们已经更新了动画实现,不再需要 Web animations polyfill,这意味着您可以从应用中删除这个 polyfill,并节省大约 47K 的打包尺寸,同时提升了在 Safari 中的性能。

10. RxJS v6

Angular 已经升级到 RxJS v6。RxJS 是 Angular 的一个依赖项,其在几周前正式发布了 v6。RxJS v6 带来了多个重要的更新,还提供了反向兼容库 rxjs-compat,可以保持您的应用继续工作。

RxJS 进行了重新组织以便于 Tree shakable, 以确保只有用到的 RxJS 部分打包到应用中。

如果您使用 ng update, 您的应用将会保持工作,您可以从 RxJS 5.5 迁移到 6 得到更多信息。

11. 长期支持

我们扩展了我们的长期支持条款到所有主要发布版本。

以前,我们声明只有 v4-v6 是长期支持的版本。但是为了是的从某个主要版本升级到下一个更加容易,并给予大的项目更多的时间来计划升级,我们决定扩展到支持从 v4 开始的所有主要版本。

每个主要发布将会支持 18 个月,包括 6 个月的活动开发和 12 个月的关键 bug 修复和安全补丁。

更多信息可以参考 Angular 版本和发布。

12. 如何更新到 6.0.0

访问 update.angular.io 来得到升级应用的信息和指导。

升级通常包括 3 步,并可以从 ng update 工具获得好处。

  1. 升级 @angular/cli
  2. 升级 Angular 框架包
  3. 升级其它依赖

对于我们来说,让开发者保持最新版本的更新特别重要,所以,如果您有什么建议请让我们知道。

13. Ivy 怎么样了?

关于我们下一代的渲染引擎 Ivy,Ivy 当前处于开发阶段,还不是 v6 的一部分。在随后的几个月,我们将会宣告 Ivy 的一个预览版。

See Also

  • Version 6 of Angular Now Avaiable

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/538749.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

py 字典添加多个value_# Python 3 # Python 3字典Dictionary(1)

Python3 字典字典是另一种可变容器模型&#xff0c;且可存储任意类型对象。字典的每个键值(key>value)对用冒号(:)分割&#xff0c;每个对之间用逗号(,)分割&#xff0c;整个字典包括在花括号({})中 ,格式如下所示&#xff1a;d {key1 : value1, key2 : value2 }键必须是唯…

饶军:Apache Kafka的过去,现在,和未来

欢迎大家前往腾讯云社区&#xff0c;获取更多腾讯海量技术实践干货哦~ 本文首发在云社区&#xff0c;未经许可&#xff0c;不得转载。大家好&#xff0c;我大概简单的介绍一下&#xff0c;我叫饶军&#xff0c;我是硅谷的初创公司Confluent的联合创始人之一&#xff0c;我们公司…

Android手机avi转换为mp4手机,如何把avi转换为mp4

AVI是目前比较常见的一种音视频交错格式&#xff0c;这种格式的文件在多种地方是可以看到的&#xff0c;大多在游戏录制、光盘文件中可以见到此类文件。其画质不错&#xff0c;适合在电脑上观看&#xff0c;但是现在我们使用较多的是手机、iPad等设备。如果我们想要在这些设备上…

伪代码书写规范_C++代码书写规范(推荐新手程序员)

代码就是程序员的面子&#xff0c;无论是在工作中在电脑上写程序代码还是在面试时在纸上写演示代码我们都希望写出整洁&#xff0c;优雅的代码。特别在工作中当我们碰到需要维护别人的代码&#xff0c;或者是多人参与一个项目大家一起写代码的时候&#xff0c;如果碰到一些丑陋…

Java基础17:Java IO流总结

版权声明&#xff1a;本文为博主原创文章&#xff0c;未经博主允许不得转载。 https://blog.csdn.net/a724888/article/details/80201802 这位大侠&#xff0c;这是我的公众号&#xff1a;程序员江湖。 分享程序员面试与技术的那些事。 干货满满&#xff0c;关注就送。 本文介…

html语言闪烁特效代码,css3 文字闪烁特效代码

今天给大家分享几个文字闪烁特效代码&#xff0c;纯css3代码实现&#xff0c;对于新手小伙伴值得拿来学习一下。文字闪烁特效一通过改变透明度来实现文字的渐变闪烁&#xff0c;代码如下&#xff1a;文字闪烁&#xff1a;闪烁效果.main{color: #666;margin-top: 50px;}/* 定义k…

2021年山西副高考试成绩查询,中国卫生人才网2021年山西卫生资格考试成绩查询...

2021年山西卫生资格考试成绩查询 由中国卫生人才网考试快讯提供&#xff0c;以及提供2021国家卫生资格成绩查询考试信息。更多关于2021年山西卫生资格考试成绩查询 ,卫生资格考试,2021卫生资格考试,卫生资格成绩快讯的内容&#xff0c;请关注国家卫生资格考试网&#xff01;!20…

团队项目作业1-团队展示与选题

团队展示&#xff1a; 队名&#xff1a;summer 团队项目描述&#xff1a;基于java 、web的四则运算网站的开发&#xff0c;有三种角色&#xff1a;老师、家长、学生。老师在网站上发布四则运算作业&#xff0c;可以设置题目数量&#xff0c;数值范围、以及完成作业限定的时间。…

SP2-0734: 未知的命令开头 imp scott/... - 忽略了剩余的行。

原文地址&#xff1a;http://blog.csdn.net/yangwenxue_admin/article/details/47667943 Oracle数据导入报错&#xff1a;SP2-0734: 未知的命令开头 "imp scott/..." - 忽略了剩余的行。 原因&#xff1a;进入sqlplus里是不能执行imp的(sqlplus不认识imp)&#xff0c…

impdp导入dmp文件

impdp命令在cmd下直接用&#xff0c;不必登录oracle。只能导入expdp导出的dmp文件。 expdp导出的时候&#xff0c;需要创建 DIRECTORY 导出什么表空间&#xff0c;导入也要什么表空间。 导出什么用户&#xff0c;导入也要什么用户。 如果没有要新建。 从杭州服务器expdp导出…

高中技校学计算机,我没考上高中,英语数学极差,想上技校学计算机专业,玩代码的那种,有前途吗?...

我没考上高中&#xff0c;英语数学极差&#xff0c;想上技校学计算机专业&#xff0c;玩代码的那种&#xff0c;有前途吗&#xff1f;以下文字资料是由(历史新知网www.lishixinzhi.com)小编为大家搜集整理后发布的内容&#xff0c;让我们赶快一起来看一下吧&#xff01;我没考上…

html中函数传递多个值,JavaScript 实战开发经验!函数多参数传参技巧

HTML5学堂-码匠&#xff1a;掌握JavaScript代码的你&#xff0c;一定编写封装过函数&#xff0c;为了提升函数的控制性&#xff0c;必不可少的就是参数&#xff0c;必选可选的一大堆参数罗列出来&#xff0c;函数调用貌似变得麻烦起来~~~Tips&#xff1a;必选参数指的是必须要传…

软件工程学习笔记(考试版)

软 件 工 程 笔 记 第一章 一个软件产品必须由一个完整的配置组成&#xff0c;软件配置主要包括&#xff1a;程序&#xff0c;数据及相关文档。程序是能够完成预定功能和性能的可执行的指令序列&#xff1b;数据是使程序能够适当的处理信息的数据结构&#xff1b;文档是开发使…

印象笔记编辑pdf_笔记软件使用体验(至2020.03)

几年的时间&#xff0c;从OneNote到为知笔记&#xff0c;再到印象笔记&#xff0c;再回到为知笔记和OneNote&#xff0c;用下来感觉各有优势&#xff0c;也有不爽的地方。 早年间OneNote的同步很有问题&#xff0c;一次同步冲突导致失去了几乎所有笔记本。心灰意冷之下就离开了…

C#获取当前程序运行路径的方法集合

2019独角兽企业重金招聘Python工程师标准>>> // 获取当前进程的完整路径&#xff0c;包含文件名(进程名) Console.WriteLine(GetType().Assembly.Location "\tGetType().Assembly.Location"); // 获取新的 Process 组件并将其与当前活动的进程关联的主模…

Hive thrift服务--beeline使用

hive提供了thrift服务&#xff0c;只要客户端符合thrift标准就可以与它对接。 这样可以以在一台服务器上启动一个hive&#xff0c;其他用户通过thrift访问hive。 hive自带了一个thrift的客户端-------bin/beeline 启动方式&#xff1a; 1、hadoop的core-site.xml增加配置 &l…

vfp控制excel使用sort_使用Python根据索引合并Excel表

有两张不同大小的excel表表1&#xff1a;字典的选项值&#xff0c;2118行表2&#xff1a;字典名称&#xff0c;405行表1和表2有共同的列.现在需要根据共同的列&#xff0c;以表1为底&#xff0c;将表2的值对应添加到表1的每一行。下面是代码&#xff1a;1.加载相关的库import n…

Redis详解(三)

一、Redis集群介绍 Clustering:redis 3.0之后进入生产环境分布式数据库&#xff0c;通过分片机制来进行数据分布&#xff0c;clustering 内的每个节点&#xff0c;仅有数据库的一部分数据;去中心化的集群&#xff1a;redis集群中的每一个节点&#xff0c;都可以作为集群的接入节…

win10计算机从桌面消失了,Windows10家庭版程序窗口在桌面上消失了解决方法

相信大家对于电脑非常不陌生吧&#xff0c;当你遇到Win10程序窗口桌面上消失了怎么办这个问题该怎么解决吗&#xff1f;不知道了吧&#xff0c;接下来小编就以程序窗口时所遇到的Win10程序窗口桌面上消失了怎么办问题来给大家讲讲&#xff0c;看看小编是如何帮大家解决Win10程序…