5139 comments

Hi,

I need to call Restangular to use RestangularProvider.setBaseUrl(''); How I can implement this?

Thank you
Hi, you can add your own code following this steps.

- Create a file custom.js and include it in your index.html
- Then add the following javascript
var myApp = angular.module('myAppName', ['angle']);
- Change the data-ng-app attribute in index.html to load your angular application
<html data-ng-app="myApp">

Now you have in myApp a reference to all your modules and you can inject Restangular in your app.

Regards
not working:

Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.2.23/$injector/modulerr?p0=myApp&p1=Error%3A%…20(http%3A%2F%2Falexandrucatalin.ro%2Fravi%2Fapp%2Fjs%2Fbase.js%3A5%3A6210)
Could you tell us what module fails to be injected?
I experience the same problem. Did you solved yours?
There are two ways of load vendor files (jquery plugins, angular modules, etc)

- If it's an Angular module that must be injected in the app dependencies list, is necessary to add the code into the `base.js`. This is possible by using the gulpfile variable `vendorBaseScripts` and compiling the source again, or appending the code to the bottom of the base.js file (for no gulp users) (example: ngStorage plugin)

- To use it with the lazy load system, check the APP_REQUIRES constant definition. It contains all plugins that your app will require only when a certain route is requested. The `modules` property is used only for Angular based plugins. Then in the app config (App.config) is possible to use the function resolveFor('name'), where 'name' is the name used in the constant definition. (example: toaster plugin)

Let us know if you have any question
Regards
mbabish PURCHASED
Has anyone had any luck modifying/trimming this code to work on IE8? There are a few pure HTML templates on wrapbootstrap that run on IE8, but I'd prefer something that's easier to maintain and modify.

I understand that ANGLE doesn't support IE8, so no complaints if this isn't possible. But I'm a big fan of the way this template is designed, so if there's a way to get it working with IE8, even with limited functionality, that would be awesome.

Thanks!
Hi, we have not had time to review this issue, but we want to let you know that when we have a chance we will see if possible to support ie8.

Thanks
Regards
mbabish PURCHASED
Thanks! Let me know!
This could help with the basics http://www.zell-weekeat.com/support-for-older-browsers/
No tested yet.
c-myers1 PURCHASED
Hi,

1) can you comment on if this would work seamlessly with KendoUI widgets? I would like to use advanced charting from there.

2) what's the purpose of NullController which is an empty controller function? As a controller is optional within the .state objects, Is this just a placeholder or does it serve any other purpose within the app?
Hi,

1) You can take a look at http://kendo-labs.github.io/angular-kendo/#/
2) Yes, NullController is just a placeholder for customization reference. You can remove it if you want.

Regards
Hi,

I have a chosen multiple select field in a form in a modal popup. I'm trying to add options to it from an object in my scope.

This is how my jade looks like:
select.chosen-select.input-md(multiple='', chosen='', data-placeholder="Choose a Recipient", data-ng-options="recipient.name for recipient in recipientsList")

(I have tried both data-ng-options and ng-options)

And here is my object in the ModalInstanceCtrl:
$scope.recipientsList = [{ "value": 1, "text": "1st" }, { "value": 2, "text": "2nd" }];

But nothing shows up in the dropdown box.
div(ng-bind="recipientsList") returns the object so that shouldn't be the problem.
Any ideas how to get this working?

Best regards
Hi, your code seems to be Ok. Anyway, we have an improvement for the chosen directive, if you can send us a message via our profile page so we could send you the code (just a few lines) to see if that works in your case.

Regards
nssidhu PURCHASED
I am new to Angular, I have created new page which gets the data from Server. i want to display error when the get fails, how can i display the error message using Modal dialog and/or alert from within my controller.

This is how my controller looks. nothing happens when the line toaster.pop(No error upon the execution);

