轻松搞定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线上公开课、中文教程资讯请上中文网获取