0

0

详细解读Angular5.1新功能

亚连

亚连

发布时间:2018-06-19 14:39:24

|

1731人浏览过

|

来源于php中文网

原创

这篇文章主要介绍了angular5.1新功能以及相关的用法,需要的朋友参考学习下吧。

本篇文章通过介绍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。

CLI1.6 改进Universal和App Shell支持

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

Angular Universal

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

npm generate universal 

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

动力先锋仿阿里巴巴B2B电子商务系统
动力先锋仿阿里巴巴B2B电子商务系统

前台功能介绍:1、网页首页显示有高级会员推荐,精品推荐,商业机会分类列表,最新供求信息,网站动态,推荐企业,行业动态等;2、商业机会栏目功能有:二级分类,已经带有详细分类的数据库,后台可以更改增加操作,并可以推荐公司,栏目分为分类显示信息,最新的采购、供应、合作和代理信息,搜索时同样按分类,信息,时间,交易类型等搜索;3、展厅展品栏目功能:二级分类,已经带有详细分类的数据库,后台可以更改增加操作,

下载

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

ng build --app=

App Shell

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

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

运行以下命令:

ng generate app-shell [ --universal-app ] [ --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。我们的计划实在未来的次版本中添加支持。

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

上面是我整理给大家的,希望今后会对大家有帮助。

相关文章:

js数组reduce的相关用法

javascript中如何使用replace函数

使用JavaScript如何实现音频播放功能

利用js代码如何实现复制功能

使用tangram.js库如何实现js类

在JS中如何实现非首屏图片延迟加载

使用React如何防止出现重复渲染

在vue中如何实现directive功能

相关专题

更多
php源码安装教程大全
php源码安装教程大全

本专题整合了php源码安装教程,阅读专题下面的文章了解更多详细内容。

7

2025.12.31

php网站源码教程大全
php网站源码教程大全

本专题整合了php网站源码相关教程,阅读专题下面的文章了解更多详细内容。

4

2025.12.31

视频文件格式
视频文件格式

本专题整合了视频文件格式相关内容,阅读专题下面的文章了解更多详细内容。

7

2025.12.31

不受国内限制的浏览器大全
不受国内限制的浏览器大全

想找真正自由、无限制的上网体验?本合集精选2025年最开放、隐私强、访问无阻的浏览器App,涵盖Tor、Brave、Via、X浏览器、Mullvad等高自由度工具。支持自定义搜索引擎、广告拦截、隐身模式及全球网站无障碍访问,部分更具备防追踪、去谷歌化、双内核切换等高级功能。无论日常浏览、隐私保护还是突破地域限制,总有一款适合你!

7

2025.12.31

出现404解决方法大全
出现404解决方法大全

本专题整合了404错误解决方法大全,阅读专题下面的文章了解更多详细内容。

42

2025.12.31

html5怎么播放视频
html5怎么播放视频

想让网页流畅播放视频?本合集详解HTML5视频播放核心方法!涵盖<video>标签基础用法、多格式兼容(MP4/WebM/OGV)、自定义播放控件、响应式适配及常见浏览器兼容问题解决方案。无需插件,纯前端实现高清视频嵌入,助你快速打造现代化网页视频体验。

4

2025.12.31

关闭win10系统自动更新教程大全
关闭win10系统自动更新教程大全

本专题整合了关闭win10系统自动更新教程大全,阅读专题下面的文章了解更多详细内容。

3

2025.12.31

阻止电脑自动安装软件教程
阻止电脑自动安装软件教程

本专题整合了阻止电脑自动安装软件教程,阅读专题下面的文章了解更多详细教程。

3

2025.12.31

html5怎么使用
html5怎么使用

想快速上手HTML5开发?本合集为你整理最实用的HTML5使用指南!涵盖HTML5基础语法、主流框架(如Bootstrap、Vue、React)集成方法,以及无需安装、直接在线编辑运行的平台推荐(如CodePen、JSFiddle)。无论你是新手还是进阶开发者,都能轻松掌握HTML5网页制作、响应式布局与交互功能开发,零配置开启高效前端编程之旅!

2

2025.12.31

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
PostgreSQL 教程
PostgreSQL 教程

共48课时 | 6.3万人学习

Django 教程
Django 教程

共28课时 | 2.6万人学习

Excel 教程
Excel 教程

共162课时 | 10.2万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号