Ng6DashboardSample Angular6でダッシュボードを作成したいと考えている開発者向けのサンプル
Ng6DashboardSample は、Angular6においてAngular Materialによりダッシュボードを実現しようと考えている開発者向けのサンプルです。
フルソースコード,
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