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

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

Kendo UI R1 2023正式版下載

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

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

在本文中，我們將看到Angular Ivy為Angular項目帶來的改進。

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

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

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

更快，更有效的測試

使用Ivy運行測試速度更快，因為所有測試都可以在第一次編譯之后運行。

在Ivy之前，每次運行測試時，都必須事先編譯項目。編譯過程大大延遲了Ivy之前的測試時間。

調(diào)試工具

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

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

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

例如，我們輸入:

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

進入瀏覽器控制臺，獲取Angular組件的元素。

然后輸入:

ng.getComponent(el);

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

我們還可以輸入:

ng.getDirectives(el);

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

我們可以運行:

ng.applyChanges(el);

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

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

其他ng方法包括:

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

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

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

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

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

以前的編譯器版本使用樣式應(yīng)用程序的計時來確定最新的樣式，并且沒有應(yīng)用樣式的一致規(guī)則。這可能會導(dǎo)致問題，因為不同的時間可以應(yīng)用不同的樣式。

延遲加載

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

這提高了渲染性能，因為只加載應(yīng)用程序中顯示給用戶的部分，而不是加載整個應(yīng)用程序，這可能會非常大。

改進的AOT編譯

AOT編譯代表提前編譯。Ivy編譯器默認為AOT，因為它現(xiàn)在比以前版本中使用的即時編譯器更快。

模板類型檢查

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

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

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

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

舉一個示例:

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>

我們會得到一個類型錯誤，因為title應(yīng)該是字符串。

重建時期

使用Ivy，重新構(gòu)建過程變得更加高效，因為它只查看已更改的公共api并重新構(gòu)建它們。在艾薇之前，任何改變都會引發(fā)重建。

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

全球化

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

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

運行:

ng add @angular/localize

按照說明添加包及其依賴項。將添加依賴項所需的導(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}.",
});

用帶有翻譯的對象調(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在運行時用Ivy編譯時加載翻譯，因此減少了初始加載期間需要加載的數(shù)據(jù)量。