First of all, congrats for building this great theme! I'm really impressed with the modularity of components and the usefulness of inline commenting.

I'm just beginning to learn angular (I'm a Java developer), because in want to build a Single Page App for a client of mine. I bought the template yesterday, so started reading the code, trying to figure out how I can change/extend it for my own needs.

I would like your help (even a suggestion will do, to start with) with a couple of requirments that I have to implement.

The first is that my client wants for the application different user roles (e.g. simple user, admin). Depending on the role, the user should be able to view different options at the left sidebar (and therefore will have access to different pages), or even disable some components of the same page (a button, etc). Is that something that I can easily achieve with this template?

And the second is to include an export to csv functionality, in order to export some table data to excel.

Thank you in advance, and keep up the good work!


Regarding to first requirement, we think you will find easy to provide different access depending on the user role. The sidebar menu is generated and configured from a single json string. The json file included (sidebar-menu.json) is only for the demo, the real use case is that your backend provides an url (api) that returns a json string with the format the app requires to build the menu. Then your backend will manage all user logic related (roles, etc) and when the app requires such json string you can build the string based on the user that is currently requesting it. And so provide only links to those view the user is able to see.

The second rq is currently not supported but it's on the way. In the meantime, you can check ngTable that supports table export to csv and seem to work pretty weel http://bazalt-cms.com/ng-table/example/15

In case you need to know something else just write us here or via our profile page.

I downloaded the file and when I open the browser
has the following errors:
* XMLHttpRequest can not load file: /// D: /desenv/workspaces/Angle/app/i18n/en.json. * * Cross origin requests are only supported for protocol schemes: http, date, chrome-extension, https, chrome-extension-resource.
base.js: 6 Error: Failed to run 'send' on 'XMLHttpRequest': Failed to load 'file: /// D: /desenv/workspaces/Angle/app/i18n/en.json'.
     at Error (native)
     at file: /// D: /desenv/workspaces/Angle/app/js/base.js: 6: 7914

He also does not think other files as dashboard.html.
What is the solution to the problem?
base.js the file is compiled into Minify
I would like to receive the original file.
You need a webserver to run the site. The protocol file:// is not supported due to security issue browsers can't perform httpRequest without a server.

You can use the theme with any server. But the installation depends on the server of your choice.
If you have installed nodejs (if not, see the docs for information) here are some instructions to run a basic server to start playing with the theme.

You can do the following (after installing nodejs)
- Install the http-server npm install http-server -g (-g installs globally)
- Once it is installed move to the root folder of the theme (where index.html is located) and run http-server . -a

If everything goes fine you can now access to the app at
first of all i want to thank you about the great template. Really great job.

I need to ask about something
when i collapse the side-bar
,choose extras : timeline
,hover on any icon in the side-bar
,it will be viewed under the timeline not above it
is this issue or you did it for technical purpose?
That's an issue (a weird issue). Just adding z-index:0 to the main timeline element seems to fix it but we will take a deep look into that anyway.

Thanks for report it
Hi guys!
First of all, thank you for the new updates.
I'm having trouble to run gulp. My computer freezes a little bit when I execute the gulp command.
Please check this image to see what I'm doing: http://s18.postimg.org/lc2xjwv2x/gulp.jpg

Is this the last step? because when I'm trying to type something said if I want to cancel the process.

All the steps were successfully executed.

Let me know, thanks.
Hi. I noticed after edit some file that the CMD changes too.
[21:53:04] * was reloaded.
[21:54:27] * was reloaded.
[21:55:00] * was reloaded.

After read the last paragraph on the documentation I also noticed that you mention that will show anything when a file is modified.

I guess all is working properly then. Let me know if I'm in the right way.
Ok, one more thing (I swear)
When I started to understand better what you did and adapt this to my project, I obviously don't need all the files, for example, the views. Also, I need to re-write the sidebar-menu.json and modify the languages, because I don't like to have stuff on my project what I don't really need it.

I understand that when you released a new version that comes with some changes that will affect my project, but only if I apply the "new stuff" properly, because for every update that you made I have to start from scratch and that is not a very good solution for me. And now that I understand better how works jade, gulp, etc I can programmed better than before thanks to you.

