Angular5.1新功能分享


Posted in Javascript onDecember 21, 2017

本篇文章通过介绍Angular5.1新特性给大家详细分享了的5.1改进和增加的内容,以下是全部内容:

新特性

Angular Material和CDK稳定版

CLI中支持Service Worker

在CLI中改进了Universal和AppShell的支持

改进了装饰器的错误信息

支持TypeScript2.5

有关功能和bug修复的完整列表,请参阅Angular,Material和CLI的更新日志。

Angular Material和CDK稳定版

在发布了11个alpha版本,12个beta版本以及3个候选版本之后,我们很高兴现在能够标记Angular Material和Angular CDK的5.0.0的稳定版。基于Google的Material Design视觉设计语言,Angular Material提供了30个UI组件给你的Angular应用。组合使用Angular CDK,Angular CDK(组件开发工具包)提供了一组构建模块,帮组您构建自己的定制组件,而不需要再次解决常见问题。这些组件已经被许多GOogle应用程序(包括Google Analytics套件,Google云平台开发人员控制台以及Google Shopping Express)用于生产。

从这个版本开始,Angular Material将遵循与Angular相同的语义化哲学,主版本的Angular Materital和Angular CDK同时作为其它平台的主版本发布。bug修复的版本将按照每周的迭代进行,而次版本将在功能完成时发布。

访问matrial.angular.io获取文档,演示和我们的入门指南。你还可以在Github上跟进我们的进度,因为我们将继续为框架添加更多类容。在接下来的几个月中,请关注诸如新的mat-tree,virtual scrolling,组件测试套件以及拖放功能。

CLI1.6的Service Worker支持

性能一直是Web开发人员的一个重要目标,在今天的局域网WIFI和移动网络事件中,性能一直是一个重要的目标。现代浏览器有一个新的API用于构建可靠且快速加载的站点,称为Service Worker API。

Angular5.0.0附带了一个为Angular应用程序定制的新的Service Worker实现,而Angular CLI 1.6包含了支持利用这个新特性构建应用的功能。使用@angular/service-worker可以提升你的应用的加载性能在支持该API的浏览器中,以及使你的应用的加载体验更像是本地app。

在我们的文档网站中,学习更多关于Angular Service的内容。

CLI1.6 改进Universal和App Shell支持

此外,随着Angular CLI1.6的发布,更好的通过Schematics将Universal添加到你现有的项目中,并为App Shell提供支持。

Angular Universal

添加Universal到你当前的CLI项目中,你可以在你的项目目录下使用下面的命令:

npm generate universal <name>

用你想给你的应用程序的名字替换<name>。这将会采用你采用的应用程序,并创建一个通用的模块,并为你自动配置你的angular-cli.json文件。然后你可以跳到我们的指南中的第4步使用Universal。

要构建你的Universal应用,只需要运行以下命令:

ng build --app=<name>

App Shell

额外添加的功能是对App Shell的支持。现在你可以生成和构建一个应用shell,它使用Universal来为你的应用构建一个静态的首次渲染在你的index.html页面中。当你的应用程序正在启动时,这会给用户更好的体验。

首先,确保在你的应用中的NgModule中有一个RouterModule的模块被导入,以及有一个<router-outlet></router-outlet>在你应用组件的模块中。App Shell使用路由来渲染你的应用。

运行以下命令:

ng generate app-shell [ --universal-app <universal-app-name>] [ --route <route>]

通过传递app-shell参数,将对主应用程序的all shell的支持添加到你的angular-cli.json文件中。如果Universal应用没有通过,则第一次运行Universal Schematic的时候会创建一个Universal应用。路由参数指定了在生成应用期间生成的路由配置。(App Shell需要有路由的支持)。默认是/shell。

完成这一步之后,只需要使用ng build就可以正常构建应用程序,index.html文件将包含自动渲染的路由。

改进的装饰器错误信息

由编译器产生的诊断已经得到了明显的改善,特别是当装饰器包含不支持或不正确的表达式的时候。

例如:调用一个函数来处理模板是不支持的。

@Component({
 template: genTemplate()
})

这是以前会产生的错误:

Error encountered resolving symbol values statically. Calling function ‘genTemplate', function calls are not supported. Consider replacing the function or lambda with a reference to an exported function, resolving symbol MyComponent in components.ts, resolving symbol MyComponent in components.ts

这个错误已经得到改善,并澄清了问题的来源和性质。

component.ts(9,16): Error during template compile of 'MyComponent'.
 Function calls are not supported in decorators but 'genTemplate' was called.

支持TypeScript 2.5

我们已经添加了TypeScript 2.5的支持,这是所有的开发人员推荐的。这个TypeScript版本包含了几个有用的高级功能。

你可以升级你的Typescript通过yarn add typescript@'~2.5.3'或者npm install typescript@'~2.5.3'。

