Monday Apr 28, 2014

AngularJS Seed, Bower, and NetBeans IDE 8

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:


Geertjan Wielenga (@geertjanw) is a Principal Product Manager in the Oracle Developer Tools group living & working in Amsterdam. He is a Java technology enthusiast, evangelist, trainer, speaker, and writer. He blogs here daily.

The focus of this blog is mostly on NetBeans (a development tool primarily for Java programmers), with an occasional reference to NetBeans, and sometimes diverging to topics relating to NetBeans. And then there are days when NetBeans is mentioned, just for a change.


« April 2014 »