入門指南

---

立即下載Kendo UI for Angular

安裝你的第一個(gè) Kendo UI for Angular組件

1.建立angle項(xiàng)目

1.使用npm包管理器全局安裝@angular/cli。Angular CLI是一個(gè)命令行界面工具，可以幫助你直接從命令shell中初始化、開(kāi)發(fā)、構(gòu)建和維護(hù)你的Angular應(yīng)用。

npm install -g @angular/cli

2.使用ng new命令創(chuàng)建Angular項(xiàng)目，kendo-angular-app是我們測(cè)試項(xiàng)目的名稱。

ng new kendo-angular-app

ng new命令會(huì)提示你對(duì)新Angular應(yīng)用做一些設(shè)置，讓我們使用這些：

• 你想添加Angular路由嗎?——不
• 您希望使用哪種樣式表格式?—默認(rèn)選擇“CSS”，按回車鍵。

3.當(dāng)新項(xiàng)目生成時(shí)，將src/app/app.component.html的內(nèi)容替換為：

<h1>Hello Kendo UI for Angular!</h1>

4.在瀏覽器中構(gòu)建并打開(kāi)Angular應(yīng)用，打開(kāi)終端，找到新創(chuàng)建的應(yīng)用，然后運(yùn)行Angular CLI的ng serve命令。

cd kendo-angular-app
ng serve -o

2.使用Kendo UI for Angular組件

1.Kendo UI for Angular是一個(gè)包含100多個(gè)完全本地組件的庫(kù)，用于構(gòu)建高質(zhì)量的現(xiàn)代Angular UI。在本節(jié)中，您將通過(guò)三個(gè)步驟學(xué)習(xí)如何使用組件Calendar。

讓我們將Calendar組件添加到項(xiàng)目中，為此就需要安裝DateInputs包。

ng add @progress/kendo-angular-dateinputs

為了方便開(kāi)發(fā)人員，ng add命令會(huì)自動(dòng)執(zhí)行以下幾個(gè)操作：

• 將@progress/kendo-angular-dateinputs包作為一個(gè)依賴項(xiàng)添加到package.json 文件中。
• 在當(dāng)前應(yīng)用模塊(app.module.ts)中導(dǎo)入DateInputsModule。
• 在angular.json文件中注冊(cè)Kendo UI默認(rèn)主題。
• 將所有必需的對(duì)等依賴項(xiàng)添加到 package.json文件中。
• 觸發(fā)npm install來(lái)安裝主題和所有被添加的同級(jí)包。

2.打開(kāi)src/app/app.component.html，將Calendar組件添加到你的標(biāo)記中。

<kendo-calendar></kendo-calendar>

3.在瀏覽器中構(gòu)建并打開(kāi)應(yīng)用程序。這樣你就用兩行代碼完成了一個(gè)功能齊全的日歷!

ng serve -o

使用許多其他的Kendo UI for Angular 組件就像使用日歷一樣簡(jiǎn)單——安裝相應(yīng)的包，并在你的應(yīng)用中使用組件的標(biāo)記。

3.激活您的試用或商用許可證

Kendo UI for Angular是一個(gè)專業(yè)開(kāi)發(fā)的庫(kù)，并在商業(yè)許可下發(fā)布。

使用任何來(lái)自 Kendo UI for Angular庫(kù)的UI組件都需要一個(gè)商業(yè)許可密鑰或一個(gè)有效的試用許可密鑰。要激活您的許可證，請(qǐng)按照Activating Your License Key上的說(shuō)明進(jìn)行操作。

現(xiàn)在你已經(jīng)安裝了組件，并設(shè)置了許可，你就可以開(kāi)始使用Kendo UI for Angular進(jìn)行開(kāi)發(fā)了!您可以隨意瀏覽完整的組件列表，或者按照下面的教程學(xué)習(xí)如何組合多個(gè)組件并使它們協(xié)同工作。

集成多個(gè)Kendo UI for Angular組件

Kendo UI for Angular是一個(gè)由許多模塊化組件組成的豐富套件。接下來(lái)您將使用其中兩個(gè)組件(Grid和DropDownList)來(lái)構(gòu)建一個(gè)小型演示應(yīng)用程序。

在繼續(xù)之前，從頁(yè)面中刪除日歷，這樣你就有一個(gè)空白的應(yīng)用程序可以使用。

