Web前端框架Angular4.0.0 正式版发布


Posted in Javascript onMarch 28, 2017

前言

angular4.0.0正式版现在可以使用了。这是自我们宣布angular改版后,首次发布的专业版本。它向下兼容,支持所有使用了angular2.x.x版本的应用程序。

我们很高兴和大家分享这个版本,它包括最近的3个月中我们做的功能上的主要改进。我们努力让开发者们能够很容易的接受angular4.0.0。

新版本的特性

•更轻量化、更快

在这个新版本上,我们履行了我们的承诺,我们做到了让Angular的程序变的更轻量化,更快。但是我们还没有完全的优化完,在接下来的日子中,你会看到我们将着重于这方面的改进。

•视图引擎

我们在后台改变了生成的AOT代码样式。这个变化将减少大多数情况下生成的60%的组件代码。它可以使你自己的模板更个性化,复用率更高。

在我们新版本还没发布的时候,我们听到很多开发者认为如果他们将angular更新到4.0.0,angular4.0.0将会使他们的生产束将降低。为了更好的了解我们对视图引擎做的改进,欢迎阅读我们的开发文档。

•动画包

我们在@angular/core中新增了很多我们自己的动画效果包。这就意味着,你用或不用,动画包就在那里,不离不弃。

这个变化同样会让你更容易的找到文档,更好的实现自动完成。你也可以从@angular/platform-browser/animations中导入浏览器动画模型,以此来为你的主要模块实现你需要的动画效果。

新功能

•*ngIf和*ngFor的改进

我们的模块绑定语法现在支持一些有用的改进。你现在可以使用if/else这类风格的语法,并且局部变量支持类似下面的使用。

<div *ngIf="userList | async as users; else loading">
<user-profile *ngFor="let user of users; count as count" [user]="user">
</user-profile>
<div>{{count}} total users</div>
</div>
<ng-template #loading>Loading...</ng-template>

•Angular Universal

Universal,这个项目允许开发者在服务器上运行Angular,这是angular的所改即所见特性。这是angular团队通过的第一个来自于使用者,社区推动发展的一个项目。这个版本包括过去几个月内我们开发团队及社区开发者的,共同努力的结果。Angular的平台服务器部分包含了Universal的专业代码。

如果想了解更多的Augular的Universal,请查阅Angular/平台服务器中的一个新方法,renderModuleFactory,或者查看Rob Wormald的演示库。更多的文档和代码即将发布。

•TypeScript 2.1和2.2的兼容性

我们让Angular支持了最近的几个TypeScript的版本。这将会提升ngc的速度,此外,你的程序还将得到更好的类型检查。

•模块的源映射

当你的模块中的某个因素会造成错误时,我们会生成一个源映射,给出模块中产生错误的上下文位置。

包的变化

•Flat ES Modules (Flat ESM / FESM)

我们现在扁平化我们组件的版本(我们在EcmaScript模块通过格式化代码来控制版本,具体参见我们的示例文件)。这种行为将会帮助 你进行tree-shaking,帮助减少你的生产术的大小,加快编译,翻译,以及在某些情况下浏览器的加载。

•Experimental ES2015 Builds

我们现在也选择使用ES2015将我们的包扁平化,格式化。这种选择是带有实验性质和冒险进入的。开发商已经通报了,把这些包汇总将会增加7%的大小。尝试一下这些新的包,配置编译环境来解决包中的‘ec2015'属性。json超出了这些模块的属性。

•Experimental Closure Compatibility

现在我们所有的代码都有闭包注释,使其尽可能的利用先进的闭包优化,从而导致减小的束大小和更好的tree shaking代码优化。

更新4.0.0

更新到4.0.0是和你更新Angular支持包到最新版本一样简单,如果你想要动画的新特性,请检查两次。这将试用与大多数情况。

•Linux/Mac系统下更新:

npm install @angular/{common,compiler,compiler-cli,core,forms,http,platform-browser,platform-browser-dynamic,platform-server,router,animations}@latest typescript@latest --save

•window下更新:

npm install @angular/common@latest @angular/compiler@latest @angular/compiler-cli@latest @angular/core@latest @angular/forms@latest @angular/http@latest @angular/platform-browser@latest @angular/platform-browser-dynamic@latest @angular/platform-server@latest @angular/router@latest @angular/animations@latest typescript@latest --save

接着你就可以正常使用了,可以运行任意的ng服务或者ng命令,一切就都就绪了。

如果你依赖动画,可以在你的root NgModule下从@angular/platform-browser/animations模块中导入新的BrowserAnimationsModule类。

如果不需要动画,除了动画存在小问题,你的代码可以直接编译和运行。从Angular/core下引入包是过时的一种做法,正常的做法应该是从@angular/animations导入新的包,导入{ trigger, state, style, transition, animate }等。

如果你想看到更多改变你的应用程序需要的信息,你可以参考我们正在做的交互式更新指南。

已知问题