What is your recommendation in my scenario? Imagine you bought this theme and want to apply for your project, what will you do?

Thank you for everything.
Hello saruman,

Your workflow is ok, the message " was reloaded" is just to tell that the liveReload plugin has trigger a reload to the browser because a file has changed. Regarding to the "freeze", that's ok, there's no freeze, gulp stops there and stay watching your file to trigger a recompilation if something changes (we will review the docs)

Regarding to updates, we have noticed that issue from another users. Unfortunately we don't have final solution to make updates easier, even we can provide a script to automate theme because we don't know what could have changed a user on its project.
We know at this point is not the best solution for your case, but we think a nice solution is by using a seed project, which is zero features but ready to start a new project, so by leaving features outside the theme you can focus on look at the main files to look for changes without losing time seeing changes in features you don't want to use.

Thanks for your suggestions, and as always we are open to feedback that helps to make your job easier.
I personally find the updates easy to integrate at least from my end. The changelog states the files that changed. Once you understand the dependencies of the different modules you can update what is required. For example for any CSS change, I did not change anything from the original CSS instead I created a new one that has my custom one's. Ideally this allows me to update the CSS files without concerning with any impact to my custom changes ( although it can break them in some rare cases).

For Angular Directives/Controller/Service changes, I trace back the dependencies of the components that I used, for example any updates on Maps related stuff, I don't need so I won't need to touch anything on my side. Thats the beauty of Angular its suppose to be segregrated!
Hi, there is problem with validation message when some input control is put inside input group. I solved it for simple input text by customizing css with:

.input-group .parsley-errors-list.filled {
display: table-caption;

but there is still a problem when I put <select> inside input-group. Can you help me with this one?
Hello, sorry for the delay.

Could you share your source html code to check exactly your case? If you wan to keep it private you can contact us via our profile page here: https://wrapbootstrap.com/user/themicon

<div class="input-group m-b">
<span class="input-group-addon"><em class="icon-badge"></em></span>
<select name="status" data-parsley-group="step3" chosen="" ng-model="model.status" ng-options="s.status for s in statuses track by s.id" required="required" class="chosen-select input-md form-control"></select>

Also I found two problems.
1. There is problem when select (with multple attribute) control is binded to some model. The problem is that when model is modified, then model is cleared, not modified.
2. There is problem with responsibility of table control.
redixint PURCHASED
I have one-page documentation which uses flatdoc. My question is how to anchor to a specific topic in the .md file from other pages. I have been trying to use:

<a href="!/help/#topic ...>

The above does not work. It goes to the top of the documentation page, but not the specific topic. Can you suggest a way to handle this in angular? Thanks.
Hello, currently it doesn't support such feature. It requires an extra functionality to avoid conflicts with angular ui router when the route url changes.
We have it in our plans of future updates. We hope to release it soon.

Hi, error in domunetation :)
<a href="#" title="{{ 'reference.NAME' | translate }">Link</a> missing } in Translation section :)
and error 404 have scrollbar... on low height on notebook like screen
Thanks for report it kepro.
The error 404 uses a technique to fully center the content. The scrollbar is used for those case where the content itself is higher than the screen so the user have a way to scroll the content.

please look http://prntscr.com/5m9l7b there is place on top and bottom...
Please try this CSS media query that seems to fit better for low height devices

