角v2 vs角v4

Tavish Aggarwal.

 

A

ngular是由谷歌开发的,被认为是最好的开源JavaScript框架之一。

 

什么是角v2的新东西?

在Angular 2.x中制作的一些大变化是:

  1. 棱角 2专注于移动应用的发展。
  2. 从角度核心消除了许多像控制器和$范围,导致性能改进。
  3. ATScript用于开发角度2.x。

角3哪里?

你们都可能想知道在哪里是角3?实际上,由于路由器包版本中的错位,谷歌计划跳过角3。 

作为Angular / Router已经使用包版本3.x。因此,而不是将包保存为3.0和路由器到4.0谷歌决定直接切换到角度4,使所有包都一致。

 

不要担心角4不是完整的角度2。 您的Angular 2应用程序可以轻松升级到Angular 4应用程序,而不会破坏任何变化(个人我在升级到角度时没有看到任何破坏4.如果您发现任何破坏,请在评论部分中告诉我。

棱角 4的变化

有角度4的一些更改如下所示:

  1. AOT(提前时间) - 查看引擎
  2. ngif.
  3. 作为关键字
  4. 新管道介绍
  5. http.
  6. 荟萃
  7. 电子邮件验证器
  8. 角动画包

AOT(提前时间) - 查看引擎

这是减少错误和提高性能的更改之一。作为开发人员,您不会注意到它。

AOT的优势:

  1. 如果模板在构建时间而不是在运行时,它会弹出错误
  2. 我们不需要向用户发送角度编译器,因此应用程序大小将更小

该项目早些时候由社区维持,但现在它的角度团队负责。

ngif.

如果我们想在'ng If'如果在'ng's's's's's's's's's If'那么,那么我们需要写一条方式,如下所示:

<p *ngIf="IsContent">My content</p>

<p *ngIf="!IsContent">Not my content</p>

但现在在角度4中,我们只需将上面写下两个声明:

<p *ngIf="IsContent; else elsePart">My content</p>

<ng-template #elsePart>

<p>Not my content</p>

</ng-template>

看起来很复杂,但是当你抓住它时,它真的很容易和有意义。

作为关键字

它允许将结果存储在模板的变量中,以在元素中使用它。

<div *ngFor="let tech of techies | slice:0:2 as total; index as i"> {{i+1}}/{{total.length}}: {{tech.name}} </div>

管子

棱角 4引入了一个新的滴定形酶管。它将将每个单词的第一个字母更改为大写:

<p>{{'angular is fun | titlecase'}}</p>

输出:

 棱角  Is Fun

http.

为HTTP请求添加搜索参数已被简化:

http.get(`${baseUrl}/api/races`, { params: { sort: 'ascending' } });

以前,我们必须以如下所示的方式进行:

const params= new URLSearchParams();

params.append('sort', 'ascending');

http.get(`${baseUrl}/api/races`, { search: params });

荟萃

已引入新的服务以轻松获取或更新元标签:

@Component({ 
       selector: 'ponyracer-app', 
       template: `<h1>PonyRacer</h1>` 
}) 

export class PonyRacerAppComponent { 
           constructor(meta: Meta) { 
               meta.addTag({ name: 'author', content: 'Ninja Squad' }); 
           } 
}

渲染器

渲染器已更改为渲染器2.在Angular 2中,我们具有渲染器,如下所示:

import { Component , Renderer} from '@angular/core';

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

export class AppComponent {
     constructor(private renderer: Renderer) {}
     
     onChangeBackground(element: HTMLElement) {
                this.renderer.setStyle('background-color': 'green');
     }

}

但是在角度4中,我们将新的渲染器作为render2.请参阅下面显示的代码:

import { Component , Renderer2} from '@angular/core';

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

export class AppComponent {

      constructor(private renderer: Renderer2) {}

      onChangeBackground(element: HTMLElement) {
            this.renderer.setStyle('background-color': 'green');
      }
}

渲染器仍将在角4中工作,改变在那里,因为在引擎盖下很改变。

电子邮件验证器

在Angular 2如果有电子邮件,我们需要验证它,我们使用模式但现在在Angular 4中,我们可以使用下面显示的代码验证电子邮件:

<input type="email" name="email" ngModel email>

其他变化在引擎盖下如下:

  1. 现在我们可以使用TypeScript 2,但在此之前只支持Typescript 1.8。 (在即将到来的教程中,我们可以探索更多的新功能)

角动画

现在我们有一个新的动画包。

在Angular 2.x中的早期我们曾经导入:

import {animate, state, style, transition, trigger} from '@angular/core';

现在有角度4:

import {animate, state, style, transition, trigger} from '@angular/animations';

此外,我们现在需要在ImperaInmodules文件中导入我们的App.module文件中的新模块。

import {BrowserAnimationsModule} from '@angular/platform-browser/animations';

旧动画被贬值(但它仍然可以工作)。我建议您如果您使用的是,请升级动画模块。

有效4显然,您将观察到代码的性能和大小急剧改进。有角度的变化更多的变化已经完成了。但我试图涵盖作为我们应该知道的开发人员的所有主要变化。

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

作者信息

Tavish Aggarwal.

网站: http://tavishaggarwal.com

Tavish Aggarwal. 是一个数据科学家 在一个海德拉巴工作,具有广泛的经验,在跨电子商务,财务,医疗保健等等不同领域解决现实世界的业务问题。 他对技术充满热情,喜欢在团队中工作。

类别