角度的 v5的新增功能

塔瓦什·阿格瓦尔

 

F

让我澄清一下,我们不称其为angular 5,我们知道当angularJS移至angular 2时发生了很多事情。但是,是的,从现在开始,它只是角度。与其他框架相似。因为我们不将react称为react 1或react2。以下是Angular v5附带的一些新功能。

 

  1. 角度的 CLI 1.5现在将安装Angular v5
  2. 打字稿从2.3更新到2.4
  3. RXJS已更新5.5

有一些改进,新发行版也作为版本5的一部分完成。以下是Angular v5附带的新功能。

构建优化器

构建优化器用于创建较小的包。基本上,它可以提高性能。

默认情况下启用AOT

在开发模式下,较早的应用程序使用即时(JIT)编译,而当我们进入生产模式时,则使用AOT编译模式。原因是在角度v5发行之前AOT编译非常慢,因此增加了开发工作。但是现在,我们将从开发到生产的整个过程中都拥有AOT编译模式。

观看模式:

替换我们通常在TypeScript项目中使用的tsc

ngc --watch or ngc -w

渐进式Web应用

目前,angular的主要重点是渐进式Web应用程序。角度v5只是给人一种渐进式应用程序的感觉。还有很多工作要做,而专职团队仍在努力进行改进。

新的HTTP客户端

现在有一个新的软件包可用于处理HTTP请求:

import {HttpClientModule} from '@angular/common/http';

代替

import {HttpClientModule} from '@angular/http';  // It is getting depreciated

也有新包装

map(res=> res.json()) 

不再需要。

下面的代码:

const headers = new HttpHeaders().set('', '');
const params = new HttpParams().set('', '');
return this.http.get('/api/service', { headers, params });

现在可以用HTTP新包替换为如下所示。

const headers = { '': '' };
const params = { '': '' };
return this.http.get('/api/service', { headers, params });

形式改进

angular v5也支持提交时的表单验证。

<!-- Update on submit -->
<form [ngFormOptions]= "{updateOn : 'submit'}">

<!-- Update on blur -->
<input type="text" name="firstName" [ngFormOptions]= "{updateOn : 'blur'}" />

国际化的编号,日期和货币管道

角度的 v5具有新的数字,日期和货币管道,从而提高了浏览器的标准化程度,并消除了对i18n polyfills库的需求。现在,新的数字,日期和货币依赖 CLDR .

路由器中的新生命周期事件

路由器软件包中添加了许多生命周期事件,以处理各种情况,例如在加载子组件时显示加载器。

新事件是:

  1. GuardsCheckStart
  2. ChildActivationStart
  3. 激活开始
  4. GuardsCheckEnd
  5. 解决开始
  6. 解决结束
  7. 激活结束
  8. ChildActivationEnd。

RxJs进口

之前我们需要导入RxJs组件,如下所示:

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/filter';

但是现在在Angular v5中,我们可以简单地将其导入,如下所示:

import { Observable } from 'rxjs/Observable';
import { map, filter } from 'rxjs/operators';

角度的 Universal State Transfer API和DOM支持

现在,您可以更轻松地在服务器版本和客户端版本之间共享应用程序状态。

在Angular v5中,Angular团队添加了ServerTransferStateModule和相应的BrowserTransferStateModule。该模块允许生成信息作为平台服务器渲染的一部分,然后将其传输到客户端,因此无需重新生成此信息。

到目前为止,周围没有太多文档,因此我不确定该功能。但是是的,此功能存在于angular v5中。

exportAs

支持您的组件/指令的多个名称。假设如果需要开发人员在不破坏现有代码的情况下为组件或指令提供新名称,则可以使用exportAs功能来实现此目的,如以下代码所示:

@Component({
    moduleId: module.id,
    selector: 'code-test',
     exportAs : 'codeTest, codeDone',
    templateUrl : './code-test.component.html
})

保留空白

假设我们有两个标签,如下所示:

<app-demo></app-demo>  <app-demo></app-demo>

如我们所见,两个HTML标记之间有一个空格,因此在DOM中,我们也可以照常看到该空格。但是现在在Angular 5中,如果我们不想显示该空间,可以按如下所示配置它:

@Component({
     selector : 'app-demo',
     templateUrl : './app-demo.component.html,
     preserveWhitespaces: false
)}

我们可以如上所示在组件级别进行设置。另外,我们可以全局设置它:

platformBrowserDynamic().bootstrapModule(AppModule, { preserveWhitespaces: false });

默认情况下,在Angular v5中,preserveWhitespaces的默认值为true。

如果将preserveWhitespaces设置为false,那么这是一个要求,那么我们还需要添加空间,然后可以如下所示添加它:

<app-demo></app-demo>&ngsp;<app-demo></app-demo>

区域速度改善

要绕过区域,请使用“ noop”作为ngZone引导您的应用程序:

platformBrowserDynamic().bootstrapModule(AppModule, {ngZone: 'noop'}).then( ref => {} );

除了上面指定的更改外,Angular v5中还有许多与性能和错误修复相关的更改。 

如果您在下面的评论部分中有任何疑问,请告诉我。

作者信息

塔瓦什·阿格瓦尔

网站: http://tavishaggarwal.com

塔瓦什·阿格瓦尔 是一名数据科学家 在海得拉巴工作,在解决电子商务,金融,医疗保健等不同领域的实际业务问题方面拥有丰富的经验。 他对技术充满热情,并且热爱团队合作。