260 comments

calix PURCHASED
Hi,

I am running the angular-fullstack seed project. Ran npm install and bower install. It seem to work in Chrome but in firefox, multiple infinite digest errors occur and the dashboard is not visible.

Bug?

All the best
Already answered by email.
Hi i purchased this template so when i go to documentation directory and use angularjs.html i just see a simple page with SUPPORT button to email at support@geedmo.com.

Where can i found all documentation please ?

Thank you for your helping.
HI, the documentation is where you mentioned. Double click on angularjs.html shoudl open your browser and show the docs (scrolldown for content). It's a static html/css page so If there's any problem with the visualization try with different browser.
Nice theme. There seem to be some things that break with Angular 1.4. Are you releasing a 1.4 version anytime soon? Also for those of us with a different project structure it would be good to document how some of the loading is working. I figured out some of it, but still had some issues when I moved sources to different directories.
Hi, yes, I'll update to 1.4 soon, I haven't had enough time yet to test it but if you want to let me know the issue I'll focus on it as soon as possible.

Thanks
REgards
lmaspoch PURCHASED
I'm using the HTML/JQuery project and I've included the main.js vendor.js and plugins.js found on the dist folder. When I run my app i get a 404 error because the vendor.js is looking for a file called "external-calendar.json" Why is the vendor.js looking for such a specific file, it seems that this should only be for demo purposes. Any help will be appreicated.

Thanks
I've you answered by email.
Hi!

On what port does the angularjs-App run on by default?
I tried to test it via gulp serve but I always get EADDRINUSE as an error, no matter what port I choose in the config file...
How do I use Naut?
Hi, when you run "gulp serve" it stars a server by default in http://localhost:3000 (its also displayed in the console)
If you need another port, you can change the number in file gulp.config.js, under webserver settings.
EADDRINUSE error only appears if there's another app in your system listening in the same port, as far as I know there are no more reasons to show such error.
Ok. Well, the error doesn't appear when I run gulp serve-build....How do I start the app for production anyway?
Hello,
'serve' task is for a development server and 'serve-build' is to serve the production version.

If you take a look at the gulpfile.js, you will see that both tasks share the task 'webserver', so the web server starts always with the same configuration meaning the same port.
And I'm getting thousands of Mixed content errors because somewhere it tries to load http://fonts.gstatic.com/s/roboto/v15/W4wDsBUluyw0tK3tykhXEfesZW2xOQ-xsNqO47m55DA.ttf over http instead of https (I'm using https..)
I saw that it originally is included in the styles.css but while compiling this file gets deleted and I have no idea where I have to edit that now...
Hi, the styles.css is regenerate because when you compile the source files, particularly the LESS files are compiled into styles.css.
To change that, edit the file /angularjs/src/less/app/common/font.less and compile again.

Thanks for pointing me this
pilgrim PURCHASED
Hi geedmo,

The angular full stack project has the Environment setup config files which is very useful.

But this config process Needs some explanation for developers which are New to nodejs like me. Could you please add some detailed explanation to the help doc?

Thanks
Hi pilgrim, usually the environment change the behavior of the build system that comes with angular-fullstack project. Basically what you should know is that the project uses "development" as default, and this means that most assets aren't optimized and they are included as is so is easy to debug any issue. Then when you finish your app and upload the files, in your server you set the environment to "production" so the build system and express server uses the optimized configuration to serve assets (minify js and css, etc)
To change the environment is simple like setting a system variable, for example:

$ export NODE_ENV=production
(on windows use set instead of import)

This a good read about the environment variables in angular-fullstack
http://wmyers.github.io/technical/nodejs/Setting-environment-variables-in-node-with-the-angular-fullstack-generator/

Hope this helps,
Regards
pilgrim PURCHASED
Hi geedmo,

Thanks for the reply. Actually i use gulp instead of grunt. So i'm just intrested in the code.

Under config/environment/index.js there are sections about facebook, twitter client id's for example. Then what is the use of local.env.sample which includes the same?

