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,一经查实,立即删除!

相关文章

bootstrap五星评分_如何用纯代码实现评分星级显示?

showRatingStars/*** showRatingStars 显示评分星级* param {Object} myCanvas 画布对象* param {Number} rating 评分* param {Number} counts star个数* param {Number} size star大小* param {Object} style star样式* Example: style {* borderColor:"#21DEEF",…

18.变量

Java是一种强类型语言&#xff0c;每个变量都必须声明其类型。 Java变量是程序中最基本的存储单元&#xff0c;其要素包括变量名&#xff0c;变量类型和作用域。 变量在使用前必须对其声明&#xff0c;只有在变量声明以后&#xff0c;才能为其分配相应长度的存储单元。 注意事项…

alertdialog android api 11,android – 设备api级别11的DialogFragments

我设法在兼容包的DialogFragment.java中正确修复了这个问题&#xff1a;改变第74行&#xff1a;boolean mShowsDialog false;注释掉第232行&#xff1a;// mShowsDialog mContainerId 0;然后将两个show方法更改为&#xff1a;public void show(FragmentManager manager, Str…

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;我们公司…

机器人 树莓派 自闭症_用机器人孩子提高社交能力 让自闭儿童走出自闭

一项由耶鲁大学的研究团队研究发现&#xff0c;通过让患有自闭症谱系障碍(autism spectrum disorders,ASD)的孩童与机器人相处一个月&#xff0c;极大地提高了自闭症儿童的社交能力。耶鲁大学研究中的机器人可以通过眼神接触和模仿其它社交行为&#xff0c;通过讲故事和互动游戏…

19.常量-final

final 常量 final修饰&#xff0c;只能被初始化一次。 public static void main(String[] args){final int a3;a4;//报错/*TestVariable.java:7: 错误: 无法为最终变量a分配值a4;^ 1 个错误*/}常量一般用大写来修饰。 ------------- 更多的Java&#xff0c;Angular&#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;关注就送。 本文介…

nuxt页面跳转_nuxt 项目如何解决组件复用时页面不刷新的问题

组件复用会在两种情况下发生&#xff1a;1、使用 keep-alive 时&#xff0c;页面再次跳转时&#xff0c;数据不更新每一次路由的切换都会导致页面被重新渲染&#xff0c;无论是各种钩子还是异步获取数据函数都会被执行&#xff0c;为了提高网站性能&#xff0c;可以使用 keep-a…

20.命名规范

所有变量&#xff0c;方法&#xff0c;类名&#xff1a;见名知意 变量&#xff0c;方法名 --首字母小写和驼峰原则。 如&#xff1a;run(),getName() 常量 ---大写字母和下划线&#xff1a;MAX_VALUE 类名 ---首字母大写和驼峰原则。 如&#xff1a;Man,HelloWorld ------…

k8s查看pod的yaml文件_K8s-yaml的使用及命令

YAML配置文件管理对象对象管理&#xff1a;# 创建deployment资源kubectl create-f nginx-deployment.yaml# 查看deploymentkubectl get deploy# 查看ReplicaSetkubectl get rs# 查看pods所有标签kubectl get pods--show-labels# 根据标签查看podskubectl get pods-l appnginx# …

Orange Business Services 全球发布 Easy Go Network,帮助企业加速实现“网络即服务”...

100% 数字化, 软件定义网络( SDN) 产品在 75 个国家上市 在云、移动化、大数据和物联网&#xff08;IoT&#xff09;趋势的推动下&#xff0c;企业不断寻求更加智能和更加灵活的网络&#xff0c;以支持他们的数字化转型方案。而网络只有演进至“网络即服务”&#xff08;NaaS&a…

vue的html自动刷新,Vue页面刷新记住页面状态的实现

环境vue项目&#xff0c;页面有搜索、筛选项等。需求页面跳转&#xff0c;切换或者刷新&#xff0c;希望可以记住用户在页面的筛选状态方案v1vue有提供一种缓存组件的解决方案 — keep-alive。缓存不活动的组件实例&#xff0c;而不是销毁它们。我们可以使用keep-alive包括路由…

python 程序停止打印日志_Python日志打印

简单示例import sysimport ctypesimport loggingimport logging.handlersreload(sys)sys.setdefaultencoding(utf-8)LOG_FILE test_loglogging.basicConfig(filename LOG_FILE,format %(asctime)s - %(levelname)s -%(process)d- %(filename)s:%(funcName)s:%(lineno)d - %(…

21.和和instance of

>> 右移一位。相当于除2 << 左移一位。相当于乘2 public static void main(String[] args) {int a3<<2;int b12>>2;System.out.println("a"a);System.out.println("b"b);}解析&#xff1a; a3*2*212 b12/2/23 运行结果&#xf…

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

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

keyshot怎么贴logo_如何使用KeyShot添加有织纹的Logo

如果你的产品上有企业logo&#xff0c;那么将logo作为一种材质(如镀铬贴纸)就很常见了&#xff0c;但不是在3D里建模logo&#xff0c;建模logo会产生额外的工作&#xff0c;还会降低建模的效率&#xff0c;不过KeyShot提供了一种简单的方法&#xff0c;可以更快地实现相同的效果…