Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/creativeit/material-angular-dashboard

Material Angular Admin Template
https://github.com/creativeit/material-angular-dashboard

admin-template angular dark-theme dashboard material-design sass typescript

Last synced: 6 days ago
JSON representation

Material Angular Admin Template

Awesome Lists containing this project

README 

        
# Material Angular Dashboard



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






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 . 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)