Ng6DashboardSample Angular6でダッシュボードを作成したいと考えている開発者向けのサンプル

フルソースコード,
https://github.com/Ohtsu/ng6-dashboard-sample

ビデオ解説 (日本語),
https://youtu.be/3mkYx1YFGoc

ビデオ解説 (英語),
https://youtu.be/s4vXOOU9sp0

概要

• 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

著作権

copyright 2018 by Shuichi Ohtsu (DigiPub Japan)

License

MIT © Shuichi Ohtsu