AngularJS Bootstrap Admin Panel Framework

  • By Akveo
  • Last update: Dec 30, 2022
  • Comments: 16

Build Status

BlurAdmin Angular admin panel front-end framework

Customizable admin panel framework made with ❤️ by Akveo team. Follow us on Twitter to get latest news about this template first!

Demo

Mint version demo Blur version demo
Mint version demo Blur version demo

Angular 2 version

Here you can find Angular2 based version: ng2-admin.

Documentation

Installation, customization and other useful articles: https://akveo.github.io/blur-admin/

If you have problems installing and just want to download JS and css files, you can find download links here: http://akveo.github.io/blur-admin/articles/091-downloads/

How can I support developers?

  • Star our GitHub repo
  • Create pull requests, submit bugs, suggest new features or documentation updates
  • Follow us on Twitter
  • Like our page on Facebook

Can I hire you guys?

Yes! We are available for hire. Visit our homepage or simply leave us a note to [email protected]. We will be happy to work with you!

Features

  • Responsive layout
  • High resolution
  • Bootstrap CSS Framework
  • Sass
  • Gulp build
  • AngularJS
  • Jquery
  • Charts (amChart, Chartist, Chart.js, Morris)
  • Maps (Google, Leaflet, amMap)
  • etc

License

MIT license.

From akveo

Enjoy! We're always happy to hear your feedback.

Github

https://github.com/akveo/blur-admin

