我想为开发人员提供一个使用Angular6创建仪表板的样例。

Ng6DashboardSample 是为了帮助开发人员在Angular6上利用Angular Material实现仪表板而设计的样本。

完整的源代码，
https://github.com/Ohtsu/ng6-dashboard-sample

视频解说（日语），

视频解说（英文）

简而言之

• Ng6DashboardSample はダッシュボードのサンプルであり、Angular6におけるAngular Materialに依存しています。

• Ng6DashboardSample は、mat-grid, mat-card, mat-menu, mat-iconなどを利用しています。

Ng6DashboardSample は、d3.js(ver4.3) および ng6-o2-chartを利用しています。

运行环境

• node.js

• Typescript2

Angular6

安装

以以下方式，從Git中創建一個克隆。

$ git clone https://github.com/Ohtsu/Ng6DashboardSample.git 

请进入生成的Ng6DashboardSample目录，并按以下方式进行安装。

$ npm install 

启动

当您在命令行中启动本地服务器时，将会显示一个包含许多图表的仪表盘。

$ ng serve -o

初期画面

版本

• Ng6DashboardSample : 0.0

• Angular6 : 6.0.0

• TypeScript : 2.7.2

• @angular/material : 6.2.1

• d3.js : 4.3.0

ng6-o2-chart : 0.4.0

请看以下内容

• “Schematics”,

• https://material.angular.io/guide/schematics

• “Angular 5, Angular 6 Custom Library: Step-by-step guide”,

• https://www.udemy.com/angular5-custom-library-the-definitive-step-by-step-guide/

• “Angular 5, Angular 6用 カスタムライブラリの作成: 完全ステップ・バイ・ステップ・ガイド”,

https://www.udemy.com/angular5-l/

修改历史

2018.7.21 version 0.0 uploaded

版权

2018年版权归日本DigiPub公司的大津秀一所有。

许可证

麻省理工学院版权所有，Shuichi Ohtsu拍摄