入門指南

---

立即下載Kendo UI for Angular

安裝你的第一個 Kendo UI for Angular組件

1.建立angle項目

1.使用npm包管理器全局安裝@angular/cli。是一個命令行界面工具，可以幫助你直接從命令shell中初始化、開發、構建和維護你的Angular應用。

npm install -g @angular/cli

 2.使用ng new命令創建Angular項目，kendo-angular-app是我們測試項目的名稱。

ng new kendo-angular-app

ng new命令會提示你對新Angular應用做一些設置，讓我們使用這些：

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

3.當新項目生成時，將src/app/app.component.html的內容替換為：

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

4.在瀏覽器中構建并打開Angular應用，打開終端，找到新創建的應用，然后運行Angular CLI的ng serve命令。

cd kendo-angular-app
ng serve -o

2.使用Kendo UI for Angular組件

1.Kendo UI for Angular是一個包含100多個完全本地組件的庫，用于構建高質量的現代Angular UI。在本節中，您將通過三個步驟學習如何使用組件。

讓我們將Calendar組件添加到項目中，為此就需要安裝包。

ng add @progress/kendo-angular-dateinputs

為了方便開發人員，ng add命令會自動執行以下幾個操作：

• 將@progress/kendo-angular-dateinputs包作為一個依賴項添加到package.json 文件中。
• 在當前應用模塊(app.module.ts)中導入DateInputsModule。
• 在angular.json文件中注冊Kendo UI默認主題。
• 將所有必需的對等依賴項添加到 package.json文件中。
• 觸發npm install來安裝主題和所有被添加的同級包。

2.打開src/app/app.component.html，將Calendar組件添加到你的標記中。

<kendo-calendar></kendo-calendar>

3.在瀏覽器中構建并打開應用程序。這樣你就用兩行代碼完成了一個功能齊全的日歷!

ng serve -o

使用許多其他的就像使用日歷一樣簡單——安裝相應的包，并在你的應用中使用組件的標記。

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

Kendo UI for Angular是一個專業開發的庫，并在商業許可下發布。

使用任何來自 Kendo UI for Angular庫的UI組件都需要一個商業許可密鑰或一個有效的試用許可密鑰。要激活您的許可證，請按照上的說明進行操作。

現在你已經安裝了組件，并設置了許可，你就可以開始使用Kendo UI for Angular進行開發了!您可以隨意瀏覽完整的組件列表，或者按照下面的教程學習如何組合多個組件并使它們協同工作。

集成多個Kendo UI for Angular組件

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

在繼續之前，從頁面中刪除日歷，這樣你就有一個空白的應用程序可以使用。

1. 添加Kendo UI for Angular數據網格

讓我們將Kendo UI forAngular網格添加到我們的應用程序中。

1.當使用ng add命令時，Grid包的安裝只需要一個步驟。

ng add @progress/kendo-angular-grid

 2.為簡單起見，我們將使用靜態本地JSON數據和一個稍后可以修改以使用遠程數據的服務。在src/app文件夾中創建以下兩個文件，并從GitHub中鏈接的文件中復制粘貼它們的內容：

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

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

4.添加AppComponent類成員，我們將使用它們對網格進行分頁和排序。

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事件以處理網格數據并更新視圖。

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標記，重新構建并在瀏覽器中檢查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>

在本節中，您向應用程序添加了一個健壯的Data Grid，并通過和進行了增強。請隨意瀏覽Kendo UI for Angular Grid 檔頁面，了解Grid可以做多少事情。

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

讓我們將添加到我們的應用程序中，并將它

1.當使用ng add命令時，DropDowns包的安裝只需要一個步驟。

ng add @progress/kendo-angular-dropdowns

2.為DropDownList添加一些數據。為了簡單起見，我們將使用靜態本地JSON數據，稍后可以修改為使用遠程數據，然后在src/app文件夾中創建一個data.categories.ts文件，并從這個GitHub中復制粘貼內容。

打開src/app/app.component.ts，從data.categories中導入categories 。

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

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

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

4.最后，打開src/app/app.component.html并添加下拉列表標記。

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

DropDownList的data屬性指向一個對象數組或原始值。在本例中，我們將使用一個對象數組，因此指定和屬性。

3.配置由下拉列表過濾的高級網格

最后，讓我們添加一些組件交互，Grid有一個內置的過濾UI，但是我們將使用DropDownList來按產品類別過濾Grid就要做到這一點：

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 入門應用程序已經完成。

你可以從下載并運行完整的樣例應用程序。或者，直接在。

本文只展示了你可以用Kendo UI for Angular創建什么。我們希望我們已經成功地激勵了你如何成為一個更高效的Angular開發人員，并利用我們的專業UI庫快速構建復雜的UI。

資源

1. ThemeBuilder

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

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

2. Figma的UI套件

Kendo UI for Angular自帶四個Figma UI工具包：Material、Bootstrap、Fluent和KendoUI Default。它們為應用設計者提供了一個與Kendo UI for Angular套件中可用的UI組件相匹配的構建塊，擁有匹配的構建塊可以保證設計的順利實現。

3.虛擬教室

包含培訓課程，代表了一種免費的按需技術培訓計劃，可供活躍的試用用戶和活躍的許可證持有人使用，每個課程都會提供實用的知識和有用的應用程序開發方法，適合初級和高級開發人員。

4. Kendo UI生產力工具

為了幫助您更快地創建項目，Telerik為Visual Studio Code引入了Kendo UI生產力工具擴展。這個擴展附帶了一個方便的模板向導，可以方便地創建新項目，并提供了一個豐富的代碼片段庫，允許你將Kendo UI for Angular組件添加到你的項目中。