DevExtreme初级入门教程（Angular篇）：应用程序模板（Part 1）-控件新闻-慧都网

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

原创|使用教程|编辑：龚雪|2021-08-16 10:10:29.887|阅读 271 次

概述：可直接利用DevExtreme Angular应用程序模板快速创建一个简单的Angular应用程序，本文主要介绍如何生成一个新的应用程序以及调整布局、添加视图。

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

标签：

本站文章除注明转载外，均为本站原创或翻译。欢迎任何形式的转载，但请务必注明出处、不得修改原文相关链接，如果存在内容上的异议请邮件反馈至chenjj@evget.com

文章转载自：慧都网