集成 Kendo UI for Angular 2 控件

伴隨着 Angular 2 的正式 release，Kendo UI for Angular 2 的第一批控件已經發布了，當前是 Beta 版本，免費使用。

官方站點：Kendo UI for Angular 2 

Kendo UI for Angular 被打包成獨立的多個 NPM package，在 Progress NPM 之下 ( https://registry.npm.telerik.com/ ), 要想訪問它，你需要一個激活的 Telerik account , 如果你現在還沒有這個賬號，可以到這里創建一個，這是免費的。這些包在 @progress 之下。例如，Grid 控件包的名字是 @progress/kendo-angular-grid.

安裝

為了在你的機器上啟用 Progress registry，你應該關聯 @progress 到 registry URL 上，在命令行終端中，執行下面的命令。

npm login --registry=https://registry.npm.telerik.com/ --scope=@progress

NPM 將會詢問你的 Telerik 賬號和郵件，在 Username 中輸入你的用戶名 （如果你的用戶名是一個郵件地址，僅僅輸入 @ 之前的部分），Password 就是你的 Telerik 賬號口令。

驗證

如果上面的命令成功執行了，你應該可以安裝 Kendo UI 的 NPM Package 了，可以先查詢一下 Grid  控件的版本進行檢查。

npm view @progress/kendo-angular-grid versions

輸出結果應該類似下面的輸出。

>npm view @progress/kendo-angular-grid versions
[ '0.2.1', '0.2.2', '0.3.0', '0.3.1' ]

將組件添加到你的項目中

Kendo UI for Angular 2 的組件被組織為多個 NPM Package。它們的命名規則為 @progress/kendo-angular-grid, @progress/kendo-angular-inputs 等等。我們先添加 Buttons 的組件包。

在你的項目根目錄中，執行下面的命令

npm install -S @progress/kendo-angular-buttons

稍等一會，如果 NPM 正常完成了安裝，這個包和它所依賴的包將會被安裝到你的項目中。

然后，導入組件到你的項目中，假設你正在使用 Angular 2 官方提供的 5 分鍾快速上手。如果你還沒有這個項目，可以訪問這里：https://github.com/telerik/kendo-angular2-quickstart

修改一下 app.module.ts 文件，如下所示。

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ButtonsModule } from '@progress/kendo-angular-buttons';

import { AppComponent }  from './app.component';

@NgModule({
  imports: [ BrowserModule, ButtonsModule ],
  declarations: [ AppComponent ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

然后，修改 app.component.ts，添加一個按鈕。

import { Component } from '@angular/core';

@Component({
    selector: 'my-app',
    template: `
    <h1>My First Kendo UI Angular 2 App</h1>
    <button kendoButton (click)="onButtonClick()" [primary]=true>My Kendo UI Button</button>
    `
})
export class AppComponent {
   onButtonClick() {
        alert('Hello from Kendo UI!');
    }
}

添加樣式

可以有多種方式將 Kendo UI 的 theme 包含到項目中，我們建議使用 Webpack 和 Sass loader，這種方式支持使用 Sass 變量來定制 Kendo Ui 的 theme。

這里，我們簡單一點，直接在 Component 中使用 StyleUrls 來引入樣式。

import { Component } from '@angular/core';

@Component({
    selector: 'my-app',
    styleUrls: [ '../node_modules/@progress/kendo-angular-buttons/dist/npm/css/main.css' ], // load the button theme
    template: `<h1>My First Kendo UI Angular 2 App</h1>
    <button
    kendoButton
    (click)="onButtonClick()"
    [primary]=true
    >My Kendo UI Button</button>
    `,

})
export class AppComponent {
   onButtonClick() {
        alert('Hello from Kendo UI!');
    }
}

當樣式到位之后，你的應用看起來應該如下所示了。

 

按鈕被完全支持了，並且看起來很氣派！