開(kāi)始

---

立即下載Kendo UI for Angular

本指南提供了開(kāi)始使用Kendo UI for Angular條形碼所需的信息——包括可用的安裝方法、所需的依賴項(xiàng)、運(yùn)行項(xiàng)目的代碼，以及其他資源的鏈接。

完成本指南后，您將能夠獲得如下示例所示的最終結(jié)果。

查看源代碼

app.component.ts：

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

@Component({
selector: 'my-app',
styles: [`
.k-card {
width: 50%;
}
`],
template: `
<div class="k-card-deck">
<div class="k-card k-text-center">
<div class="k-card-header">
<div class="k-card-title">
Barcode
</div>
</div>
<div class="k-card-body">

<kendo-barcode type="EAN13" value="123456789012">
</kendo-barcode>

</div>
</div>

<div class="k-card k-text-center">
<div class="k-card-header">
<div class="k-card-title">
QR Code
</div>
</div>
<div class="k-card-body">

<kendo-qrcode value="https://www.telerik.com/kendo-angular-ui/components/barcodes/">
</kendo-qrcode>

</div>
</div>
</div>
`
})
export class AppComponent {
}

app.module.ts：

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

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

@NgModule({
imports: [ BrowserModule, BarcodesModule, ButtonsModule, FormsModule ],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})

export class AppModule { }

main.ts：

import './polyfills';
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app.module';

enableProdMode();

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

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

在開(kāi)始安裝任何Kendo UI for Angular控件之前，請(qǐng)確保你有一個(gè)正在運(yùn)行的Angular項(xiàng)目。不管你想要使用哪個(gè)Kendo UI for Angular包，完成組件安裝的先決條件都是一樣的，在安裝Angular項(xiàng)目的章節(jié)中有詳細(xì)描述。

安裝組件

你可以選擇使用以下兩種方式來(lái)安裝Kendo UI for Angular包和你想要應(yīng)用的樣式：

用Angular CLI快速設(shè)置

快速設(shè)置提供了一種通過(guò)ng-add命令在Angular CLI中自動(dòng)添加包的方法。它適合于節(jié)省時(shí)間和精力，因?yàn)閚g-add可以在一個(gè)步驟中執(zhí)行一組單獨(dú)需要的命令。

若要添加Kendo UI for Angular Barcodes包請(qǐng)運(yùn)行以下命令：

ng add @progress/kendo-angular-barcodes

因此，ng-add命令將執(zhí)行如下操作：

將@progress/kendo-angular-barcodes包作為一個(gè)依賴項(xiàng)添加到 package.json文件中。

在當(dāng)前應(yīng)用程序模塊中導(dǎo)入BarcodesModule。

在angular.json文件中注冊(cè)KendoUI默認(rèn)主題。

將所有必需的對(duì)等依賴項(xiàng)添加到 package.json 文件中。

觸發(fā)npm install來(lái)安裝主題和所有被添加的同級(jí)包。

手動(dòng)設(shè)置

手動(dòng)設(shè)置提供了更好的可視性和對(duì)安裝在Angular應(yīng)用程序中的文件和引用的更好控制。您可以通過(guò)為每個(gè)步驟運(yùn)行單獨(dú)的命令來(lái)安裝所需的對(duì)等依賴項(xiàng)和Kendo UI主題，并在應(yīng)用程序根目錄或特性模塊中導(dǎo)入所需的組件模塊。

1.運(yùn)行以下命令安裝Barcodes包及其依賴項(xiàng)：

npm install --save @progress/kendo-angular-barcodes @progress/kendo-angular-common
@progress/kendo-drawing @progress/kendo-licensing

2.如果應(yīng)用程序中需要所有條形碼組件，請(qǐng)使用BarcodesModule一次性導(dǎo)入所有條形碼，否則將通過(guò)添加特定組件的各個(gè)模塊來(lái)導(dǎo)入特定組件。

Barcodes包為其組件導(dǎo)出以下單個(gè)模塊：

模塊	組件
BarcodeModule	條形碼
QRCodeModule	QRCode

• 要添加所有條形碼組件，請(qǐng)?jiān)?a target="_blank">根應(yīng)用程序或特性模塊中導(dǎo)入BarcodesModule。

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { BarcodesModule } from '@progress/kendo-angular-barcodes';
import { AppComponent } from './app.component';

import 'hammerjs';

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

• 要添加單獨(dú)的條形碼組件，只需導(dǎo)入根應(yīng)用程序或特性模塊中需要的模塊。

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

// Imports the Barcode module
import { BarcodeModule } from '@progress/kendo-angular-barcodes';

// Imports the QR Code module
import { QRCodeModule } from '@progress/kendo-angular-barcodes';

@NgModule({
bootstrap: [AppComponent],
imports: [
BrowserModule, BrowserAnimationsModule,
BarcodeModule, QRCodeModule
]
})
export class AppModule {
}

3.下一步是通過(guò)安裝可用的Kendo UI主題之一來(lái)樣式化組件- Kendo UI Default， Kendo UI Material或Kendo UI Bootstrap。

3.1開(kāi)始使用一個(gè)主題需要通過(guò)NPM安裝它的包。

• 默認(rèn)主題

npm install --save @progress/kendo-theme-default

• 引導(dǎo)主題

npm install --save @progress/kendo-theme-bootstrap

• 材料的主題

npm install --save @progress/kendo-theme-material

3.2 主題包安裝完成后可在工程中引用，您可以通過(guò)以下方式之一在項(xiàng)目中包含KendoU I主題：

• 通過(guò)使用外部(CDN)鏈接。
• 通過(guò)使用預(yù)編譯的CSS文件。
• 通過(guò)從SCSS源文件編譯主題。

使用組件

1.在成功安裝Barcodes包并導(dǎo)入所需模塊之后，在app.component.html中添加所需組件的相應(yīng)標(biāo)簽。例如，如果需要Barcode組件則添加以下代碼：

<kendo-barcode type="EAN8" value="1234567">
</kendo-barcode>

2.通過(guò)在根文件夾中運(yùn)行以下命令來(lái)構(gòu)建并提供應(yīng)用程序。

ng serve

3.將瀏覽器指向http://localhost:4200，可以在頁(yè)面上看到Angular Barcode組件的Kendo UI。

激活許可證密鑰

截至2020年12月，使用任何來(lái)自Kendo UI for Angular庫(kù)的UI組件都需要一個(gè)商業(yè)許可密鑰或一個(gè)有效的試用許可密鑰。如果您的應(yīng)用程序不包含Kendo UI許可文件，請(qǐng)激活您的許可密鑰。

屬地

下表列出了每個(gè)條形碼依賴項(xiàng)所提供的特定功能：