如果您從頭開始創(chuàng)建一個項目，可使用DevExtreme Angular模板，這是一個簡單的應(yīng)用程序，帶有導航菜單和響應(yīng)式布局中的幾個示例視圖（）。

DevExtreme v21.1最新版下載

您可以使用DevExtreme CLI 生成此應(yīng)用程序：

npx -p devextreme-cli devextreme new angular-app app-name
cd app-name
npm run start

該應(yīng)用程序已經(jīng)包含 DataGrid 和 Form UI 組件，可以在src\pages\display-data\display-data.component.html 和 src\pages\profile\profile.component.html 文件中分別找到它們的配置。以下說明以 Button UI 組件為例展示了如何使用其他DevExtreme UI 組件：

1. 在將要使用它的 NgModule 中導入DevExtreme UI 組件的模塊，打開 src\app\app-routing.module.ts 文件并添加以下代碼：

app-routing.module.ts

// ...
import { ..., DxButtonModule } from 'devextreme-angular';

@NgModule({
imports: [ ..., DxButtonModule ],
// ...
})
export class AppModule { }

2. 在標記中配置 DevExtreme UI 組件，將以下代碼添加到 src\app\pages\home\home.component.html 文件中：

home.component.html

<!-- ... -->
<dx-button
text="Click me"
(onClick)="helloWorld()">
</dx-button>
<!-- ... -->

3. 在應(yīng)用程序類中聲明回調(diào)函數(shù)、事件處理程序和綁定屬性。 在這個例子中，我們在 src\app\pages\home\home.component.ts 文件中聲明了 onClick 事件處理程序：

home.component.ts

// ...
export class AppComponent {
helloWorld() {
alert('Hello world!');
}
}

如果您在瀏覽器中轉(zhuǎn)到主頁視圖，您應(yīng)該會看到按鈕。

DevExtreme | 下載試用

DevExtreme擁有高性能的HTML5 / JavaScript小部件集合，使您可以利用現(xiàn)代Web開發(fā)堆棧（包括React，Angular，ASP.NET Core，jQuery，Knockout等）構(gòu)建交互式的Web應(yīng)用程序。從Angular和Reac，到ASP.NET Core或Vue，DevExtreme包含全面的高性能和響應(yīng)式UI小部件集合，可在傳統(tǒng)Web和下一代移動應(yīng)用程序中使用。 該套件附帶功能齊全的數(shù)據(jù)網(wǎng)格、交互式圖表小部件、數(shù)據(jù)編輯器等。

DevExpress技術(shù)交流群4：715863792      歡迎一起進群討論