本文主要介紹如何安裝和開(kāi)始使用Kendo UI for Angular。

• 首先完成安裝步驟。
• 然后創(chuàng)建一個(gè)簡(jiǎn)單的應(yīng)用程序，其中包含一些Kendo UI for Angular組件，應(yīng)用程序源代碼可供您參考。
• 最后，您將學(xué)習(xí)如何為Kendo UI for Angular激活許可。

Kendo UI for Angular最新版工具下載

設(shè)置Angular項(xiàng)目

最新的Kendo UI for Angular包面向當(dāng)前Angular長(zhǎng)期支持版本，直到最新的官方Angular版本。

1. 開(kāi)始使用Angular最簡(jiǎn)單方法是使用 Angular CLI 工具，要搭建項(xiàng)目結(jié)構(gòu)，請(qǐng)按照該工具的安裝說(shuō)明進(jìn)行操作：

npm install -g @angular/cli
ng new kendo-angular-app

ng new命令將提示您進(jìn)行新Angular應(yīng)用程序的一些設(shè)置，使用這些：

• 實(shí)施更嚴(yán)格的類型檢查和捆綁預(yù)算？ - No
• 添加Angular路由？Yes
• 樣式表格式？ - CSS

2. 新應(yīng)用生成后，將src/app/app.component.html的內(nèi)容替換為：

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

3. 然后，在瀏覽器中構(gòu)建并打開(kāi)Angular應(yīng)用程序：

cd kendo-angular-app
ng serve -o

接下來(lái)，我們將向應(yīng)用程序添加一些數(shù)據(jù)，然后將其綁定到一個(gè)DropDownList和一個(gè)網(wǎng)格中。

添加數(shù)據(jù)

通過(guò)向應(yīng)用程序添加一些數(shù)據(jù)來(lái)準(zhǔn)備使用專業(yè)的數(shù)據(jù)驅(qū)動(dòng)UI組件，為簡(jiǎn)單起見(jiàn)，將使用靜態(tài)本地 JSON 數(shù)據(jù)和可以修改來(lái)使用遠(yuǎn)程數(shù)據(jù)的服務(wù)，創(chuàng)建以下三個(gè)文件并從 GitHub 中的鏈接文件復(fù)制粘貼它們的內(nèi)容：

添加下拉列表

Kendo UI for Angular是通過(guò)多個(gè)NPM包分發(fā)的，范圍為@progress。向應(yīng)用程序添加一個(gè) Kendo UI Angular DropDownList，并將其綁定到一個(gè)對(duì)象數(shù)組。

1. 使用ng add命令時(shí)，DropDowns包安裝需要一個(gè)步驟：

ng add @progress/kendo-angular-dropdowns

ng add命令還會(huì)自動(dòng)安裝默認(rèn)Kendo UI主題。

2. 打開(kāi)src/app/app.component.ts并從data.categories導(dǎo)入類別：

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

3. 在同一個(gè)文件中，聲明將在DropDownList聲明中使用的變量，defaultItem確定最初選擇的項(xiàng)目：

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

4. 最后，打開(kāi)src/app/app.component.html并添加DropDownList標(biāo)記：

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

DropDownList 現(xiàn)在應(yīng)該可以在您的示例頁(yè)面上運(yùn)行了。

添加網(wǎng)格

繼續(xù)添加一個(gè)Kendo UI for Angular網(wǎng)格。

1. 首先，安裝Grid npm包和所有依賴項(xiàng)：

ng add @progress/kendo-angular-grid

2. 在src/app/app.component.ts中導(dǎo)入必要的類型和數(shù)據(jù)服務(wù)：

import { GridDataResult, PageChangeEvent } from "@progress/kendo-angular-grid";
import { SortDescriptor } from "@progress/kendo-data-query";
import { ProductService } from "./product.service";
import { Observable } from "rxjs";

3. 在組件聲明中添加ProductService作為提供程序：

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
providers: [ProductService]
})

4. 添加將用于對(duì) Grid 進(jìn)行分頁(yè)和排序的 AppComponent 類成員：

export class AppComponent {

// ...

public gridItems: Observable<GridDataResult>;
public pageSize: number = 10;
public skip: number = 0;
public sortDescriptor: SortDescriptor[] = [];
public filterTerm: number = null;

constructor(private service: ProductService) {
this.loadGridItems();
}

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

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

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

}

5. 最后，在 src/app/app.component.html 中添加 Grid 標(biāo)記，在瀏覽器中重建并檢查 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" width="50">
</kendo-grid-column>
<kendo-grid-column field="ProductName" title="Product Name">
</kendo-grid-column>
<kendo-grid-column field="Category.CategoryName" title="Category">
</kendo-grid-column>
<kendo-grid-column field="UnitPrice" title="Unit Price" width="140" format="{0:c}">
</kendo-grid-column>
<kendo-grid-column field="Discontinued" width="140" filter="boolean">
<ng-template kendoGridCellTemplate let-dataItem>
<input type="checkbox" [checked]="dataItem.Discontinued" disabled />
</ng-template>
</kendo-grid-column>
</kendo-grid>

我們應(yīng)用程序中的 Grid 實(shí)例可以排序和分頁(yè)，它使用單元格模板中的 UnitPrice 列和復(fù)選框的數(shù)字格式來(lái)顯示布爾值 Discontinued 字段。

Kendo UI for Angular | 下載試用

Kendo UI for Angular是Kendo UI系列商業(yè)產(chǎn)品的最新產(chǎn)品。Kendo UI for Angular是專用于Angular開(kāi)發(fā)的專業(yè)級(jí)Angular組件。telerik致力于提供純粹的高性能Angular UI組件，無(wú)需任何jQuery依賴關(guān)系。