Kendo UI致力于新的開發(fā)，來滿足不斷變化的需求，通過React框架的Kendo UI JavaScript封裝來支持React Javascript框架。

Kendo UI for Angular是專用于Angular開發(fā)的專業(yè)級(jí)Angular組件，telerik致力于提供純粹的高性能Angular UI組件，無需任何jQuery依賴關(guān)系。

Kendo UI R1 2023正式版下載

Telerik_KendoUI產(chǎn)品技術(shù)交流群：726377843    歡迎一起進(jìn)群討論

Angular Ivy是Angular的下一代編譯和渲染工具，它帶來了速度和大小方面的改進(jìn)。Ivy是Angular下一代編譯和渲染的代號(hào)。它提高了構(gòu)建代碼的速度和大小等。Ivy從Angular框架的第9版就開始使用了。

在本文中，我們將看到Angular Ivy為Angular項(xiàng)目帶來的改進(jìn)。

Angular Ivy意味著更小的應(yīng)用

Angular Ivy編譯的應(yīng)用比上一代Angular編譯器要小。

與 Angular 8 編譯器相比，小型應(yīng)用程序要小 30%。與 Angular 8 相比，大型應(yīng)用程序要小 25-40%。

更快，更有效的測(cè)試

使用Ivy運(yùn)行測(cè)試速度更快，因?yàn)樗袦y(cè)試都可以在第一次編譯之后運(yùn)行。

在Ivy之前，每次運(yùn)行測(cè)試時(shí)，都必須事先編譯項(xiàng)目。編譯過程大大延遲了Ivy之前的測(cè)試時(shí)間。

調(diào)試工具

在Ivy中，ng可使用全局變量。

它使我們只需要通過在瀏覽器開發(fā)控制臺(tái)中輸入變量的屬性來訪問Angular組件的各個(gè)部分。我們不再需要插入不必要的console.log調(diào)用或斷點(diǎn)來調(diào)試Angular應(yīng)用。

ng僅在開發(fā)模式下可用。因此，外部人員不能使用生產(chǎn)版本訪問ng。

例如，我們輸入:

const el = document.querySelector("app-root");

進(jìn)入瀏覽器控制臺(tái)，獲取Angular組件的元素。

然后輸入:

ng.getComponent(el);

獲取el元素對(duì)應(yīng)的Angular組件實(shí)例。

我們還可以輸入:

ng.getDirectives(el);

獲取添加到組件中的指令，el元素將從中呈現(xiàn)。

我們可以運(yùn)行:

ng.applyChanges(el);

在el從中呈現(xiàn)的組件上運(yùn)行變更檢測(cè)。

ng從Angular的第一個(gè)版本開始就已經(jīng)可用了。但是，使用Ivy，我們可以直接獲得變量的值。

其他ng方法包括:

• ng.getContext:獲取嵌入視圖的上下文，比如由*ngIf或*ngFor渲染的元素。
• ng.getDirectiveMetadata:獲取特定指令的元數(shù)據(jù)。
• ng.getHostElement:獲取組件或指令實(shí)例的宿主元素
• ng.getInjector:獲取與元素、組件或指令實(shí)例相關(guān)聯(lián)的注入器
• ng.getListeners:獲取與組件呈現(xiàn)的元素相關(guān)聯(lián)的事件偵聽器。此方法不會(huì)返回主機(jī)偵聽器
• ng.getOwningComponent:獲取包含DOM元素的組件
• ng.getRootComponents:獲取與DOM元素相關(guān)的所有根元素

列出的所有方法都以一個(gè)DOM元素作為參數(shù)。

改進(jìn)風(fēng)格合并和處理

明確的優(yōu)先順序決定了樣式規(guī)則如何應(yīng)用于Ivy編譯器。

例如，[樣式。Color]顏色樣式覆蓋在其他地方設(shè)置的顏色樣式。