1. 添加Kendo UI for Angular數(shù)據(jù)網(wǎng)格

讓我們將Kendo UI forAngular網(wǎng)格添加到我們的應(yīng)用程序中。

1.當(dāng)使用ng add命令時(shí)，Grid包的安裝只需要一個(gè)步驟。

ng add @progress/kendo-angular-grid

2.為簡(jiǎn)單起見(jiàn)，我們將使用靜態(tài)本地JSON數(shù)據(jù)和一個(gè)稍后可以修改以使用遠(yuǎn)程數(shù)據(jù)的服務(wù)。在src/app文件夾中創(chuàng)建以下兩個(gè)文件，并從GitHub中鏈接的文件中復(fù)制粘貼它們的內(nèi)容：

• src/app/data.products.ts
• src/app/product.service.ts

3.在src/app/app.component.ts文件中，在組件聲明中添加ProductService作為提供商。

import { ProductService } from "./product.service";
//...
@Component({
selector: 'app-root',
//...
providers: [ProductService]
})

4.添加AppComponent類成員，我們將使用它們對(duì)網(wǎng)格進(jìn)行分頁(yè)和排序。

export class AppComponent {
// ...
public gridItems: Observable<GridDataResult>;
public pageSize: number = 10;
public skip: number = 0;
public sortDescriptor: SortDescriptor[] = [];
public filterTerm: number = null;
}

5.處理sortChange和pageChange事件以處理網(wǎng)格數(shù)據(jù)并更新視圖。

export class AppComponent {
// ...
constructor(private service: ProductService) {
this.loadGridItems();
}

public pageChange(event: PageChangeEvent): void {
this.skip = event.skip;
this.loadGridItems();
}

public handleSortChange(descriptor: SortDescriptor[]): void {
this.sortDescriptor = descriptor;
this.loadGridItems();
}

private loadGridItems(): void {
this.gridItems = this.service.getProducts(
this.skip,
this.pageSize,
this.sortDescriptor,
this.filterTerm
);
}
}

6.最后，在src/app/app.component.html中添加Grid標(biāo)記，重新構(gòu)建并在瀏覽器中檢查Grid。

<kendo-grid
[data]="gridItems | async"
[pageSize]="pageSize"
[skip]="skip"
[pageable]="true"
(pageChange)="pageChange($event)"
[sortable]="true"
[sort]="sortDescriptor"
(sortChange)="handleSortChange($event)"
[height]="400"
>
<kendo-grid-column field="ProductID" title="ID"></kendo-grid-column>
<kendo-grid-column field="UnitPrice" title="Unit Price" format="{0:c}"></kendo-grid-column>
<kendo-grid-column field="Discontinued" filter="boolean">
<ng-template kendoGridCellTemplate let-dataItem>
<input type="checkbox" [checked]="dataItem.Discontinued" disabled />
</ng-template>
</kendo-grid-column>
<!-- ... -->
</kendo-grid>

在本節(jié)中，您向應(yīng)用程序添加了一個(gè)健壯的Data Grid，并通過(guò)分頁(yè)和排序進(jìn)行了增強(qiáng)。請(qǐng)隨意瀏覽Kendo UI for Angular Grid 檔頁(yè)面，了解Grid可以做多少事情。

2.添加Kendo UI for Angular下拉列表

讓我們將Kendo UI for Angular下拉列表添加到我們的應(yīng)用程序中，并將它綁定到一個(gè)對(duì)象數(shù)組。

1.當(dāng)使用ng add命令時(shí)，DropDowns包的安裝只需要一個(gè)步驟。

ng add @progress/kendo-angular-dropdowns

2.為DropDownList添加一些數(shù)據(jù)。為了簡(jiǎn)單起見(jiàn)，我們將使用靜態(tài)本地JSON數(shù)據(jù)，稍后可以修改為使用遠(yuǎn)程數(shù)據(jù)，然后在src/app文件夾中創(chuàng)建一個(gè)data.categories.ts文件，并從這個(gè)GitHub中復(fù)制粘貼內(nèi)容。

打開(kāi)src/app/app.component.ts，從data.categories中導(dǎo)入categories 。

import { categories } from "./data.categories";