Also in production.js there is an ip section. It is a bit confusing.
Hello pilgrim, apologies for the delay.
The fullstack project is basically the integration I made of Naut into angular-fullstack project. Most of the usage instructions are in they github repo, issues, etc.. and the build system is Grunt preconfigured to work with all environment settings, so there no way to work with gulp without converting the gruntfile to a gulpfile, or perhaps are you using angular-fullstack-gulp?
All those facebook/twitter/google configuration are there to use their api system to log into the app instead of using classic new user registration. And the local.env.sample is just an example of how to setup local variables, local.env.js is used by Grunt to set environment variables. When not using grunt you'll need to set them when manually in your system.
Finally, openshift is a online platform to host your nodejs app, in this case, the angular-fullstack project. You can see more at https://developers.openshift.com/

Hope this helps,
Regards
Hello again, geedmo

I'm trying to build the production theme with the version 1.2, but I'm getting an error after running gulp build: https://gist.github.com/darwinrc/a07c84b290a78b149090

Compiling for development works as expected but ain't generate the .js files that I need, only the templates.

Thanks in advance for your help.
I'm running gulp from a Windows 10 environment (power shell).
Hi again, and thanks for log. It's seems that the task 'styles' is not ending before building the index file, which needs the styles created to prepare the production builds.
In short, this an issue with the gulpfile task synchronization (race condition).
Please could you send me a message using the form in my profile page so I can send you a fixed version of the gulpfile by email

Thanks
Regards
Hi geedmo,

Did the test with the gulpfile you sent me and it worked!

Thanks a lot.
Great! Thanks for the feedback!
Hi geedmo

Nice template!
I have a question, just to get it clear, before buying (I just bought a template earlier today and resulted it's worthless for me)....I am using an angular generator, this one: https://github.com/DaftMonk/generator-angular-fullstack . Will it be easy to integrate? I have to integrate your template with the generator, as I already have a lot of code written. I would only need to change my frontend with yours, and I've seen that you have some clean versions, with no jQuery that might help.

Also, I would like to point out a bug on the AngularJs template. I've changed the size of the window (using Chrome in Windows 7) to small, so the left menu would hide. After re-sizing back to maximize, the menu kept hidden. After refreshing, it's still hidden. There is no way to get it out again but closing the page and reopening :)

Also, I've tried to change the size with the help of the tools provided by Chrome, emulating an iPhone5 for example, and I don't see the site responsive. I see it just like I would see it on maximized window. Also tried viewing from my phone, a Nexus 4 with Chrome, and got the same result. Is the template not responsive? What am I doing wrong?

Thank you.
Hi, apologies for the delay.
The package includes an angular-full-stack project. It is a seed project which includes the basics to run a site with the framework and styles of the template. You can copy features from the angularjs project into the full-stack to get more features. Some folders are similar to easy the implementation.
The resize issue with the sidebar is something by design, but after many requests this is a feature that I will changes in the next update, I hope to release in the current month.
I'm not sure why you don't see the site responsive, it's designed and working to adapt to any resolution.
If you can, please try accessing directly to the demo in my site:
http://geedmo.com/themes/naut/v1.2/angularjs

Thanks.
Hi!
Thanks for getting back.

Unfortunately I bought another template for the current project, but for my next one that should be next month, I will definitely consider this one.

Just to let you know, on your site the app is responsive as it should be, so I guess that it's a wrapbootstrap problem. You probably should report this somehow, because there might be others trying to get here from their phones, or just do a rapid test with the Chrome console like I did, and see this unresponsive.
Hi Geedmo,

Can you help me how to change change sidebar menu, after login page? The sidebar have 2 kind for 2 different role user. Example code maybe, Sorry I am new in angular. :D

Thank you
Hi, sorry for the delay, I've been out of the office last week.
You can use a global flag ($rootScope variable) to know what kind of sidebar you must show, for example using ng-if angular will add or remove markup automatically.
Another option could be using a server side script, like php, to generate the sidebar markup dynamically
AngularJS apps are more focused client side, so the ng-if solution could work better but depends on how your application handle users.
For example
<div class="sidebar-nav" ng-if="global.user.role === 'admin'">
// content for admin sidebar
</div>
<div class="sidebar-nav" ng-if="global.user.role !== 'admin'">
// sidebar content for non admin users
</div>