Comments(16)

  • 1

    Integrate with ASP.NET MVC 5

    Hello Sir, I would like to integrate this template with asp.net MVC 5, but I can not separate the layers, do not know which file is the server side and client side is which.because it has only js file. how can I build it into HTML like AdminLte ? how can I integrate it with ASP MVC 5

    I found this solution : This is just HTML template, so you can consider each file in it as client-side. In any case our build is based on this generator https://github.com/Swiip/generator-gulp-angular/. So regarding file structure you can refer to its docs

    But I still misunderstand it. Could you help me ?

    Thanks !!!

  • 2

    Possibility of Angular 2.0 based Theme?

    @akveo, This is really nice theme you've created. I would like to know if you have some future plan for Angular 2.0 based theme as well. Since many developers are using angular 2.0 Beta and new component based solutions, Is it possible to have this theme based on it?

    Thanks & nice work!!

  • 3

    building bug: Chart.js not found

    The following error has been raised during theme building: Chart.js seems not to be installed, but actually it is inside app/vendors. Any suggestion to solve it, and proceed with the theme building? After I cloned the repo, I run

    npm install
    bower install
    gulp build
    

    and i get the following:

    gulp-inject 1 files into 404.html.
    stream.js:74
          throw er; // Unhandled stream error in pipe.
          ^
    Error: Error: Chart.js is not installed. Try running "bower install".
        at /blur-admin/node_modules/wiredep/wiredep.js:30:56
        at /blur-admin/node_modules/wiredep/lib/detect-dependencies.js:145:29
        at forOwn (/blur-admin/node_modules/wiredep/node_modules/lodash/dist/lodash.js:2106:15)
        at Function.forEach (/blur-admin/node_modules/wiredep/node_modules/lodash/dist/lodash.js:3303:9)
        at detectDependencies (/blur-admin/node_modules/wiredep/lib/detect-dependencies.js:34:7)
        at wiredep (/blur-admin/node_modules/wiredep/wiredep.js:70:39)
        at DestroyableTransform._transform (/blur-admin/node_modules/wiredep/wiredep.js:135:34)
        at DestroyableTransform.Transform._read (/blur-admin/node_modules/wiredep/node_modules/through2/node_modules/readable-stream/lib/_stream_transform.js:184:10)
        at DestroyableTransform.Transform._write (/blur-admin/node_modules/wiredep/node_modules/through2/node_modules/readable-stream/lib/_stream_transform.js:172:12)
        at doWrite (/blur-admin/node_modules/wiredep/node_modules/through2/node_modules/readable-stream/lib/_stream_writable.js:237:10)
    
  • 4

    i can't install it after gulp serve

    4@lokalhos MINGW64 /c/xampp/htdocs/Pro/66/blur-admin (master) $ gulp serve [12:21:12] Using gulpfile C:\xampp\htdocs\Pro\66\blur-admin\gulpfile.js [12:21:12] Starting 'scripts'... [12:21:13] Starting 'styles'... [12:21:13] 'styles' errored after 75 ms [12:21:13] Error: Cannot find module 'gulp-sass' from 'C:\xampp\htdocs\Pro\66\blur-admin' at Function.module.exports [as sync] (C:\xampp\htdocs\Pro\66\blur-admin\node_modules\resolve\lib\sync.js:40:15) at requireFn (C:\xampp\htdocs\Pro\66\blur-admin\node_modules\gulp-load-plugins\index.js:65:25) at Object.get [as sass] (C:\xampp\htdocs\Pro\66\blur-admin\node_modules\gulp-load-plugins\index.js:108:41) at buildStyles (C:\xampp\htdocs\Pro\66\blur-admin\gulp\styles.js:58:13) at Gulp. (C:\xampp\htdocs\Pro\66\blur-admin\gulp\styles.js:20:10) at module.exports (C:\xampp\htdocs\Pro\66\blur-admin\node_modules\orchestrator\lib\runTask.js:34:7) at Gulp.Orchestrator._runTask (C:\xampp\htdocs\Pro\66\blur-admin\node_modules\orchestrator\index.js:273:3) at Gulp.Orchestrator._runStep (C:\xampp\htdocs\Pro\66\blur-admin\node_modules\orchestrator\index.js:214:10) at Gulp.Orchestrator.start (C:\xampp\htdocs\Pro\66\blur-admin\node_modules\orchestrator\index.js:134:8) at C:\Users\4\AppData\Roaming\npm\node_modules\gulp\bin\gulp.js:129:20 [12:21:13] gulp-inject 52 files into main.scss. (node:27360) UnhandledPromiseRejectionWarning: Error: Error: jquery is not installed. Try running bower install or remove the component from your bower.json file. at C:\xampp\htdocs\Pro\66\blur-admin\node_modules\wiredep\wiredep.js:30:56 at C:\xampp\htdocs\Pro\66\blur-admin\node_modules\wiredep\lib\detect-dependencies.js:149:29 at C:\xampp\htdocs\Pro\66\blur-admin\node_modules\lodash\lodash.js:4944:15 at baseForOwn (C:\xampp\htdocs\Pro\66\blur-admin\node_modules\lodash\lodash.js:3001:24) at C:\xampp\htdocs\Pro\66\blur-admin\node_modules\lodash\lodash.js:4913:18 at Function.forEach (C:\xampp\htdocs\Pro\66\blur-admin\node_modules\lodash\lodash.js:9359:14) at detectDependencies (C:\xampp\htdocs\Pro\66\blur-admin\node_modules\wiredep\lib\detect-dependencies.js:34:7) at wiredep (C:\xampp\htdocs\Pro\66\blur-admin\node_modules\wiredep\wiredep.js:70:39) at DestroyableTransform._transform (C:\xampp\htdocs\Pro\66\blur-admin\node_modules\wiredep\wiredep.js:136:34) at DestroyableTransform.Transform._read (C:\xampp\htdocs\Pro\66\blur-admin\node_modules\readable-stream\lib_stream_transform.js:182:10) (node:27360) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1) (node:27360) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code. [12:21:15] all files 252.78 kB [12:21:15] Finished 'scripts' after 3.18 s

  • 5

    gulp build problem

    this is a really odd one. forgive for asking.

    what would cause the generated index.html to include vendor.css and vendor.js.

    ive built the project in a standalone directory just fine with the autogenerated vendor-309303 css/js. however when i copy the src dir, bower.json, pakcage.json into a spring server project the build tasks look like they all complete just fine. however, there are two files that cannot be found by the brower when running under spring server(vendor.css and vendor.js)

    the other js and css files are good, they can be found by the browser.

    why would one folder work and another one not work. tried npm clean and install, rebuild node-sass, ensured the exact gulp files are the same.... lost

    thx

  • 6

    ui-router and submenu

    Hi,

    I want create a child page for a state in my sidebar, but i won't create submenu for that child, how I can do this? I really have to create a static content page?

    $stateProvider
                .state('dashboard', {
                    url: '/dashboard',
                    templateUrl: 'app/pages/dashboard/dashboard.html',
                    title: 'Dashboard',
                    sidebarMeta: {
                        icon: 'ion-android-home',
                        order: 0,
                    },
                })
               .state('dashboard.clients', {
                    url: '/clients',
                    controller: 'ClientsPageCtrl',
                    controllerAs: 'vm',
                    title: 'Clients',
                    templateUrl: 'app/pages/clients/clientsTemplate.html',
                    sidebarMeta: {
                        icon: 'ion-person-stalker',
                        order: 300
                    },
                });
    
  • 7

    Support for ES6 code

    is there any way, I can run babel transpiler before the uglify code runs for app/**/*.js ? I have added babel in build scripts

    gulp.task('scripts', function() {
      return buildScripts();
    });
    
    function buildScripts() {
      return gulp.src(path.join(conf.paths.src, '/app/**/*.js'))
        .pipe($.babel({presets: ['es2015']}))
        .pipe($.eslint())
        .pipe($.eslint.format())
        .pipe($.size())
    };
    

    However , I get Unexpected token '=>' while runninggulp serve:dist`

  • 8

    npm install error

    I got many errors when I run the npm install. Below is the error log:

    Bus error (core dumped) npm ERR! Linux 4.4.0-62-generic npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "install" npm ERR! node v0.12.0 npm ERR! npm v2.5.1 npm ERR! code ELIFECYCLE

    npm ERR! [email protected] postinstall: node scripts/build.js npm ERR! Exit status 135 npm ERR! npm ERR! Failed at the [email protected] postinstall script 'node scripts/build.js'. npm ERR! This is most likely a problem with the node-sass package, npm ERR! not with npm itself. npm ERR! Tell the author that this fails on your system: npm ERR! node scripts/build.js npm ERR! You can get their info via: npm ERR! npm owner ls node-sass npm ERR! There is likely additional logging output above.

    npm ERR! Please include the following file with any support request: npm ERR! /home/bright/project/idea-project/blur-admin/npm-debug.log

  • 9

    Support for ES6

    Is it possible to include support for ES6 in the build pipeline ? That will help in adding new modules with the ES6 class structure. I have been trying ES6 controllers along with gulp-babel to build, but cannot get it going

  • 10

    [Q] need somehelp about sass

    so currently, my apps route kinda looks like this

    • login
    • app
      • ...
      • ...
      • ...
    • etc.

    the login are placed at top level routing. i want to reproduce your login.html into those route. i kind of messing around a bit. copy & paste auth.scss files and then rename it into login.scss. it works great, but then again, it changes styles for app path too. like the background changing etc. it follow auth.scss files style. can you point out as to how to make it only change the styles for login route ?

    sorry, no example right now. only words.

  • 11

    Gulp

    When I Running 'gulp' CMD Command In Root Folder And gulp running good and creating release folder and .tmp folder...

    But Project not compiling good And index.html not created in release folder!

    How to fix This Problem?

  • 12

    Cant gulp serve the project

    if im using gulp serve i get the following error

    E:\Project\blur-admin>gulp serve AssertionError [ERR_ASSERTION]: Task function must be specified at Gulp.set [as _setTask] (E:\Project\blur-admin\node_modules\undertaker\lib\set-task.js:10:3) at Gulp.task (E:\Project\blur-admin\node_modules\undertaker\lib\task.js:13:8) at Object.<anonymous> (E:\Project\blur-admin\gulp\build.js:28:6) at Module._compile (internal/modules/cjs/loader.js:1063:30) at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10) at Module.load (internal/modules/cjs/loader.js:928:32) at Function.Module._load (internal/modules/cjs/loader.js:769:14) at Module.require (internal/modules/cjs/loader.js:952:19) at require (internal/modules/cjs/helpers.js:88:18) at E:\Project\blur-admin\gulpfile.js:13:3 { generatedMessage: false, code: 'ERR_ASSERTION', actual: false, expected: true, operator: '==' }

    im using gulp 4.0.0

    line 13:3 im gulpfile is:

    require('./gulp/' + file);

    wrench.readdirSyncRecursive('./gulp').filter(function(file) { return (/\.(js|coffee)$/i).test(file); }).map(function(file) { require('./gulp/' + file); });

  • 13

    The operation `#e85656 minus 24` is deprecated and will be an error in future versions. Consider using Sass's color functions instead.

    DEPRECATION WARNING on line 41 of C:/Users/admin/Desktop/blur-admin/src/sass/theme/_buttons.scss: The operation #e85656 minus 24 is deprecated and will be an error in future versions. Consider using Sass's color functions instead.

    error:$color - $hover correct :$color - #{$hover}

  • 14

    Cannot install on Ubuntu 18.04?

    I ran: sudo npm install bower -g sudo npm install gulp -g

    then

    npm install gulp serve

    This is the error i get:

    ReferenceError: primordials is not defined
        at fs.js:36:5
        at req_ (/root/blur-admin/node_modules/natives/index.js:143:24)
        at Object.req [as require] (/root/blur-admin/node_modules/natives/index.js:55:10)
        at Object.<anonymous> (/root/blur-admin/node_modules/vinyl-fs/node_modules/graceful-fs/fs.js:1:37)
        at Module._compile (internal/modules/cjs/loader.js:1137:30)
        at Object.Module._extensions..js (internal/modules/cjs/loader.js:1157:10)
        at Module.load (internal/modules/cjs/loader.js:985:32)
        at Function.Module._load (internal/modules/cjs/loader.js:878:14)
        at Module.require (internal/modules/cjs/loader.js:1025:19)
        at require (internal/modules/cjs/helpers.js:72:18)
    
    

    How can i fix this?

  • 15

    Issue on defaultText after changing theme to Blur Theme

    I set this in theme.config.js: blurAdminIssue

    function config(baConfigProvider, colorHelper, $provide) {

    $provide.decorator('$uiViewScroll', uiViewScrollDecorator);
    baConfigProvider.changeTheme({blur: true});    
    baConfigProvider.changeColors({
      default: 'rgba(#000000, 0.2)',
      defaultText: '#ffffff',
      dashboard: {
        white: '#ffffff',
      },
    });
    

    }

    However the text didn't change to white. I've been trying to find some solutions but I can't find one related to this issue.

  • 16

    Blur admin pagination issue

    Hi All, I am having some issue with pagination in blur admin, when there is long listing and scrolling in the page the listing is not displaying unless I scroll down. But if there is less data and no scrolling in the page it is displaying automatically. I have no idea how to fix that. I have used blur admin pagination structure like using st-pagination, st-items-by-page parameters. Please help. Thanks in advance.