本文主要介紹如何安裝和開始使用Kendo UI for Angular。
- 首先完成安裝步驟。
- 然後建立一個簡單的應用程式,其中包含一些Kendo UI for Angular元件,應用程式源代碼可供您參考。
- 最後,您将學習如何為Kendo UI for Angular激活許可。
Kendo UI for Angular最新版工具下載下傳
設定Angular項目
最新的Kendo UI for Angular包面向目前Angular長期支援版本,直到最新的官方Angular版本。
1. 開始使用Angular最簡單方法是使用 Angular CLI 工具,要搭建項目結構,請按照該工具的安裝說明進行操作:
npm install -g @angular/cli
ng new kendo-angular-app
ng new指令将提示您進行新Angular應用程式的一些設定,使用這些:
- 實施更嚴格的類型檢查和捆綁預算? - No
- 添加Angular路由?Yes
- 樣式表格式? - CSS
2. 新應用生成後,将src/app/app.component.html的内容替換為:
<h1>Hello Kendo UI for Angular!</h1>
3. 然後,在浏覽器中建構并打開Angular應用程式:
cd kendo-angular-app
ng serve -o
接下來,我們将向應用程式添加一些資料,然後将其綁定到一個DropDownList和一個網格中。
添加資料
通過向應用程式添加一些資料來準備使用專業的資料驅動UI元件,為簡單起見,将使用靜态本地 JSON 資料和可以修改來使用遠端資料的服務,建立以下三個檔案并從 GitHub 中的連結檔案複制粘貼它們的内容:
- src/app/data.products.ts
- src/app/data.categories.ts
- src/app/product.service.ts
添加下拉清單
Kendo UI for Angular是通過多個NPM包分發的,範圍為@progress。向應用程式添加一個 Kendo UI Angular DropDownList,并将其綁定到一個對象數組。
1. 使用ng add指令時,DropDowns包安裝需要一個步驟:
ng add @progress/kendo-angular-dropdowns
ng add指令還會自動安裝預設Kendo UI主題。
2. 打開src/app/app.component.ts并從data.categories導入類别:
import { categories } from "./data.categories";
3. 在同一個檔案中,聲明将在DropDownList聲明中使用的變量,defaultItem确定最初選擇的項目:
export class AppComponent {
public dropDownItems = categories;
public defaultItem = { text: "Filter by Category", value: null };
}
4. 最後,打開src/app/app.component.html并添加DropDownList标記:
<p>
<kendo-dropdownlist [data]="dropDownItems" [defaultItem]="defaultItem" textField="text" valueField="value" >
</kendo-dropdownlist>
</p>
DropDownList 現在應該可以在您的示例頁面上運作了。
添加網格
繼續添加一個Kendo UI for Angular網格。
1. 首先,安裝Grid npm包和所有依賴項:
ng add @progress/kendo-angular-grid
2. 在src/app/app.component.ts中導入必要的類型和資料服務:
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. 添加将用于對 Grid 進行分頁和排序的 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 标記,在浏覽器中重建并檢查 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>
我們應用程式中的 Grid 執行個體可以排序和分頁,它使用單元格模闆中的 UnitPrice 列和複選框的數字格式來顯示布爾值 Discontinued 字段。