创建DevExtreme应用程序

如果你从头开始一个项目，那就使用DevExtreme Angular 模板。生成的项目带导航菜单以及在响应布局中的几个对应的示例视图。

你可以使用 DevExtreme CLI 生成应用程序:

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

注

npx 需要 npm v5.2 或更高。如果是之前的版本，要么升级 npm 要么安装全局 DevExtreme CLI 然后运行命令安装以下包：

npm i -g devextreme-cli
devextreme new angular-app app-name

这个程序中已经包含了DataGrid 组件。 下边的指导演示了如何加入其它的DevExtreme 组件，用 Button 组件来举个例子：

在要用到的地方，在NgModule 中导入DevExtreme组件模块。打开src/app/app-routing.module.ts文件，加入如下代码：

app-routing.module.ts

// ...
import { ..., DxButtonModule } from 'devextreme-angular';

@NgModule({
    imports: [ ..., DxButtonModule ],
    // ...
})
export class AppModule { }

配置DevExtreme 组件标记。添加以下代码到 src/app/pages/home/home.component.html 文件中：

home.component.html

<!-- ... -->
<dx-button
    text="Click me"
    (onClick)="helloWorld()">
</dx-button>
<!-- ... -->

申明Angular中的DevExtreme回调函数、事件句柄、绑定属性。这个例子中 onClick 事件句柄在 src/app/pages/home/home.component.ts 文件中：

home.component.ts

// ...
export class HomeComponent {
    helloWorld() {
        alert('Hello world!');
    }
}

你点了Home页面，你就可以看到按钮了。