Kendo UI for Angular最新版下載

Kendo UI for Angular是專業(yè)級(jí)的Angular UI組件庫(kù)，不僅是將其他供應(yīng)商提供的現(xiàn)有組件封裝起來，telerik致力于提供純粹高性能的Angular UI組件，而無需任何jQuery依賴關(guān)系。無論您是使用TypeScript還是JavaScript開發(fā)Angular應(yīng)用程序，Kendo UI for Angular都能為Angular項(xiàng)目提供專業(yè)的、企業(yè)級(jí)UI組件。

構(gòu)建單頁應(yīng)用程序（SPA）很有趣，尤其是當(dāng)您開始使用Angular時(shí)，在這篇文章中，您將學(xué)習(xí)如何使用Angular輕松實(shí)現(xiàn)這一目標(biāo)。

先決條件

為了能夠繼續(xù)執(zhí)行本文的演示，您應(yīng)該具備以下條件：

• VS Code之類的集成開發(fā)環(huán)境（IDE）
• 您的計(jì)算機(jī)上安裝Node version 11.0
• Node Package Manager 6.7版（通常隨Node安裝一起提供）
• v8.0及以上版本
• Angular的最新版本（版本12）：

ng version

確認(rèn)您正在使用v12，如果沒有，請(qǐng)更新至v12版本。

如何在視圖之間導(dǎo)航？

構(gòu)建SPA（單頁應(yīng)用程序）的神奇之處之一就是能夠擁有多個(gè)視圖。 使用Angular使此操作非常容易，因?yàn)槟?以通過導(dǎo)航工具在一個(gè)組件中動(dòng)態(tài)顯示多個(gè)視圖。 您可以從主頁到“關(guān)于”頁面，再到“與我們聯(lián)系”頁面，全部集中在一個(gè)組件中。

為什么路由很重要？

想象一個(gè)場(chǎng)景，您從SPA中的一個(gè)視圖轉(zhuǎn)到另一個(gè)視圖，但URL完全沒有改變。 就像您單擊“關(guān)于我們”按鈕一樣，頁面顯示在DOM中，但URL仍然顯示“ newapp.com”而不是“ newapp.com/about”。

這存在一些問題，第一是如何將特定的視圖添加為書簽，看到書簽保存URL而不是應(yīng)用程序視圖？其他問題是由于URL基本上是靜態(tài)的，刷新頁面的概念將如何工作以及如何與其他人共享鏈接。

路由確保URL與顯示的視圖匹配，以便您可以輕松地分離視圖，保持狀態(tài)甚至具有直觀的Web體驗(yàn)。

什么是Angular Router？

是由Angular團(tuán)隊(duì)構(gòu)建和維護(hù)的JavaScript路由器，它具有廣泛的路由包，可讓您準(zhǔn)確定義要分配給視圖的URL字符串。 您可以有多個(gè)路由器出口，路徑匹配甚至路由防護(hù)。 這是Angular重要組成部分，可確保可以使用該框架輕松構(gòu)建SPA。

我們要構(gòu)建什么？

我們將構(gòu)建一個(gè)小型音樂電視應(yīng)用程序，當(dāng)您單擊連接它們的按鈕時(shí)，它將顯示兩個(gè)視圖，如下所示：

配置

首先，打開VS Code，然后在終端中使用以下命令創(chuàng)建一個(gè)新的angular應(yīng)用程序：

ng new newap --routing

添加路由標(biāo)記會(huì)自動(dòng)創(chuàng)建一個(gè)名為newapp的新Angular應(yīng)用，并預(yù)先配置路由。

現(xiàn)在更改目錄，使用以下命令導(dǎo)航到應(yīng)用程序根文件夾：

cd newapp

兩個(gè)組件

接下來要做的是生成新的組件，該組件將容納計(jì)劃在其間交替的兩個(gè)視圖。

ng generate component artists -it -is
ng generate component records -it -is

這兩個(gè)命令會(huì)在源代碼的應(yīng)用程序文件夾中使用內(nèi)聯(lián)樣式和模板創(chuàng)建一個(gè)名為Artists and Records的新文件夾，默認(rèn)情況下類似于Vue.js。 接下來要做的是配置路由以適配我們的需求。

配置路由

要配置路由器，請(qǐng)將下面的代碼塊復(fù)制到您的app-routing.module.ts文件中：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { ArtistsComponent } from './artists/artists.component';
import { RecordsComponent } from './records/records.component';
const routes: Routes = [
{path:'artists', component:ArtistsComponent},
{path:'records', component:RecordsComponent}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
export const ArrayOfComponents = [ArtistsComponent, RecordsComponent]

首先，導(dǎo)入了兩個(gè)組件； 然后配置路由。請(qǐng)注意，如何將所需的URL字符串定義為Artists和Records，并將它們與兩個(gè)組件進(jìn)行匹配？為了不繼續(xù)在其他可能需要的地方導(dǎo)入組件，我們創(chuàng)建了一個(gè)組件數(shù)組。

要注冊(cè)此新開發(fā)項(xiàng)目，請(qǐng)打開您的應(yīng)用模塊文件，然后在下面的代碼塊中進(jìn)行復(fù)制：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule, ArrayOfComponents } from './app-routing.module';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent,
ArrayOfComponents
],
imports: [
BrowserModule,
AppRoutingModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

在這里我們注冊(cè)了新的組件數(shù)組，如您所見，不再需要將兩個(gè)組件導(dǎo)入數(shù)組中，這是保持代碼正確維護(hù)的好方法。

路由器鏈接

接下來要做的是構(gòu)建應(yīng)用模板本身，路由器鏈接是Angular路由器的一部分，用于指示鏈接 - 當(dāng)您要指向視圖時(shí)，它在模板內(nèi)至關(guān)重要。 在應(yīng)用程序組件HTML文件中，將內(nèi)容替換為以下代碼塊：

<div class="car">
<div style="text-align:center;">
<h1>
This is your Music TV
</h1>
</div>
<nav style="text-align:center;">
<button routerLink='/artists'>Artists</button>
<button routerLink='/records'>Records</button>
</nav>
<router-outlet></router-outlet>
</div>

當(dāng)單擊 “Artists” 按鈕時(shí)，將視圖更改為Artists組件，并且在單擊 “Records”按鈕時(shí)，也進(jìn)行了同樣的操作。

收尾

要向應(yīng)用添加某種樣式以使其突出，請(qǐng)打開應(yīng)用組件CSS文件并在其中復(fù)制以下規(guī)則：

.car {
top: 50%;
text-align: center;
border-radius: 25px;
border: 2px solid #73AD21;
padding: 20px;
width: 600px;
height: 250px;
margin-left: 25%;
margin-bottom: 15px;
}

button {
top: 50%;
text-align: center;
border-radius: 15px;
border: 2px solid #73AD21;
width: fit-content;
margin: 20px;
padding: 20px;
}

保存所有這些文件，并使用以下命令在開發(fā)服務(wù)器上運(yùn)行該應(yīng)用程序：

ng serve

您將看到它的運(yùn)行與上面顯示的完全相同。