DevExtreme Angular應用程序模板可幫助您快速創建一個簡單的Angular應用程序，其中包含一個導航菜單和響應式布局中的多個示例視圖。

DevExtreme v21.1.5最新版下載

生成一個新的應用程序

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

生成的應用程序已經包含DataGrid和Form組件，您可以在src\pages\display-data\display-data.component.html 和 src\pages\profile\profile.component.html文件中分別找到它們的配置。

布局

該應用程序包括兩種布局，它們之間的唯一區別是工具欄所在的位置。

外部工具欄（默認）

內部工具欄

要切換到另一個布局，請打開src\app\app.component.html文件并將app-side-nav-outer-toolbar元素替換為app-side-nav-inner-toolbar：

app.component.html

<app-side-nav-inner-toolbar title="{{appInfo.title}}">
<!-- Layout content is here -->
</app-side-nav-inner-toolbar>

要生成帶有內部工具欄的新應用程序，請將--layout標志設置為side-nav-inner-toolbar：

npx devextreme-cli new angular-app app-name --layout=side-nav-inner-toolbar

添加新的視圖

運行以下命令來添加視圖，--icon 指定中的圖標。

npx devextreme add view view-name [--icon=IconName]

 您可以在src\app\pages文件夾下找到添加的視圖，此命令還會為src\app\app-navigation.ts文件中添加的視圖創建導航菜單項。

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