3.在src/app/app.component.ts文件中，聲明我們將在DropDownList中使用的變量。若要在未選擇任何項(xiàng)時(shí)為用戶顯示提示，請(qǐng)使用defaultItem屬性。默認(rèn)項(xiàng)必須有一個(gè)與textField和valueField名稱匹配的字段。

export class AppComponent {
public dropDownItems = categories;
public defaultItem = { text: "Filter by Category", value: null };
}

4.最后，打開(kāi)src/app/app.component.html并添加下拉列表標(biāo)記。

<kendo-dropdownlist
    [data]="dropDownItems"
    [defaultItem]="defaultItem"
    textField="text"
    valueField="value"
>
</kendo-dropdownlist>

DropDownList的data屬性指向一個(gè)對(duì)象數(shù)組或原始值。在本例中，我們將使用一個(gè)對(duì)象數(shù)組，因此指定valueField和textField屬性。

3.配置由下拉列表過(guò)濾的高級(jí)網(wǎng)格

最后，讓我們添加一些組件交互，Grid有一個(gè)內(nèi)置的過(guò)濾UI，但是我們將使用DropDownList來(lái)按產(chǎn)品類別過(guò)濾Grid就要做到這一點(diǎn)：

1.在src/app/app.component.html中綁定下拉列表的valueChange事件。

<kendo-dropdownlist
[data]="dropDownItems"
(valueChange)="handleFilterChange($event)"
>
</kendo-dropdownlist>

2.在src/app/app.component.ts中添加handleFilterChange方法。

export class AppComponent {
// ...
public handleFilterChange(item): void {
this.filterTerm = item.value;
this.skip = 0;
this.loadGridItems();
}
}

4. 獲得完整的源代碼

您的Kendo UI for Angular 入門應(yīng)用程序已經(jīng)完成。

你可以從kendo-angular-quickstart-cli GitHub存儲(chǔ)庫(kù)下載并運(yùn)行完整的樣例應(yīng)用程序?；蛘撸苯釉?a target="_blank">StackBlitz中運(yùn)行、分叉和實(shí)驗(yàn)應(yīng)用程序。

本文只展示了你可以用Kendo UI for Angular創(chuàng)建什么。我們希望我們已經(jīng)成功地激勵(lì)了你如何成為一個(gè)更高效的Angular開(kāi)發(fā)人員，并利用我們的專業(yè)UI庫(kù)快速構(gòu)建復(fù)雜的UI。

資源

1. ThemeBuilder

若要完全控制Kendo UI for Angular組件的外觀，你可以使用ThemeBuilder創(chuàng)建自己的樣式。

ThemeBuilder是一個(gè)web應(yīng)用程序，使您能夠創(chuàng)建新的主題和自定義現(xiàn)有的。你所做的每一個(gè)改變幾乎都會(huì)立刻被可視化，一旦你完成了Angular組件的樣式化，你就可以導(dǎo)出一個(gè)包含主題樣式的zip文件，并在Angular應(yīng)用中使用它們。

2. Figma的UI套件

Kendo UI for Angular自帶四個(gè)Figma UI工具包：Material、Bootstrap、Fluent和KendoUI Default。它們?yōu)閼?yīng)用設(shè)計(jì)者提供了一個(gè)與Kendo UI for Angular套件中可用的UI組件相匹配的構(gòu)建塊，擁有匹配的構(gòu)建塊可以保證設(shè)計(jì)的順利實(shí)現(xiàn)。

3.虛擬教室

虛擬教室包含培訓(xùn)課程，代表了一種免費(fèi)的按需技術(shù)培訓(xùn)計(jì)劃，可供活躍的試用用戶和活躍的許可證持有人使用，每個(gè)課程都會(huì)提供實(shí)用的知識(shí)和有用的應(yīng)用程序開(kāi)發(fā)方法，適合初級(jí)和高級(jí)開(kāi)發(fā)人員。

4. Kendo UI生產(chǎn)力工具

為了幫助您更快地創(chuàng)建項(xiàng)目，Telerik為Visual Studio Code引入了Kendo UI生產(chǎn)力工具擴(kuò)展。這個(gè)擴(kuò)展附帶了一個(gè)方便的模板向?qū)?，可以方便地?chuàng)建新項(xiàng)目，并提供了一個(gè)豐富的代碼片段庫(kù)，允許你將Kendo UI for Angular組件添加到你的項(xiàng)目中。