本文主要介紹如何安裝和開始使用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 中的鏈接文件複製粘貼它們的內容:
添加下拉列表
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 字段。
Kendo UI for Angular是Kendo UI系列商業產品的最新產品。Kendo UI for Angular是專用於Angular開發的專業級Angular組件。telerik致力於提供純粹的高性能Angular UI組件,無需任何jQuery依賴關係。