Hope this helps
Regards
Hi Geedmo,

We are new to UI building (we are more of backend devekopers). We will be using Nginx / Tomcat for the UI of this project and wanted to know if we can use your template? A few simple questions

1. Does the data grid in the example (pull data from Db / hos is it connecting)?
2. How do we provide input to the table - JSON / XML?
3. Can we export the data in the table to CSV / Excel ? ( I saw an example, but I want to do that for data fetched from Db - aka the data table i guess)
4. How does the dynamic graph work (where is it getting the live data from)
5. In the charts - can we make it clickable so we redirect to a table of data (behind the segment)
6. vector maps - In the example the cities are not clickable. Can we show data on each city and make it clickable? Can we plot different colours on the map to indicate (say population density as a colour gradient) on selected cities

thanks
srini
Hi, sorry for the delay, I've been out of the office last week.

1- The access to your DB shoud be done in your backend scripts, the frontend components should request an url where your script will server the content from the DB, for example, in JSON format.
2- Sames as point 1
3- The ngTable demo export the current content of the table to CSV, same as above, the content of the table should be filled with a json file that your server provides with DB information.
4. The Realtime flot chart uses a function to generate the data dynamically. If you look at the browser console you will see that other chart request a json file to draw information. The realtime will work in the same way but the json request should be included in a loop.
5-6. Depends exactly where you want to add a click, but yes is possible to add a click event.
Flot charts and jVector maps provides detailed information about the usage on their respective sites
http://www.flotcharts.org/
http://jvectormap.com/
I still struggle to start the app....If I compiled it for production....how do I actually start it? And on which port does it listen to then??
To run the app you have the following commands
- for development
gulp serve
- for production
gulp serve-build

The commands will show the port used to serve the app.
mkranjan PURCHASED
1. Does it support tabpanel?.
2. I have a server written in Java and am in need of UI template only having angularJS as javascript framework. will this template suitable for me
3. Is it possible to change the UI layout/structure of page according to need.
4. If I buy single licence, will I be able to use it locally & in production environment
1. Yes. Tabs as part of Bootstrap. You can check it here http://geedmo.com/themes/naut/v1.2/angularjs/#/app/ui/bootstrapui
2. Java is for the backend. This product is a frontend template so you can use with any backend language.
3. Yes, the source code is included and editable. The difficulty will depends on how much do you need to change.
4. Yes, all licenses allow that. The difference is about what kind of clients your product if focused, for example if your end product is for one client or many clients charged for use. More info here http://support.wrapbootstrap.com/knowledge_base/topics/usage-licenses
Hi, sorry, it's me again!

I'm trying to implement Satellizer. I installed it using bower install satellizer and added it to the modules in app.module.js

yet it keeps saying me Module 'satellizer' is not available!

why? :/
Hi, have you added all the Satellizer files to the index file?
Bower components are not loaded automatically.
Sorry, it was my own dumbness, haha. I inserted the script-tag into the HTML file, but forgot to use --usehtml when compiling ;)
No problem, if you want to compile html by default, you can change the following flag in the gulpfile.js
From
var usehtml = argv.usehtml;
To
var usehtml = true; // with this you dont need more to use --usehtml

Thanks
Seriously, I'm drifting from one to another problem with this template...
I wanted to use HTML instead of Jade so I followed the instructions according to the docs.
When I do "gulp build --usehtml" I get this error:

