Geertjan's Blog

  • April 28, 2014

AngularJS Seed, Bower, and NetBeans IDE 8

Geertjan Wielenga
Product Manager

Pulling in project templates from online repos that we, that is, the NetBeans team, have no control over has pros and cons. One clear con is that when things change a lot in those online repos, we're basically screwed. We've had fun with that with Cordova as well over the past NetBeans releases.

And that's what happened recently when Bower was suddenly and mysteriously, from my point of view anyway, added to the fun that is the AngularJS Seed template. Now, whenever you pull the AngularJS Seed template, whether on your own via whatever means, or via the NetBeans template for this purpose, you'll find you have references to angular.js and angular-route.js that look like this, in the index.html file:

<script src="../bower_components/angular/angular.js"></script>
<script src="../bower_components/angular-route/angular-route.js"></script>

That's wonderful, assuming the project already has the above files in the above folders. But it doesn't. You need to set up Bower and then manually (or maybe the NetBeans infrastructure should do that for you) call "bower install angular" and "bower install angular-route" in the appropriate location in your project.

So, what I did to get it all working was:

  1. Uninstall 'nodejs' and uninstall 'npm'. And then I hunted through all the nooks and crannies of my system for any remaining artifacts, e.g., the '.npm' folder in your user directory, which I then also deleted. The reason? Well, Bower doesn't install if your version of nodejs is not one of the latest versions, hence a reinstallation of nodejs is needed, followed by a reinstallation of npm.

  2. Great. Now you can call 'npm install -g bower', which will then cause Bower to be installed correctly (all messages green in the command prompt). Make sure to include 'g', which means 'global', otherwise Bower will install into the directory where you run the command, instead of in the global location for all node modules. Then, before continuing, run 'bower' on the command line to make sure it works.

  3. Hurray. Then create a new HTML5 project in NetBeans IDE 8, while making use of the AngularJS Seed template.

  4. Now go to the command line, to the 'app' folder in the project you created above and then run 'bower install angular' and 'bower install angular-route'. You need to do this in the 'app' folder. You'll now end up with a folder called 'browser_components' in your 'app' folder, containing two subfolders with the JS and other artifacts for the references in the index.html file.

  5. Finally, tweak the index.html file so that there are no relative references anymore (needed if you're using the embedded browser, because the embedded server doesn't serve outside of the 'app' folder, which is maybe a limitation of that server that should be fixed):

    <script src="bower_components/angular/angular.js"></script>
    <script src="bower_components/angular-route/angular-route.js"></script>

And now everything is OK again. You can run the project as before and you have the start of your AngularJS application. Below you see the Files window, i.e., how things look on disk, followed by the logical view provided by the Projects window:

Related reading that I found helpful in getting the above put together:

Related issue and other comments:

Join the discussion

Comments ( 8 )
  • guest Thursday, May 1, 2014

    This workaround saved me a headache :-)

    Still, this bower pollution is taking away a bit of the fun and purpose of applying this online template.

    For the moment I prefer to keep my stuff simple and neat, avoiding online templates...

    Bedankt weer, Gertjan

  • Andrea P Friday, May 16, 2014

    After installing bower, it seems it can be enough to call "bower install" from the root of the project (in the folder in which there is bower.json), to have all the needed bower components installed in the right place

  • guest Thursday, August 7, 2014

    Step 4 did not work for me: I ended up with a second app folder under the existing app folder. Instead, the commands must be called from the project folder, which is DemoAppAngular in the above example.

    However, there is a simpler approach. In step 4 above just run 'npm install' from the project folder (which is what NetBeans tells you to do at the end of the project creation wizard for step 3 above). Dependencies will be handled automatically.

    For more details see the README.md for angular-seed on github.

  • guest Tuesday, April 21, 2015


    Great tutorial but i have an issue creating angular seed HTMl5 in Netbeans 8 i don't have the same folder structure as yours and no controller.js or service.js. what am I doing wrong

  • Geertjan Tuesday, April 21, 2015

    Yes, the Angular team seems to regularly change the structure of the Seed app, which is in GitHub, so what you get from NetBeans will also be different to what you see in this screenshot.

  • tpiper Friday, February 26, 2016

    This no longer appears to be accurate in NB 8.1. The IDE now just opens the web page of Bower or Node.JS and you have to do the manual install.

  • guest Saturday, February 27, 2016

    You're commenting on a blog entry from 2014, while we're currently in 2016?

  • jacob Akar Wednesday, April 12, 2017

    please make a video on MEAN Stack using Netbeans 8.2

Please enter your name.Please provide a valid email address.Please enter a comment.CAPTCHA challenge response provided was incorrect. Please try again.