輕鬆搞定B/S端開發——DevExtreme應用程序模板（一）

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 指定DevExtreme icon library中的圖標。

 

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

 

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

---

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

更多DevExpress線上公開課、中文教程資訊請上中文網獲取