F:\Proggen\workspace\angular\node_modu
103
throw err
^
Error: Path F:\Proggen\workspace\angul
at getFiles (F:\Proggen\workspace\
at module.exports (F:\Proggen\work
at Transform._transform (F:\Progge
at Transform._read (F:\Proggen\wor
e-stream\lib\_stream_transform.js:184:
at Transform._write (F:\Proggen\wo
le-stream\lib\_stream_transform.js:172
at doWrite (F:\Proggen\workspace\a
\lib\_stream_writable.js:237:10)
at writeOrBuffer (F:\Proggen\works
stream\lib\_stream_writable.js:227:5)
at Transform.Writable.write (F:\Pr
s\readable-stream\lib\_stream_writable
at Stream.ondata (stream.js:51:26)
at Stream.emit (events.js:107:17)
F:\Proggen\workspace\angular\node_modules\gulp-html-prettify\node_modules\event-stream\node_modules\map-stream\index.js:
103
throw err
^
Error: Path F:\Proggen\workspace\angular\app\css\styles.css not found!
at getFiles (F:\Proggen\workspace\angular\node_modules\gulp-usemin\lib\blocksBuilder.js:59:15)
at module.exports (F:\Proggen\workspace\angular\node_modules\gulp-usemin\lib\blocksBuilder.js:97:20)
at Transform._transform (F:\Proggen\workspace\angular\node_modules\gulp-usemin\index.js:16:22)
at Transform._read (F:\Proggen\workspace\angular\node_modules\gulp-usemin\node_modules\through2\node_modules\readabl
e-stream\lib\_stream_transform.js:184:10)
at Transform._write (F:\Proggen\workspace\angular\node_modules\gulp-usemin\node_modules\through2\node_modules\readab
le-stream\lib\_stream_transform.js:172:12)
at doWrite (F:\Proggen\workspace\angular\node_modules\gulp-usemin\node_modules\through2\node_modules\readable-stream
\lib\_stream_writable.js:237:10)
at writeOrBuffer (F:\Proggen\workspace\angular\node_modules\gulp-usemin\node_modules\through2\node_modules\readable-
stream\lib\_stream_writable.js:227:5)
at Transform.Writable.write (F:\Proggen\workspace\angular\node_modules\gulp-usemin\node_modules\through2\node_module
s\readable-stream\lib\_stream_writable.js:194:11)
at Stream.ondata (stream.js:51:26)
at Stream.emit (events.js:107:17)
Hi, based on the error log, it seems a problem with a race condition. I've a fix for this but not released yet.
Please, edit the gulpfile.js, find the task 'compile' and replace the task list with the following code wrapped by runSequence to ensure all task will run one after another

gulp.task('compile', function(cb){
runSequence(
'bootstrap',
'styles',
'templatecache',
'markup',
cb);
});

Please let me know if problem persists
It indeed seemed to fix it. Thank you and please implement that :)
Thanks for let me know. I'll implement this in the next release.
Ok, I feel pretty dumb right now.
Another error occured now:
stream.js:94
throw er; // Unhandled stream error in pipe.
^
Error: app\js\application.js: error: couldn't process source due to parse error
Unexpected token (1342:4)
at transform (F:\Proggen\workspace\angular\node_modules\gulp-ng-annotate\index.js:20:11)
at Transform._transform (F:\Proggen\workspace\angular\node_modules\gulp-ng-annotate\index.js:68:25)
at Transform._read (F:\Proggen\workspace\angular\node_modules\gulp-ng-annotate\node_modules\through2\node_modules\re
adable-stream\lib\_stream_transform.js:184:10)
at Transform._write (F:\Proggen\workspace\angular\node_modules\gulp-ng-annotate\node_modules\through2\node_modules\r
eadable-stream\lib\_stream_transform.js:172:12)
at doWrite (F:\Proggen\workspace\angular\node_modules\gulp-ng-annotate\node_modules\through2\node_modules\readable-s
tream\lib\_stream_writable.js:237:10)
at writeOrBuffer (F:\Proggen\workspace\angular\node_modules\gulp-ng-annotate\node_modules\through2\node_modules\read
able-stream\lib\_stream_writable.js:227:5)
at Transform.Writable.write (F:\Proggen\workspace\angular\node_modules\gulp-ng-annotate\node_modules\through2\node_m
odules\readable-stream\lib\_stream_writable.js:194:11)
at Stream.ondata (stream.js:51:26)
at Stream.emit (events.js:107:17)
at Stream.endStream (F:\Proggen\workspace\angular\node_modules\gulp-usemin\node_modules\gulp-concat\index.js:90:10)
No problem, that's a common issue with gulp-ng-annotate. When there's an error in the code it fails to parse the code without too much details of the error.
Based on this line:
Error: app\js\application.js: error: couldn't process source due to parse error
Unexpected token (1342:4)

Check app\js\application.js around 1342 for a typo in the code, then fix the error in the corresponding source file.
I'll try to include something in gulpfile to do an early validation to avoid this kind of errors.
And once more, it's me again.
When compiling for production, it creates this in the application css:
local('Roboto-Thin'),url(../../fonts.gstatic.com/s/roboto/v15/Jzo62I39jc0gQRrbndN6nfesZW2xOQ-xsNqO47m55DA.ttf)

As you can see, it converts it to a local resource which is wrong. It should be loaded externally. When compiling for developement only, it stays like this

@import url(http://fonts.googleapis.com/css?family=Roboto:500,400italic,100,700italic,300,700,400);

which is correct.
Why?
Hi, here's the problem https://github.com/jakubpawlowicz/clean-css/issues/632
I've solved that adding the option processImport: false to all calls to minifyCss
Please edit gulp.config.js and gulpfile.js and add the options to all $.minifyCss(), like follows:

$.minifyCss({processImport: false})

This should leave the @import rule untouched. Alternatively you can remove the rule and import the font using the <link> tag in your index file.

Thanks for report this.
Any timeframe now for the AngularJS 1.4.x version of Naut? I see it discussed about a month ago, but no real timeline was discussed. Thanks!
Hi, I will be releasing a minor update in a few days, including support for angular 1.4.x
Thanks!
paul440 PURCHASED
HI there,
I see you just released v1.3 (I got the email). I have downloaded it and read the release notes. Is there a simple way to 'upgrade' from v1.2 to 1.3. It's a bit confusing what files might have changed and I already have your theme embedded in my existing app.

I'll figure out a way, but just wondering if you had any tips.

Paul
Hi, I can send a detailed changelog of each file changed, added or removed if you need it.
About applying a new update, the most safe way to do it is by comparing your project files against the files in the package with a comparing tool like winmerge, kaleidoscope, beyond Compare, etc..

Thanks
faabass PURCHASED
Hi,

Can you share with me an implementation of the login functionality? I'm trying to get it work, but I can't.

I don't know if I'm making some mistake with the way I'm declarin the LoginFactory/LoginController or with the ServiceSession.

Could you please help me with this?
Hi, sorry I don't have an implementation way to share. Mainly because it depends on the backend implementation, database, etc.
Anyway, the project angular-fullstack included in this package contains a working authorization system with login/signup, also allow to use accounts from google, facebook ,etc.
enquiren PURCHASED
STYLE FAIL regarding the scrollbar handling in the aside:

In the latest Mac versions of Safari, Chrome, Firefox, and Opera the .sidebar's width attribute calc(100% + 17px) value pushes items floating right (chevrons and badges) slightly past the bounds of the aside. This isn't a problem on Windows.

A good discussion those needing to fix this issue: http://stackoverflow.com/questions/9251354/css-customized-scroll-bar-in-div/14150577#14150577
That's ok, the issue exists only on safari mac. It happens because of the different browser behaviors like you state in the SO post. Some browsers inherits the original width 100% and others uses the calc'ed width.
The quick fix is to limit the size of LI items in the sidebar up to the sidebar width

.sidebar .nav > li {
max-width: 240px;
}

Just in case, this number is the same used to set the size of the parent aside element that contains the sidebar.

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

$14
754Purchases

Licenses: Details »

Single application $14
Version:1.4
Type:
  • HTML Template
Bootstrap: Compatible with 3.3.x
Layouts:
  • Responsive
  • Fluid
  • Fixed-width
Browsers:
  • IE 9, 10, 11
  • Latest Chrome
  • Latest Firefox
  • Latest Safari
Uses Less:Yes
Uses Sass:No
Categories:
Tags: admin, angularjs, bootstrap, dashboard, gulp, html5, jade, less, material
Item#:WB0LX03F7
Released:2 years ago
Updated:2 years ago
Sold exclusively on WrapBootstrap
geedmo

geedmo

Signed up 4 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: