入門指南

---

立即下載Kendo UI for Angular

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

1.建立angle項目

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

npm install -g @angular/cli

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

ng new kendo-angular-app

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

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

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

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

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

cd kendo-angular-app
ng serve -o

2.使用Kendo UI for Angular組件

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

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

ng add @progress/kendo-angular-dateinputs

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

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

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

<kendo-calendar></kendo-calendar>

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

ng serve -o

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

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

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

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

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

集成多個Kendo UI for Angular組件

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

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

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

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

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

ng add @progress/kendo-angular-grid

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

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

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

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

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)用程序添加了一個健壯的Data Grid，并通過和進行了增強。請隨意瀏覽Kendo UI for Angular Grid 檔頁面，了解Grid可以做多少事情。

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

讓我們將添加到我們的應(yīng)用程序中，并將它

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

ng add @progress/kendo-angular-dropdowns

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

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

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

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

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

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

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

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

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

最后，讓我們添加一些組件交互，Grid有一個內(nèi)置的過濾UI，但是我們將使用DropDownList來按產(chǎn)品類別過濾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 入門應(yīng)用程序已經(jīng)完成。

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

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

資源

1. ThemeBuilder

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

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

2. Figma的UI套件

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

3.虛擬教室

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

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

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