material-angular-dashboard — Angular 后台模板

SHA-256: 363f65cf78d0f908fd4f5fc477e449c581a8ae3acc06c7e293ec9ac16d3070c1

2026-10-02T17:53:54.976Z

# Material Angular Dashboard

Welcome to the first dark dashboard with Google Material Design and Angular!

<a target="_blank" href="http://material-angular-dashboard.creativeit.io/"><img src="https://trello-attachments.s3.amazonaws.com/55f8466d8f95075bca20dd66/5bf421455ab0f05102cadac9/eee32e50e9fc278b715442a3fc6f65aa/Readme.png"/></a>

Its much more fun with the [demo](http://material-angular-dashboard.creativeit.io).

Material admin template is absolutely free for commercial usage theme, based on Google Material Design guidelines.

> **Important**: We are still working on the project and there will be much more awesome, check out our [issues](https://github.com/CreativeIT/material-angular-dashboard/issues) to see what features are coming soon.

# SETUP and USAGE

The steps below will take you through cloning your own fork, installing dependencies and building:

1. Fork and/or clone our repository. To use Git from command line, see the [Setting up Git](https://help.github.com/articles/set-up-git/) and [Fork repo](https://help.github.com/articles/fork-a-repo/) articles.

```bash
git clone https://github.com/CreativeIT/material-angular-dashboard.git
```

2. Open your copied repo folder in terminal and install necessary modules with command, make sure that you have installed [npm](https://www.npmjs.com/get-npm):

```bash
npm install
```

3. Install [angular-cli](https://cli.angular.io/) globally to use its commands in the terminal:

```bash
npm install --global @angular/cli
```

4. Now you are able to run or build the project:

Run `npm start` or `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.

Run `npm run build` or `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.

# FEATURES

* Angular

* [Material Design](http://www.google.com/design/spec/material-design/introduction.html)

* TypeScript

* Responsive dark material design. DARK, Carl!

* User experience focused

* [Sass](http://sass-lang.com/)

* [D3](https://d3js.org/) and [NVD3](http://nvd3.org/)

* [ag-Grid](https://www.ag-grid.com)

* [material-angular-select](https://github.com/CreativeIT/material-angular-select)

* MIT License

# Additional

Since the project uses [BEM](http://getbem.com) structure with sass, it can be customized in an easy way by editing `src/theme/scss/_variables.scss` file.

Project uses [d3](https://d3js.org/) and [nvd3](http://nvd3.org/) to build charts and chart components and [ag-Grid](https://www.ag-grid.com) to build advanced tables.

# Quick start
Do you want to start quickly and don't need all the pages and modules? You can checkout to empty 
[starter-kit branch](https://github.com/CreativeIT/material-angular-dashboard/tree/starter-kit) and get to work!

If you need full-stack solution with authentication ability and routing, checkout
[feature/backend branch](https://github.com/CreativeIT/material-angular-dashboard/tree/feature/backend) with preconfigured Node.js backend.
You can also try the [demo](http://dashboard-auth-demo.creativeit.io) (user: [email protected] , password: admin).

You can also try dashboard powered with [AWS Lambda](https://aws.amazon.com/lambda/). This allows you to easily deploy your application without the need for a dedicated server.
Checkout [feature/serverless branch](https://github.com/CreativeIT/material-angular-dashboard/tree/feature/serverless) to see the details or try the [demo](https://g5ope910kg.execute-api.eu-central-1.amazonaws.com/production/) (user: [email protected] , password: admin) to make sure that this is no different from the classic approach.

# Hire us

We are ready to become a strong development partner and bring competitive advantage to your business. Visit our site [creativeit.io](http://creativeit.io/) or drop us a line <[email protected]>. We will be happy to help you!

# Credits

Material Angular Dashboard was inspired by [html5 material dashboard](https://github.com/CreativeIT/material-dashboard-lite)

Designed with passion and coffee by CreativeIT.

# Support the project

* Star the repo :star:

* Create an issue report or feature request

* Follow us on [Twitter](https://twitter.com/intent/follow?screen_name=CreativeITeam)