1480 comments found.
- the demo has a bunch of grid classes that aren’t pure bootstrap. are these using the grid as mixins? meaning will any updates kill them because they are like a forked bootstrap?
- are any tests included?
- what is the structure of the app and does it use yeoman by any chance?
- any chance of a SASS implementation anytime soon?
- any possibility of seeing the Gruntfile?
also are you using any templating language with this (jade?)
thanks again. and sorry for the pestering…
just saw the docs…i’ll read through those.
2. no tests
3. like normal AngularJS app. no yeoman.
4. only Less. not easy to sync two css source files.
5. there are several grunt files. using https://www.npmjs.org/package/gruntfile-gtx to manage the tasks.
6. no jade
bower.json
GruntFile.js
package.json
grunt/
bower-install-simple.js
bump.js
changelog.js
clean.js
....
src/
api/ ->fake api
css/ ->style
less/ ->less files
fonts/ ->web font and icon font
img/ ->assets
js/ ->scripts
angular/
jquery/
libs/
app.js
controllers.js
...
l10n/ ->translate
psd/ ->layered ui kit
tpl/ ->page blocks
index.html
Thanks
thanks for getting back to me. that answers all my questions. i will purchase and see if i can hook this up to my current app and marry the grunt files together. my current gruntfile does wonderful things like livereload and allows for jade templates. anyway, thanks again!
i have create a new folder call “controllers” and try to separate the controllers.js file in to separate file example AppCtrl to AppCtrl.js. I got the error.
Error: [ng:areq] Argument ‘AppCtrl’ is not a function, got undefined http://errors.angularjs.org/1.2.24/ng/areq?p0=AppCtrl&p1=not%20a%20function%2C%20got%20undefined minErr/<<redpre#1> assertArghttp://localhost:17671/Scripts/libs/angular/angular.js:1509:5 assertArgFn@http://localhost:17671/Scripts/libs/angular/angular.js:1520:76 $ControllerProvider/this.$get</<<redpre#4> nodeLinkFn/<http://localhost:17671/Scripts/libs/angular/angular.js:6670:13 forEach@http://localhost:17671/Scripts/libs/angular/angular.js:332:11 nodeLinkFn@http://localhost:17671/Scripts/libs/angular/angular.js:6657:11 compositeLinkFn@http://localhost:17671/Scripts/libs/angular/angular.js:6105:13 compositeLinkFn@http://localhost:17671/Scripts/libs/angular/angular.js:6108:13 publicLinkFn@http://localhost:17671/Scripts/libs/angular/angular.js:6001:30 bootstrap/doBootstrap/</<<redpre#11> $RootScopeProvider/this.$get</Scope.prototype.$evalhttp://localhost:17671/Scripts/libs/angular/angular.js:12701:9 $RootScopeProvider/this.$get</Scope.prototype.$apply@http://localhost:17671/Scripts/libs/angular/angular.js:12799:11 bootstrap/doBootstrap/<<redpre#14> invokehttp://localhost:17671/Scripts/libs/angular/angular.js:3966:7 bootstrap/doBootstrap@http://localhost:17671/Scripts/libs/angular/angular.js:1446:8 bootstrap@http://localhost:17671/Scripts/libs/angular/angular.js:1459:5 angularInit@http://localhost:17671/Scripts/libs/angular/angular.js:1368:37 <redpre#19> x.Callbacks/chttp://localhost:17671/Scripts/jquery/jquery.min.js:4:26028 x.Callbacks/p.fireWith@http://localhost:17671/Scripts/jquery/jquery.min.js:4:26828 .ready@http://localhost:17671/Scripts/jquery/jquery.min.js:4:3320 q@http://localhost:17671/Scripts/jquery/jquery.min.js:4:715
please kindly help.
You need include the AppCtrl.js in the index.html.
I already included it but it still have this problem.
Here is my AppCtrl.js
‘use strict’;
app.controller(‘AppCtrl’, [’$scope’, ’$translate’, ’$localStorage’, ’$window’, function AppCtrl($scope, $translate, $localStorage, $window) { // add ‘ie’ classes to html var isIE = !!navigator.userAgent.match(/MSIE/i); isIE && angular.element($window.document.body).addClass(‘ie’); isSmartDevice( $window ) && angular.element($window.document.body).addClass(‘smart’);
// config
$scope.app = {
name: 'Angulr',
version: '1.3.0',
// for chart colors
color: {
primary: '#7266ba',
info: '#23b7e5',
success: '#27c24c',
warning: '#fad733',
danger: '#f05050',
light: '#e8eff0',
dark: '#3a3f51',
black: '#1c2b36'
},
settings: {
themeID: 1,
navbarHeaderColor: 'bg-black',
navbarCollapseColor: 'bg-white-only',
asideColor: 'bg-black',
headerFixed: true,
asideFixed: false,
asideFolded: false,
asideDock: false,
container: false
}
}// save settings to local storage
if ( angular.isDefined($localStorage.settings) ) {
$scope.app.settings = $localStorage.settings;
} else {
$localStorage.settings = $scope.app.settings;
}
$scope.$watch('app.settings', function(){
if( $scope.app.settings.asideDock && $scope.app.settings.asideFixed ){
// aside dock and fixed must set the header fixed.
$scope.app.settings.headerFixed = true;
}
// save to local storage
$localStorage.settings = $scope.app.settings;
}, true);// angular translate
$scope.lang = { isopen: false };
$scope.langs = {en:'English', de_DE:'German', it_IT:'Italian',en_KH:'Khmer'};
$scope.selectLang = $scope.langs[$translate.proposedLanguage()] || "English";
$scope.setLang = function(langKey, $event) {
// set the current lang
$scope.selectLang = $scope.langs[langKey];
// You can change the language during runtime
$translate.use(langKey);
$scope.lang.isopen = !$scope.lang.isopen;
};function isSmartDevice( $window )
{
// Adapted from http://www.detectmobilebrowsers.com
var ua = $window'navigator' || $window'navigator' || $window['opera'];
// Checks for iOs, Android, Blackberry, Opera Mini, and Windows mobile devices
return (/iPhone|iPod|iPad|Silk|Android|BlackBerry|Opera Mini|IEMobile/).test(ua);
}}]);
and i have include it in my html page
<script src=”~/Scripts/controllers/AppCtrl.js”></script>
It’s working now!
Good. Happy Coding.
How do I change the icon colors from purple to another color?
apply class on the “i” tag. “text-primary”, “text-info”, “text-success”, “text-warning”, “text-danger”, “text-primary-dker”, “text-primary-lt”, “text-primary-lter”, “text-primary-dk”, “text-primary-dker”...
Thanks
Hi,
Great theme 
Could you let me know… I’m using the datatables plugin, loading via ajax and all is working great. I’m trying to get the last column to be a link to ‘View’ details.
I have managed to get it to render out, and setup the state etc:
<a ui-sref="app.stock({ stockId: 5 })">Test</a>
But it doesn’t seem to do anything, its like the event is not getting bound because its being loaded via the ajax.
If I just render out this in the table it works, but obviously I’d like to do things the correct “Angular” way!!
<a href="/#/app/stock/28">View</a>
Any ideas?
Well after 6 hours of scratching my head I think I have a solution but wanted to see what you thought!! What I’ve done is stick a controller on the datatables parent div, then on the datatables options I have added a rowcallback function and also a render function on one of the columns. Then in the controller I have put the following:
.controller('DataTablesCtrl', ['$scope', '$state', function ($scope, $state) {
$scope.rowRender = function (data, type, row) {
return '<button type="submit" class="btn btn-sm btn-info" data-id="' + data + '">View</button>';
};
$scope.rowCallback = function (row, data, displayIndex, displayIndexFull) {
$('button', row).bind('click', function () {
$state.go('app.stock', { stockId: $(this).data('id') });
});
return row;
};
}])
This seems to work, but I have no idea if that is the best / cleanest solution… What’s your thoughts?
That should be <button type=”button” ... by the way not submit, typo there 
Yes. i think it’s the right way to do it. use the Datatable callback to Angular controller.
Happy Coding
This the greatest theme I’ve ever seen, thanks. When it is updated, can I get the updated version for free?
Absolutely free. Thanks
When I click the fullscreen button and press exit to exit full screen, the icon stays in close modus
Fix in next update. Thanks
Funny bug in datepicker, shows days in month >31, non selectable though…
The left (43…48) is weeks, you can set the ‘show-weeks=”false”’ to hide it and the “min-date” will let you can not select days before min-date.
Thanks
thanks man will do, would have never guessed these are actually weeks
Me too.
when will you release scss version? do you have some plan to support scss?
No plan for maintaining 2 css source files. not easy to async these files. you can write your scss and use the grunt to compile to css, then combine it with the app.css from less.
Thanks
Thanks for the awesome template. Could you do me a favor and tell me how I can make the dashboard header (the one containing ‘Welcome to angulr application’) to be fixed on the top? I added an audio player to that section and I want the content below it to be scrollable. I tried position:fixed on the row div but the layout went pear shaped and I’m very bad with CSS.
Cheers
You can use the app layout. http://flatfull.com/themes/angulr/#/layout/app
use the ”.app-content-full” and ”.vbox” to build the page.
Thanks
Do you plan on upgrading the calendar to the new FullCalendar 2.0 anytime soon?
EDIT: Nevermind, I saw in a previous post its coming!
Thanks.
Waiting for approval, Thanks
I’m getting these errors on the local version of the theme:
- GET http://localhost/dollwarInProduction/js/jquery/jquery-1.10.2.min.map 404 (Not Found) /dollwarInProduction/js/jquery/jquery-1.10.2.min.map:1
- GET http://localhost/dollwarInProduction/js/angular/angular-animate.min.js.map 404 (Not Found) /dollwarInProduction/js/angular/angular-animate.min.js.map:1
- GET http://localhost/dollwarInProduction/js/angular/angular-cookies.min.js.map 404 (Not Found) /dollwarInProduction/js/angular/angular-cookies.min.js.map:1
- GET http://localhost/dollwarInProduction/js/angular/angular.min.js.map 404 (Not Found) /dollwarInProduction/js/angular/angular.min.js.map:1
- GET http://localhost/dollwarInProduction/css/bootstrap.css.map 404 (Not Found) /dollwarInProduction/css/bootstrap.css.map:1
you can put the .map files in the same directory with the min files.
Thanks
Any chance you might have this design for Sketch? (http://bohemiancoding.com/sketch/)
It’s not a web app. Thanks
Hi Again, I saw above that your next release is any time now and it feels like Christmas again
I saw your pricing page today and thought of something which would be great to see in a template.
Angular has modules, I think that a great example would be to perhaps provide an example in your template, where if someone has the Premium package, then its views and related functionality would work, and perhaps a business package where different views and functionality would be present.
I think a lot of people use the notion of packages when using Admin templates like this great one of yours and wrapping functionality up into corresponding modules would be fantastic.
Just an idea
Regards
Louis
Updates is waiting for approval. but you can view it on the live demo now.
Nice idea for real App.
Thanks
Hi Flatfull, First, THANK YOU for this incredible theme : it’s beautiful, smart, and give inspiration. I’m used to apply HTML themes on CodeIgniter apps. Here, I would like to keep most of things of the theme, without using the Angular ui-router, because I prefer keeping the CodeIgniter router. But, I’m little bit lost with Angular that I don’t know. I’m trying to include part of HTML pages into the main page … but the display is not good. Could you help me if you have time please ?
if you use the php to render the page. you need know the structure of the page layout. it’s using the ui-view to change the page content and ng-include or data-ng-include to include the html blocks.
also you can use the Chrome devtool to see the real rendered html structure.
thanks
Hi, a angular-stripped.html added. http://flatfull.com/themes/angulr/angular-stripped.html , it[s pure html/css, no angular now.
Thanks
Hi, very great AJS theme, i mean the best here on market – you use ui-router – fantastic and useful! What do you think about right toogle sidebar ? customizer inside sidebar, maybe with tabs for 2 more sections ? This makes it more round. Cheers and Thanks
The dashboard page have the right sidebar and tabs in it.
Thanks
Is there a pure HTML version?
No pure Html version. but with separated html blocks(header.html/nav.html/layout.html)
Thanks
Hello,
Might be too much of a trouble, but could you maybe have a screenshot of the angular app folder structure? Bought another of your theme, thinking of using this for another project.
Like my other items. but with the separated html blocks. Thanks
hi, I’ve just bought the project, this is the first time i buy a project. it’s very amazing. thanks for your hard work, and hope this can support gulp.js and bower in the feature. _....
Next update will add grunt and bower support. Thanks
Could you add functionality such that when a user right clicks on a calendar field it opens a menu that allows them to add new items on the day they right clicked on.
It’s just a bit odd that all added items end up on the current day.
Actually you can click “add event” to popup a window to choose a day.
Thanks
Where?
implement one. in “src/js/app/calendar/calendar.js”
/* alert on dayClick */
$scope.precision = 400;
$scope.lastClickTime = 0;
$scope.alertOnEventClick = function( date, jsEvent, view ){
var time = new Date().getTime();
if(time - $scope.lastClickTime <= $scope.precision){
$scope.events.push({
title: 'New Event',
start: date,
className: ['b-l b-2x b-info']
});
}
$scope.lastClickTime = time;
};
/* config object */
$scope.uiConfig = {
calendar:{
height: 450,
editable: true,
header:{
left: 'prev',
center: 'title',
right: 'next'
},
dayClick: $scope.alertOnEventClick,
eventDrop: $scope.alertOnDrop,
eventResize: $scope.alertOnResize,
eventMouseover: $scope.alertOnMouseOver
}
};
Double click to add event.
Oh wow thank you
This theme is literally the best on this site and the customer service is absolutely fantastic. Thank you so much!
Also this is the only theme I’ve seen on this site to implement Retina Sparklines 
Thanks for the kind words. Appreciate!