App.controller('CountryStateCityCtrl', ['$scope', '$http','toaster', function CountryStateCityCtrl($scope, $http, toaster) {
$scope.SelectedCountry = null;
$http.get('http://localhost:3584/app/js/countries1.json')
.then(function (response) {
$scope.Countries = response.data;
}
, function (error) {
$scope.CountriesError = JSON.stringify(error.StatusText);
ltoaster = {
type: 'danger',
title: 'Title',
text: $scope.CountriesError
};
toaster.pop(ltoaster.type, ltoaster.title, ltoaster.text);
});
Hi, you need to create also the container element for toaster. For example, in the view that uses the controller add the following markup

<toaster-container toaster-options="{'position-class': 'toast-top-right', 'close-button':true}"></toaster-container>

Regards
Hi all,
what is the best way to have some sticky footer content in the page? I would like add pagination to one page, and have it sticky at the bottom of the content but couldn't find any easy ways to make it stick to the bottom of the window, not of the content. Any hints on this? Is there any class that can help me make things stick, similar to notifications, hovering above content?
Thanks for your help in advance.
C
Hi, currently there's not helper to achieve that but we're working on add more layout options.
In your case, you can create an element with this styles to make it stick. Basically, the element must be fixed and located at some place.

.sticky-element {
position: fixed;
right: 20px;
bottom: 70px;
max-width: 120px;
z-index: 9001;
/* more visual style, background, color, etc */
}

There are more options to consider according to how your element should looks like. For example, the bottom: 70px is used to not overlap the <footer> element but can have any value, same for max-width and right props.

Please feel free to contact us through our profile page if have any question.
Regards
thanks, this was helpful. c
is there a simple way to update the chosen select, once the data has been loaded via angular? my jade looks like this:
select#artistselect.chosen-select.input-md(ng-model="pfilter" chosen)
option(value='') All
optgroup(ng-repeat="p in people" label='{{ p.status }}')
option(ng-repeat="artist in amenu.data" value='{{ p.id }}') {{ p.firstname }} {{ ü.lastname }}
all that is showing up is the select all, everything else is not showing up, since chosen does not update. can i easily update on the promise of the loaded json data in my controller? how would that work?
thanks for all the help.

best, c
Hello cassandra, please send us a message vía our profile page so we can send to you the fixed code before it is released in a new update.

Regards
The left side navigation disappears when refreshing the page in Safari v7.0.5! When the browser is resized the left side navigation appears!
How this problem can be fixed?
Hello, this issue has been fixed but it's next to be released in a new update.
Please send us a message vía our profile page so we can send to you the fix.

Regards
Don't we have other type of payments than paypal

Paypal is not yet available in my country. I have skrill, mastercard, visacard ...

Please make me a choice to pay. I love this theme and I want to buy it ASAP
fplat PURCHASED
Hi, your theme is very, very good but ... the wizard with validation is not working correctly.
I'm using Internet Explorer 9.
Thanks.
Hi, thanks for report the issue.
Actually the wizard validation works fine but there's missing 'parsley' plugin.
You can fix it easily using the lazyLoad system. Edit file config.js or in app.js and search for the App.config section. Then add a resolve for that plugin like this
...
resolve: resolveFor('bwizard', 'parsley')
...

Thanks
What is the best way to implement version updates without overwriting my custom code?
Your custom should be the most separated as possible from the item code. So when you check difference before apply an update you can upgrade files directly and in other case you will need to see which lines changed and sync your custom version with the update
dean8454 PURCHASED
Hi, can you send me the local package of the google fonts css and woff2 files? (or the local version of Angel theme),
"fonts.googleapis.com/css" and those woff2 can not be accessed for some reason...
Please see here to download SourceSansPro http://www.fonts2u.com/source-sans-pro.font
c-myers1 PURCHASED
I was excited to see your change log mentioning inclusion of sample ui-router resolve but alas it seems to be for loading libraries and not calling a REST back-end.

To ease into developing on Angle gradually, I'm simply trying to call my REST service from one of the states. I modified the relevant state as follows:

.state('app.table-extended', {
url: '/table-extended',
title: 'Table Extended',
templateUrl: basepath('table-extended.html'),
resolve: {
customerResource: "customerResource",
customer: function (customerResource) { return customerResource.query().$promise; }
},
controller: 'CustomerCtrl'
})

Added this factory:

App.factory("customerResource",
["$resource", function ($resource){
$http.defaults.headers.common['X-DreamFactory-Session-Token'] = 'f8uamta5gbbq7so8o3aafog010';
console.log($http.defaults.headers.common['X-DreamFactory-Session-Token']);
return $resource('http://localhost:8090/rest/myapi/customer');
}]);

And defined the controller:

App.controller("CustomerCtrl", ['$scope','customer', function CustomerCtrl($scope, customer){
$scope.customer = customer;
console.log($scope.customer);
}]);

The Outcome:

This view never works. When Table Extended is clicked, I see the progress bar move quickly first and then slows down close to the right side of the screen but never completes. The most frustrating thing is nothing is logged in the console in terms of error. I notice the REST URL is never called looking at the network tab in chrome developer tools. It also does not execute any of the debugging console.log statements I inserted above for troubleshooting. When I delete the "resolve" from the state, the table-extended view loads up normally.

Do you have an idea why this is not working?
Hi, it seems you need to inject the $http service in your factory
Try if this works

App.factory("customerResource",
["$resource", '$http', function ($resource, $http){ ...
jancel PURCHASED
It seems that this theme is incompatible with making $resource based requests. I've got a service example that I can't get loaded (similar to the above user's requirements) and I've been stuck on it for days. In each case, resolve will not throw an error, it won't find the resource (other service using $resource), and it won't do anything, it just sits & spins if you've navigated to it.

We can use $http to get resources, but we don't do that in the angular world, we use $resource to map the restful interface. Getting something in the README with an example of using a restful resource in this generation would be very fun. at $100/hour, and being stuck for at least 20 hours on an issue, just isn't fun.
jancel PURCHASED
Interesting as it may sound, I started looking at this and I think $resource is a plugin, so obviously blind at the moment. It's been a rough couple days. I'll reply if I can get it plugged in.
jancel PURCHASED
@c-meyers-1. To get $resource working, I added this to my gulpfile under vendorBaseScripts....

'../vendor/angular/angular-resource.min.js',

Then to get it going, add 'ngResource' to the module definition in app.init.js, here...

var App = angular.module('angle', ['ngRoute', 'ngAnimate', 'ngStorage', 'ngCookies', 'ngResource', 'pascalprecht.translate', 'ui.bootstrap', 'ui.router', 'oc.lazyLoad', 'cfp.loadingBar'])

And then you can reference it at will. (My Exampe is NOT Adapted to yours, but similar).....

resolve: angular.extend(
resolveFor(), {
// YOUR RESOLVES GO HERE
resource: ['$resource', function($resource){
return $resource('app/rest/projects/:id', {}, {
'query': { method: 'GET', isArray: true},
'get': { method: 'GET'}
});
}],
projects: ['resource', function(resource){
return resource.query();
}]
}
)
c-myers1 PURCHASED
@jancel: thanks so much but this is all rather deep for an angular newbie. So before I try I'd like to clarify: I take it I do not need to use angular.extend nor resolveFor for it to work?

For now I'm modifying the app.js directly so not getting tangled with gulp.
jancel PURCHASED
You don't need either .extend OR resolveFor, but it works the way you have it, the way it's document and any other flavor of resolve. If you take the Gulpfile change and add 'ngRoute' into your app.init.js, your stuff should work just fine. The gulpfile is just adding a file that's already there to compile into base.js. I would suggest that this be part of the library, but it's up to @Themicon.

Send me an email if you want me to send you the gulpfile mod directly, it's a novice change. I can't post it here, because it's a very long piece of code.
@c-meyers-1 to avoid using gulp and to include the angular-resource module, you can edit the file base.js and paste at the bottom the content of the file "vendor/angular/angular-resource.min.js". Then add to the app's dependencies list the module ngResource.

var App = angular.module('angle', [ ... , 'ngResource'])

It seems you're doing the right things, your code looks ok so it should work after this changes, if not, feel free to contact us again.

@jancel: thanks for your help on this issue. We suggest you for next time to report us the issue, we will do the best to assist you.

At last, the ngResource module will be included as part of the package in next updates.
Regards
jancel PURCHASED
Thanks @themicon, I think that's an excellent choice; been enjoying digging in; what a fun playground. Of all the theme's I've bought, this is the first one that has "real" organization.
We really appreciate your feedback @jancel
Thanks!
c-myers1 PURCHASED
Thanks both but not so fast!

I forgot to mention I had the following all along:

1) my app definition was var App = angular.module('angle', ['ngRoute', 'ngAnimate', 'ngStorage', 'ngCookies',.... i.e. I had the ngResource injected

2) In index.html I inserted this between base.js and app.js scripts
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-resource.min.js"></script>

Now through my novice eyes I couldn't see why it wouldn't work but following your instruction (opting for non-gulp route) I pasted contents of '../vendor/angular/angular-resource.min.js' at the end of base.js and retried but still the problem remains.

Do I have to re-gulp or is there something else I'm overlooking here?
c-myers1 PURCHASED
Sorry I truncated my paste in error. I meant:

var App = angular.module('angle', ['ngRoute', 'ngAnimate', 'ngStorage', 'ngCookies', 'pascalprecht.translate', 'ui.bootstrap', 'ui.router', 'oc.lazyLoad', 'cfp.loadingBar', 'ngResource'])
Hi c-myers1, just to know, did you try injecting the $http service in your factory as we stated above?
To find errors you can also check this page
https://github.com/angular-ui/ui-router/wiki#state-change-events
look for the $stateChangeError

Optionally you can send us a message via our profile page with a demo that we can check for you.
Regards
c-myers1 PURCHASED
My bad, I overlooked that detail. Thank you, that resolved the problem.
simeon PURCHASED
Hello and, first, thanks for the great work!

I'm looking for an option to embed an always visible search bar into the navigation bar instead of sliding it from the top. Ideally I'd like to have it in the middle with the automatically adjusted width depending on the page width. Could you please give me some hints on how it can be achieved?
Hello, to use the standard navbar search you need to remove the custom styles to make it slide from top.
First, remove the form markup and include the standard from bootstrap
Then, remove all style that start with .topnavbar .navbar-form (if you work with less, the file is top-navbar.less)

After that, you should be able to include a visible search form in the navbar. Regarding to the position, you will need to add custom css to locate it in the middle because bootstrap only allows right or left alignment,

Thanks
Hi, is it possible to get a summary of the changes/fixes in 1.1 and 1.2 versions please. Sorry if this is already posted somewhere and I missed it. Thanks.
Hi, in the item description page there's a button with the changelog. Right below the item picture.
ChrisMK PURCHASED
The Parsley library / directive when used on a form with multiple buttons breaks the buttons.
So having an element on the page like "ng-click='onSomeClick()' and a $scope.onSomeClick = function () { console.log("button hit"); }
Never gets hit.

Seems to be a known issue with parsley + angualrjs

http://stackoverflow.com/questions/19934222/parsley-validation-not-working-angular-js
We tested it using ng-submit on form elements and ng-click on button(type=submit) and both case seems to be working fine.
ng-submit case, the $scope function runs before submit if the form validates correctly, if not never runs.
ng-click case, the $scope function runs always before the form is validated.

If you have a case to show us, you can send it via our profile page in order to keep it private.
Regards
tonyfa PURCHASED
good morning, I have purchased the product Angle - Bootstrap App + Admin AngularJS with Single License Application, I wonder if the license allows me to use the template in developing a web system where multiple users will be able to access web system.
Please see here the details of the Single License http://support.wrapbootstrap.com/knowledge_base/topics/usage-licenses
tonyfa PURCHASED
understood what the details of the license is that I can only use the template on one project, and that the final product is not resold.
so if I can use the template to create a web system where they will be able to access users? Yes or no
Usually this kind of templates can be used with a backend to display some information, such information can be the same for everyone or particular for each user that access to the system. Because of that, it depends on your project needs.
The licenses talks about the software installation, the single license allow to have only one install, from you and on your own server. Regardless of whether or not users can access the system, they can not download or install the software on their pc/mac/mobile device.
There are more considerations in the license terms. We suggest you in case you have more deep questions, Wrapbootstrap support could give you a better explanation and guide you to understand better what is more suitable for your case.

Thanks
tonyfa PURCHASED
Hello, I would like to know how you can perform the following functions:
.state('app', {
url: '/app',
abstract: true,
templateUrl: basepath('app.html'),
controller: 'AppController',
resolve: resolveFor('fastclick', 'modernizr', 'icons', 'screenfull', 'animo', 'sparklines', 'slimscroll', 'classyloader', 'toaster', 'csspiner')
})
.state('app.home', {
url: '/home',
title: 'home',
templateUrl: basepath('home.html'),
resolve: resolveFor()
})
.state('app.home.view', {
url: '/home/info',
title: 'info',
templateUrl: basepath('home_view.html'),
controller: 'NullController',
resolve: resolveFor()
})
ie first enter the home of the menu option and load the template 'home.html', then go to the template 'home_view.html' from the previous template without leaving the selected menu option, ie to continue active initially the selected menu option.,
1. / home
2 .- / home / info
but always remains enabled the home of the menu option.
Hello, top level menu link are not supported yet.
We tested your case and found that when you click on the parent menu item, the items highlights correctly but on child items it deactivates the menu. This only happens when using links at top level menu items.

We have already a fix for next updates but you can contact us via our profile page in order to send you the fix.

Thanks
redixint PURCHASED
Thank you for a great job. I am prototyping to integrate the Angle into my mean stack. In my application, the top-navbar, offsidebar are not necessary, so I removed them. The sidebar shows correctly. However, the problem is the sidebar width. Currently, the sidebar width occupied the whole screen. If I am changing the side-bar width in the app-rtl.css file to 20%, the side-bar width shrinks.However, if I select a menu from the sidebar, the body content did not appear to the right-hand side of the screen, Rather, the body shows at the bottom of the page. I am wondering if there is a way to resolve my problem. Thanks.
redixint PURCHASED
I was able to do this by simply using the traditional approach.
<div class="container"><div class="row"><div class="col-md-2"><sidebar...></div><div class="col-md-10"><content ui-view...></div></div></div>

I am wondering if there is Angle approach of doing the above. Thanks.
Hi, removing the markup for the topnavbar and offsidebar in the file app.html (or .jade) should not break the sidebar. It will keep an extra space for the top navbar but you can fix it by editing the css.
Is possible that you have removed entirely a selector or a file (.less) ? It seems you have missing some rule, because the sidebar is contained within an aside element that controls its width.
Thanks for the custom.js. That helps a bunch!

It would be great if:
- The Theme settings where also included in the ngStorage-layout localStorage by default.
- _head.jade title should be: title(data-ng-bind="pageTitle()") {{app.name}}
- index.html title should be <title data-ng-bind="pageTitle()"></title>

Also, there are a few type-o's in /app/documentation/readme.md
Hi, thanks for your suggestions and feedback. We will having them in mind for next updates!

Regards

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

$24
11056Purchases

Licenses: Details »

Single application $24
Version:3.8.2
Type:
  • HTML Template
Bootstrap: Compatible with 3.3.x
Layouts:
  • Responsive
  • Fluid
  • Fixed-width
Browsers:
  • IE 9, 10, 11
  • Latest Chrome
  • Latest Edge
  • Latest Firefox
  • Latest Safari
Uses Less:Yes
Uses Sass:Yes
Categories:
Tags: admin, admin template, angularjs, material, meanjs, meteor, mvc, rails, responsive, rtl
Item#:WB04HF123
Released:3 years ago
Updated:1 week ago
Sold exclusively on WrapBootstrap
themicon

themicon

Signed up 3 years ago

Need a front-end theme?

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 9/10/11
  • Latest Opera

Features & includes

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