DevExtreme初级入门教程（Angular篇）：应用程序模板（Part 1）

生成一个新的应用程序

npx -p devextreme-cli devextreme new angular-app app-namecd app-namenpm run start

生成的应用程序已经包含DataGrid和Form组件，您可以在srcpagesdisplay-datadisplay-data.component.html 和 srcpagesprofileprofile.component.html文件中分别找到它们的配置。

布局

该应用程序包括两种布局，它们之间的唯一区别是工具栏所在的位置。

外部工具栏（默认）

内部工具栏

要切换到另一个布局，请打开srcappapp.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]

您可以在srcapppages文件夹下找到添加的视图，此命令还会为srcappapp-navigation.ts文件中添加的视图创建导航菜单项。

DevExpress技术交流群4：715863792      欢迎一起进群讨论