angular4的其中一个目标是使angular兼容TypeScript的strictNullChecks设置,使其支持一个更严格的子集类型的授权。我们发现在发布候选版时,我们需要做各种工作,来保证angular4在各种使用情况下都可以正常运行,所以为了防止应用程序中途停止运行,我们故意设置4.0版本不支持strictNullChecks。我们会很快解决这个问题的,预计在4.1版本,我们将支持strictNullChecks。(问题编号:15432)。

下一步呢?

和我们发布2.x版本的时间表一样,我们正在制定未来6个月的版本发布的工作计划。你很快就能看到4.0.0的补丁,并且我们已经在开发4.1版本了。我们将继续努力让Angular变的更小和更快,我们还会开发新的功能,比如说@angular/http,@angular/service-worker, and @angular/language-service的正式版本。

你也应该持续关注、更新我们的文档,一旦CLI稳定发布,我们将提供相应的架包作者的指导。

来源于angular4.0.0发布时的公告,译者:niithub

原文发布时间:Thursday, March 23, 2017

翻译时间:2017年3月24日

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。

Javascript 相关文章推荐
一些不错的js函数ajax
Aug 20 Javascript
Jquery 模板数据绑定插件的使用方法详解
Jul 08 Javascript
setTimeout()与setInterval()方法区别介绍
Dec 24 Javascript
JS保留两位小数,多位小数的示例代码
Jan 07 Javascript
Angular2 组件交互实例详解
Aug 24 Javascript
详解关于react-redux中的connect用法介绍及原理解析
Sep 11 Javascript
React Native验证码倒计时工具类分享
Oct 24 Javascript
详解vuejs2.0 select 动态绑定下拉框支持多选
Apr 25 Javascript
关于element-ui的隐藏组件el-scrollbar的使用
May 29 Javascript
vue webpack重写cookie路径的方法
Jul 10 Javascript
React Hooks 实现和由来以及解决的问题详解
Jan 17 Javascript
Vue的data、computed、watch源码浅谈
Apr 04 Javascript
JavaScript实现经纬度转换成地址功能
Mar 28 #Javascript
js实现多行文本框统计剩余字数功能
Mar 28 #Javascript
js实现下拉框效果(select)
Mar 28 #Javascript
vue2.0获取自定义属性的值
Mar 28 #Javascript
详解从Node.js的child_process模块来学习父子进程之间的通信
Mar 27 #Javascript
利用NPM淘宝的node.js镜像加速nvm
Mar 27 #Javascript
Vue中的v-cloak使用解读
Mar 27 #Javascript
You might like
php下载文件的代码示例
2012/06/29 PHP
php获取远程图片体积大小的实例
2013/11/12 PHP
PHP函数getenv简介和使用实例
2014/05/12 PHP
php求数组全排列,元素所有组合的方法
2016/05/05 PHP
javascript 添加和移除函数的通用方法
2009/10/20 Javascript
JavaScript的eval JSON object问题
2009/11/15 Javascript
将nodejs打包工具整合到鼠标右键的方法
2013/05/11 NodeJs
jQuery中width()方法用法实例
2014/12/24 Javascript
JavaScript中的object转换函数toString()与valueOf()介绍
2014/12/31 Javascript
html的DOM中document对象forms集合用法实例
2015/01/21 Javascript
jQuery+PHP实现可编辑表格字段内容并实时保存
2015/10/09 Javascript
js date 格式化
2017/02/15 Javascript
Vue ElementUi同时校验多个表单(巧用new promise)
2018/06/06 Javascript
仿ElementUI实现一个Form表单的实现代码
2019/04/23 Javascript
js对象简介与基本用法示例
2020/03/13 Javascript
JavaScript实现单点登录的示例
2020/09/23 Javascript
Vue-router中hash模式与history模式的区别详解
2020/12/15 Vue.js
Python函数中的函数(闭包)用法实例
2016/03/15 Python
Django实现登录随机验证码的示例代码
2018/06/20 Python
django+xadmin+djcelery实现后台管理定时任务
2018/08/14 Python
Python使用requests提交HTTP表单的方法
2018/12/26 Python
使用Keras实现简单线性回归模型操作
2020/06/12 Python
英国最大的高品质珠宝和手表专家:Goldsmiths
2017/03/11 全球购物
加拿大高尔夫超市:Golf Town
2018/01/12 全球购物
波兰补充商店:Muscle Power
2018/10/29 全球购物
日本即尚网:JSHOPPERS.com(支持中文)
2019/12/03 全球购物
给排水工程师岗位职责
2013/11/21 职场文书
机械制造专业个人的自我评价
2013/12/28 职场文书
火锅店营销方案
2014/02/26 职场文书
电大毕业个人生自我鉴定
2014/03/26 职场文书
委托公证书范本
2014/04/03 职场文书
2014年卫生工作总结
2014/11/27 职场文书
个性发展自我评价2015
2015/03/09 职场文书
教师节获奖感言
2015/07/31 职场文书
企业反腐倡廉心得体会
2015/08/15 职场文书
springboot读取nacos配置文件
2022/05/20 Java/Android