4

经历了6个RC版本之后,今天Angular发布了4.0.0版本,这次发布是主版本的更新(遵循采用语义版本),并且在大多数情况下,Angular4.0版本是向后兼容Angular2.0的。

那么,这次Angular4版本主要更新了什么呢?

  • 体积更小,速度更快
    Angular应用程序变得更小更快,并且在未来几个月将进一步改进框架。

  • 更好的模板引擎
    改进了AoT,将生成的代码的大小减少约60%。如果模板越复杂,那么优化的代码也会越多。(译者注:当然,这对于用户来说,完全是透明的,public api 没有发生变化。)

  • 动画模块改进
    将动画从@angular/core中分离开来,区分核心模块与动画模块,精简核心模块体积。

再来看看Angular4给我们带来了哪些新的特性。

  • 增强 ngIf 和 ngFor 语法
    模板绑定语法进行了几个有用的更改。现在可以使用if / else样式语法,并分配局部变量,例如在展开observable时。

<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)
    原先的Angular Universal是社区人员维护的,后被angular官方采用。目前在4.0.0版本中,将大部分的代码集成在@angular/platform-server模块中。为大家带来更好的服务端渲染体验,更简单Api调用。请参见基于Angular4的服务端渲染demo: https://github.com/z827101859/angular-universal 。之后,官方会为大家带来更好更全面的例子。

  • TypeScript 2.1 和 2.2 的兼容
    Angular已更新为更新版本的TypeScript,提高了ngc的速度,并且有更好的类型检查机制。

  • 模板的Source Maps
    当模板中的某些内容发生错误时,Angular会生成源映射,从而为原始模板提供有意义的上下文。


更多内容,请参见Angular官方原文:
http://angularjs.blogspot.hk/2017/03/angular-400-now-available.html


最后,给想要学习Angular的同学一个Angular4的模板项目,项目结合webpack进行打包,包含了当前Angular框架中的许多新特性,喜欢的同学不妨开始从这里学习:https://github.com/ntesmail/angular-webpack-template
  1. git clone git@github.com:ntesmail/angular-webpack-template.git

  2. npm install (由于你懂的原因,这一步你可能会安装失败,这时候大家只能翻墙咯)

  3. npm run start

转载请申明@sweetyx


sweetyx
194 声望20 粉丝