这个更新是可选的,TypeScript 2.4继续支持Angular 5.X我们还不支持TypeScript 2.6。我们的计划实在未来的次版本中添加支持。

<stong>重要提示:</stong>如果你的代码使用injector.get(Token),Token有静态成员,那么你将遇到TypeScript的问题,返回的类型是{}而不是Token。你可以使用Injector.get<Token>(Token)来获得争取的返回值。

Javascript 相关文章推荐
javascript中String类的subString()方法和slice()方法
May 24 Javascript
分享一个自己动手写的jQuery分页插件
Aug 28 Javascript
JavaScript中原型和原型链详解
Feb 11 Javascript
JS实现光滑展开合拢的菜单效果代码
Sep 16 Javascript
jQuery表格行上移下移和置顶的实现方法
Oct 08 Javascript
JavaScript使用DeviceOne开发实战(二) 生成调试安装包
Dec 01 Javascript
jquery根据一个值来选中select下的option实例代码
Aug 29 Javascript
浅谈vue-router2路由参数注意的问题
Nov 08 Javascript
Vue2.0+Vux搭建一个完整的移动webApp项目的示例
Mar 19 Javascript
Vue中消息横向滚动时setInterval清不掉的问题及解决方法
Aug 23 Javascript
vue开发简单上传图片功能
Jun 30 Javascript
JavaScript中layim之整合右键菜单的示例代码
Feb 06 Javascript
vue2中的keep-alive使用总结及注意事项
Dec 21 #Javascript
webpack写jquery插件的环境配置
Dec 21 #jQuery
基于Vue 2.0的模块化前端 UI 组件库小结
Dec 21 #Javascript
使用Bootstrap4 + Vue2实现分页查询的示例代码
Dec 21 #Javascript
详解设置Webstorm 利用babel将ES6自动转码成ES5
Dec 20 #Javascript
代码详解Vuejs响应式原理
Dec 20 #Javascript
详解Javascript 中的 class、构造函数、工厂函数
Dec 20 #Javascript
You might like
php的一些小问题
2010/07/03 PHP
PHP中多维数组的foreach遍历示例
2014/06/13 PHP
PHP中phar包的使用教程
2017/06/14 PHP
微信公众号实现扫码获取微信用户信息(网页授权)
2019/04/09 PHP
因str_replace导致的注入问题总结
2019/08/08 PHP
jQuery 使用手册(四)
2009/09/23 Javascript
Firefox/Chrome/Safari的中可直接使用$/$$函数进行调试
2012/02/13 Javascript
js实现仿Windows风格选项卡和按钮效果实例
2015/05/13 Javascript
浅谈jQuery中replace()方法
2015/05/13 Javascript
javascript实现设置、获取和删除Cookie的方法
2015/06/01 Javascript
Labelauty?jQuery单选框/复选框美化插件分享
2015/09/26 Javascript
基于jQuery通过jQuery.form.js插件实现异步上传
2015/12/13 Javascript
深入浅析AngularJS中的module(模块)
2016/01/04 Javascript
老生常谈JavaScript数组的用法
2016/06/10 Javascript
JavaScript判断是否是微信浏览器
2016/06/13 Javascript
vue.js+Echarts开发图表放大缩小功能实例
2017/06/09 Javascript
vue2路由方式--嵌套路由实现方法分析
2020/03/06 Javascript
python高并发异步服务器核心库forkcore使用方法
2013/11/26 Python
Python使用Flask框架获取当前查询参数的方法
2015/03/21 Python
Python实现将罗马数字转换成普通阿拉伯数字的方法
2017/04/19 Python
Python中scatter函数参数及用法详解
2017/11/08 Python
unittest+coverage单元测试代码覆盖操作实例详解
2018/04/04 Python
Python3.7中安装openCV库的方法
2018/07/11 Python
python3.7 openpyxl 删除指定一列或者一行的代码
2019/10/08 Python
opencv3/C++图像像素操作详解
2019/12/10 Python
python 字典item与iteritems的区别详解
2020/04/25 Python
无需压缩软件,用python帮你操作压缩包
2020/08/17 Python
使用CSS3编写类似iOS中的复选框及带开关的按钮
2016/04/11 HTML / CSS
Debenhams爱尔兰:英国知名的百货公司
2017/01/02 全球购物
Merrell迈乐澳大利亚网站:购买户外登山鞋
2017/05/28 全球购物
Raleigh兰令自行车美国官网:英国凤头牌自行车
2018/01/08 全球购物
合伙开公司协议书范本
2014/10/28 职场文书
2019年特色火锅店的创业计划书模板
2019/08/28 职场文书
60句有关成长的名言
2019/09/04 职场文书
导游词之鲁迅祖居
2019/10/17 职场文书
Python 正则模块详情
2021/11/02 Python