以前的編譯器版本使用樣式應(yīng)用程序的計(jì)時(shí)來確定最新的樣式，并且沒有應(yīng)用樣式的一致規(guī)則。這可能會(huì)導(dǎo)致問題，因?yàn)椴煌臅r(shí)間可以應(yīng)用不同的樣式。

延遲加載

延遲加載意味著只加載屏幕上顯示的內(nèi)容，并且在顯示元素之前完成。

這提高了渲染性能，因?yàn)橹患虞d應(yīng)用程序中顯示給用戶的部分，而不是加載整個(gè)應(yīng)用程序，這可能會(huì)非常大。

改進(jìn)的AOT編譯

AOT編譯代表提前編譯。Ivy編譯器默認(rèn)為AOT，因?yàn)樗F(xiàn)在比以前版本中使用的即時(shí)編譯器更快。

模板類型檢查

在Ivy之前，組件模板幾乎沒有類型檢查。

使用Ivy，在構(gòu)建時(shí)檢查組件數(shù)據(jù)類型，以查看模板中的組件數(shù)據(jù)類型是否與聲明的數(shù)據(jù)類型匹配。

fullTemplateTypeCheck控制模板是否啟用了數(shù)據(jù)類型檢查。這在默認(rèn)情況下是正確的。

例如，如果我們將一個(gè)數(shù)字賦值給模板中的boolean變量，我們將從Ivy編譯器獲得一個(gè)錯(cuò)誤。

舉一個(gè)示例:

app.component.ts

import { Component } from "@angular/core";

@Component({
selector: "app-root",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.css"],
})
export class AppComponent {
title: string = "angular-test";
}

寫入：

app.component.html

<button (click)="title = 123">click me</button>

我們會(huì)得到一個(gè)類型錯(cuò)誤，因?yàn)閠itle應(yīng)該是字符串。

重建時(shí)期

使用Ivy，重新構(gòu)建過程變得更加高效，因?yàn)樗徊榭匆迅牡墓瞐pi并重新構(gòu)建它們。在艾薇之前，任何改變都會(huì)引發(fā)重建。

組件、指令、模塊等內(nèi)部細(xì)節(jié)的改變不會(huì)影響構(gòu)建。

全球化

全球化特性也在Ivy中得到了改進(jìn)。Ivy允許我們?cè)谶\(yùn)行時(shí)加載全球化特性，而不必在編譯時(shí)注冊(cè)它們。此外，多種語言可以內(nèi)置到同一個(gè)應(yīng)用程序包中，而不必將它們分開。

要在應(yīng)用中添加本地化特性，我們需要添加@angular/ localalize包。

運(yùn)行:

ng add @angular/localize

按照說明添加包及其依賴項(xiàng)。將添加依賴項(xiàng)所需的導(dǎo)入。

然后我們寫:

main.ts

import { enableProdMode } from "@angular/core";
import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";

import { AppModule } from "./app/app.module";
import { environment } from "./environments/environment";
import { loadTranslations } from "@angular/localize";

import "@angular/localize/init";

if (environment.production) {
enableProdMode();
}

platformBrowserDynamic()
.bootstrapModule(AppModule)
.catch((err) => console.error(err));

loadTranslations({
Welcome: "Welcome to {$appName}.",
});

用帶有翻譯的對(duì)象調(diào)用loadTranslations來加載翻譯。

然后使用$ localalize標(biāo)簽:

app.component.ts

import { Component } from "@angular/core";

@Component({
selector: "app-root",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.css"],
})
export class AppComponent {
title: string = "test";
welcome: string = $localize`Welcome to ${this.title}.`;
}

在Welcome to ${this.title}上調(diào)用$ localalize字符串在app.component.html中，寫入:

{{welcome}}

顯示信息

 loadTranslations在運(yùn)行時(shí)用Ivy編譯時(shí)加載翻譯，因此減少了初始加載期間需要加載的數(shù)據(jù)量。