AngularJS implementation of the RDash admin dashboard theme

  • By Invertase
  • Last update: Dec 10, 2022
  • Comments: 11

This project is no longer maintained. Please seek other alternatives such as CoreUI or BlurAdmin.

RDash rdash-angular

Responsive, bloat free, bootstrap powered admin style dashboard!

rdash-angular is an AngularJS implementation of the RDash admin dashboard. The dashboard uses a small number of modules to get you started, along with some handy directives and controllers to speed up development using the dashboard.

Check out the live example!

Usage

Requirements

Installation

  1. Clone the repository: git clone https://github.com/rdash/rdash-angular.git
  2. Install the NodeJS dependencies: npm install.
  3. Install the Bower dependencies: bower install.
  4. Run the gulp build task: gulp build.
  5. Run the gulp default task: gulp. This will build any changes made automatically, and also run a live reload server on http://localhost:8888.

Ensure your preferred web server points towards the dist directory.

Development

Continue developing the dashboard further by editing the src directory. With the gulp command, any file changes made will automatically be compiled into the specific location within the dist directory.

Modules & Packages

By default, rdash-angular includes ui.bootstrap, ui.router and ngCookies.

If you'd like to include any additional modules/packages not included with rdash-angular, add them to your bower.json file and then update the src/index.html file, to include them in the minified distribution output.

Credits

Github

https://github.com/Ehesp/Responsive-Dashboard

Comments(11)

  • 1

    LESS

    Greatwork on this theme!

    Right now we are using this template and I decided to make a less stylesheet, so we can easily manage the template easily, well we can separate variables and add some mixins in the future :+1: to fully customize the user needs

    I've added gulpfile.js and package.json. I've also added node_modules in .gitignore

  • 2

    Cleaned up less and js

    Hey, I really like this dashboard and Im using it my small project, although the code was not very clean so I cleaned it up and decided to send You a pull request if you want to merge it. Indents in js files were changed to 2 spaces and in less files also standarized to 2 spaces (like bootstrap is using). Some more cleanup was done in js files but everything works like before.

  • 3

    Update less file added mixins and variables

    • Removed unused task watch-less and perform concat before compiling
    • Removed some variables from sidebar and moved to variables.less
    • Replaced widget-title to widget-header to match added widget-footer
    • Update index.html and removed extra widget-body from extras
  • 4

    Added angular-ui-router and moved content into templates.

    Continuing the 'angularification' of the dashboard. I added angular-ui-router and moved the content into templates within the main index.html. I initially tried to use views in other folders but because everything runs locally (i.e. file://index.html) I was getting 'Cross-Origin Request Blocked'. Ideally we're running on some server (node perhaps?) and these templates are loaded via ajax.

    This is by no means complete. Hoping to get feedback on a way forward.

  • 5

    Angular templateCache

    I know there is some discussion with the "Angular vs CSS Theme" thingy. But I think the templates should not be in the index (if we are going to still provide the basic angular app). And encourage best practices.

  • 6

    Dynamic breadcrumbs

    As a possible fix for issue #28, I used the uiBreadcrumbs directive from michaelbromley/angularUtils to update the breadcrumbs when the route state changes.

  • 7

    Use media queries instead of watching window width

    Allow CSS media queries to compute the style of the sidebar. Make the CSS for the sidebar mobile first. Rename active and related names to expandable to make the intended use clear.

    Calling $scope.$apply() every time window.innerWidth changes will incur unnecessary recalculations. As an app gets more complex this could become a performance issue.

    Note: The media queries should probably be organized and located in a dedicated section, but they are currently added inline to conform to the existing code style.

  • 8

    Fix bower components dependencies and add jquery to bower.json

    Now there is no need to add manually the bower components in the index.html, they will be read from src/components folder and concatenated in the vendor files.

  • 9

    gulp deprecation warning

    Nice dashboard :+1:

    Built this on my machine and noticed that any changes to .less files are not live compiled into css.

    This patch fixes the gulp deprecation warning and fixes the .less watch paths so any saved changes on the less files will be compiled into css.

  • 10

    Gulp optimizations to combine and minify js/css files.

    Incorporated changes references by @crackcomm https://github.com/crackcomm/Responsive-Dashboard/commit/91fc2c8bc328981f9722bb4c7e97042b3ac03440 on #48.

    • Combines and minifies all 3rd party libraries into vendors.min.js
    • Combines and minifies all dashboard js files
    • Incorporates angular template cache and moves dashboard.html and tables.html into templates sub-directory.
    • Compiles less, combines with 3rd party libs and minifies into dashboard.min.css.
  • 11

    chart.js module

    hi team, I have deployed angular-chart.js and I have added it to module.js and index.html but It doesn't work...I mean, the page is empty...could you help me?

    thanks Alex

Popular Tag

Related