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:

Comments:

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

Posted by guest on May 01, 2014 at 04:05 AM PDT #

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

Posted by Andrea P on May 16, 2014 at 10:04 AM PDT #

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.

Posted by guest on August 07, 2014 at 01:29 PM PDT #

Hi
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

Posted by guest on April 20, 2015 at 06:19 PM PDT #

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.

Posted by Geertjan on April 21, 2015 at 12:20 AM PDT #

Post a Comment:
  • HTML Syntax: NOT allowed
About

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.

Search

Archives
« September 2015
SunMonTueWedThuFriSat
  
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
   
       
Today