@media (max-height: 720px) {
.abs-center {
position: relative;
Great template. Found a small problem after the 1.6 update. When using apache as my webserver. Since it's case-sensitive your references to vendor/Flot/... in app/js/app.js and master/js/modules/constants.js fail to find the needed files. Once I corrected the case it worked fine.
Thanks byrdman662! We have it fixed ready for next update.

dean8454 PURCHASED
I'm in serious trouble...
Some of the Angle CSS classes conflict with the EasyUI, they both have these: ".panel-body", ".slider-handle"...Can you do something about This??
Why you use easyUI if you have angular and bootstrap???
Hello, sorry for the delay.
What classes you see in conflict with EasyUI?
dean8454 PURCHASED
@kepro, not powerful enough, i guess...
dean8454 PURCHASED
@themicon, give up on EasyUI, class names like ".panel-body" are kind of general, many third party components may use them and end up with confiction.

after going through several grid components, I found that Handsontable is quite powerful and it has an angular version, maybe you can integrate it, justing saying...
@dean8454 you're right, panel-body comes from Bootstrap, which makes a bit more complicated to remove the conflict. You may end up editing vendor scripts and is not a good idea.

Handsontable seems to be pretty useful but browser support is a little poor. We will keep an eye on it.
Thanks for your suggestion.

Just FYI, Xeditable for AngularJS http://vitalets.github.io/angular-xeditable/#editable-row
That looks pretty nice to add a similar solution for table edition
base.js the file is compiled into Minify
I would like to receive the original file.
Hello, base.js contains only vendor files. So its content is maintained by some other specific authors and we suggest to avoid any change on this file.
Anyway, the base.js is generated using gulp. If don't use it that's you can take a look at the file **master/vendor.base.json** and there you will see all files included in base.js
All paths are references to the bower folder so you can download them using bower or use the path to get the name of the plugin that references

Let us know if you have any question
I was wondering is the current project using bWizard instead of bootstrapWizard()? As the first one is no longer maintained?
Hello, that's right.
Since version 1.6 the project uses a wizard made with native AngularJS directive (i.e. no external plugin dependency)
I'm trying to use a collapsible panel into a ng-repeat loop,
but I'm having problems with angular expressions:
for the panel id I use an angular expression (id = "panel_{{articleId}} ") and this leads to a problem when the application starts:
the id attribute is correctly "translated" into id ="panel_0", but the value of the attributes of "paneltool" element and the "collapse" attribute of the div above are not "translated" and still have the value "panel_{{articleId}}".
how can I fix it?

tags-input.js not working with ng-model only with value...
Hi, thanks for report it.
Since the plugin requires a comma-separated string and the model fits better with an array the following markup will work
<input type="text" tagsinput="" ng-value="cities.join(',')" ng-model="cities" class="form-control" />

Anyway, we have added an improvement to the directive in order to make it work correctly with ngModel.
You can send us a message via our profile and we will send you the code before we release the update.

or maybe use http://xoxco.com/projects/code/tagsinput/
You can import a list of tags using the importTags() function...

Hi, My company purchased this great theme! :) I was wondering if there was a built-in and easy way to move the sidebar from the left to right side w/o using the rtl flip.
Hello, there's no built in way to change the location but it's possible by editing some CSS. You can contact us via our profile page and we will assist you.
If your contact comes from a non customer user please don't forget to include the purchase confirmation.

can not include a module on the dashboard,
I'm trying to push ng-Table, could help me?

where can I see some examples to understand the structure ... I have the app folders and master, what should I use?

Hello, sorry for the delay.
We have released an update with ngTable and multiple demos

hi guy,
i also need help in ng-table.
my problem in the incorporation the "ng-table" module.
I put "{ name: 'ngTable', files: ['vendor/ngTable/ng-table.js', 'vendor/ngTable/ng-table.css'] },"
Also changed the controler "DataTableController" to "App.controller('DataTableController', ['$scope', function($scope, $filter, $q, ngTableParams) {" the same as example http://bazalt-cms.com/ng-table/example/10

In the app.js set state
.state('app.table-datatable', {
url: '/table-datatable',
title: 'Table Datatable',
templateUrl: basepath('table-datatable.html'),
controller: 'NullController',
resolve: resolveFor('ngTable')

in the html file:

<h3>Data Tables
<small>Tables, one step forward.</small>
<div ng-controller="DataTableController" class="container-fluid">
<button ng-click="tableParams.sorting({})" class="btn btn-default">Clear sorting</button>


<table ng-table="tableParams" show-filter="true" class="table">
<tr ng-repeat="user in $data" ng-class="{ 'emphasis': user.money > 500 }">
<td width="30" style="text-align: left" header="'ng-table/headers/checkbox.html'">
<input type="checkbox" ng-model="checkboxes.items[user.id]" />
<td data-title="'Name'" filter="{ 'name': 'select' }" filter-data="names($column)">
<td data-title="'Money'" sortable="money">
<script type="text/ng-template" id="ng-table/headers/checkbox.html">
<input type="checkbox" ng-model="checkboxes.checked" id="select_all" name="filter-checkbox" value="" />


but appears error
TypeError: undefined is not a function

Please, help me

Hello, sorry for the delay.
We have released an update with ngTable and multiple demos

Really love the theme. I have an issue with the offside bar and initial loading of the app, I can see the close animation of the offside bar when loading the app. There is no content in it, it's just the border of the main content moving from 220px to 0px on the right side. Is this a known issue? Something with the animation classes for the offsidebar?
Hello ecolman, currently we don't have a known issue regarding to your case. Do you have more information about the issue? For example, resolution, browser, device? Also if you can check the error message in your console to see if something is failing to load.

how to change default theme to load with the application?
load app.css and then you favorite color theme
like /app/css/theme-b.css
got it! thanks a lot!
Hey, great template, one thing I've seen, gulp was hanging for me running CLI version 3.8.10

I had to add this to fix it:
gulp.on('stop', function () {
process.nextTick(function () {

Also is there a good way to update the sAjaxSource inside of a controller?

I'm trying to get a datatable to reload based off of a drop down:

'paging': true, // Table pagination
'ordering': true, // Column ordering
'info': true, // Bottom left status text
sAjaxSource: 'jsonreport.php?id=1',
aoColumns: [
{ mData: 'level' },

I'm looking for a way to update that sAjaxSource property but so far I am unsuccessful. Thanks in advance.
Hi, currently we are using gulp 3.8.10 and no issues. If you like to share your gulpfile we can check it.

Regarding to datatable issue, currently it only will support to load just from one source because there's no code to watch for change and reload the table. You may want to check the ngTable ajax demo which is more in the Angular way.

Let us know if you have any question
geezreno PURCHASED
hello, is there any way to set the default themes on load? sorry if this question already answered or there already option in your code, but i can't find it.

and also, is there any way to tell there's sidebar menu have child menu, maybe some left triangle? just to tell user that this menu can collapse.

reply is on page 7 and
load app.css and then you favorite color theme
like /app/css/theme-b.css :)
@kepro Thanks for your support

@geezreno yes, it's possible by editing the markup in the file app/views/partials/sidebar.html. Look for the markup inside <script type="text/ng-template" id="sidebar-renderer.html">
(If you use jade will be more easy to edit the markup.)
In the near future we will add it as optional.


Write a comment

This is a great way to give the seller feedback and ask them questions about their item.

You must sign in to write a comment

Sign in or sign up to make a purchase


Licenses: Details »

Single application $30
  • HTML Template
Bootstrap: Compatible with 4.x
  • Responsive
  • Fluid
  • Fixed-width
  • IE 10, 11
  • Latest Chrome
  • Latest Edge
  • Latest Firefox
  • Latest Safari
Uses Less:No
Uses Sass:Yes
Topic: Internet & Web
Labels: admin, admin template, angularjs, material, meanjs, meteor, mvc, rails, responsive, rtl
Released:4 years ago
Updated:1 week ago
Sold exclusively on WrapBootstrap


Signed up 4 years ago

Need a front-end template?

About Bootstrap

Bootstrap is designed to help people of all skill levels – designer or developer, huge nerd or early beginner. Use it as a complete kit or use it to start something more complex.

Unlike other front-end toolkits, Bootstrap was designed first and foremost as a styleguide to document not only its features, but best practices and living, coded examples.

Built to support new HTML5 elements and syntax with progressively enhanced components.

Browser support

Bootstrap is tested and supported in major modern browsers like Chrome, Firefox, and Internet Explorer.

Tested and supported in Chrome, Safari, Firefox, Internet Explorer, and Opera.
  • Latest Chrome
  • Latest Firefox
  • Latest Safari
  • Latest Edge
  • Internet Explorer 10/11
  • Latest Opera

Features & includes

Bootstrap provides an unparalleled array of features and reusable components that let you hit the ground running:

  • Responsive 12-column grid
  • 12 custom, modular jQuery plugins
  • CSS styles for forms, navigation & more
  • Dozens of reusable components
  • Components are scaled according to a range of resolutions and devices
  • Built with Sass (CSS included)
  • Complete styleguide documentation