标签：
伴随着 Angular 2 的正式 release，Kendo UI for Angular 2 的第一批控件已经发布了，当前是 Beta 版本，免费使用。
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!‘);
}
}
当样式到位之后，你的应用看起来应该如下所示了。
按钮被完全支持了，并且看起来很气派！
标签：
原文地址：http://www.cnblogs.com/Leo_wl/p/5879860.html
