Integrated AngularJS Development

What do we mean by "Integrated AngularJS Development"? Integrated AngularJS Development means having all the tools that you need at your fingertips in a single environment.

And that's what NetBeans IDE 8 gives you (even more than NetBeans IDE 7.4 and previous releases did).

  • Need to do some AngularJS coding? OK, we'll fire up an HTML editor. And a JavaScript editor. And a CSS editor. No, let's not do that. Just start up the super light and shiny new NetBeans IDE 8 for HTML5 and PHP development and you'll have all three editors available in one single development environment.

    Click here to get there fast.

    And here's the result, i.e., a super slimmed down NetBeans IDE with only frontend tools. And a heap of samples!

  • Need the AngularJS Seed template? I guess we'll go to the AngularJS Git repo and then... No, let's not do that. Stop doing that forever. It's not needed because right here in NetBeans IDE is the AngularJS Seed template. (But make sure to also read this!)

  • Need to add some other JavaScript libraries? Hmmm... we'll need to go to Google and search for those libraries. Then find the relevant repo. Then make sure to get the latest version of the library. Then download it. Then add it to my project. Nope. No need for all that boring and error prone grunt work. Just select the JavaScript libraries you need, during creation of the project, and add more afterwards, via dialogs that link off to And you can update the list anytime, which will pull in the latest versions of the JavaScript libraries.


  • Need to reference your files in your HTML files? OK, so now we have our JavaScript libraries, our CSS files, our image files... Hmmm... now the boring work begins of typing all the references to those files inside my HTML file. Wrong! Just drag and drop the files into the HTML file and magically all those references will be created for you.

  • Need to figure out where the views are for the controllers? We need to look for a "Search" feature and then type in the name of... No! No need for that either. Hold down the Ctrl key and then move your mouse over the reference to the HTML file or to a controller, in the "app.js" file. Then the reference becomes a hyperlink which you can click to jump to the referenced view or controller.

  • Need to figure out what those AngularJS directives mean? Look, sooner or later one needs to do some research. So, let's go to the AngularJS site and look for the directives there and then... Forget about it! The AngularJS documentation is built right into the editor, you'll see it during code completion.

  • Need to figure out the properties you defined in the controller? Yes, you're in the view, happily coding away and need to refer to the controller properties in your ng-repeat definition or somewhere else in your HTML. So, let's look for that controller file... hmmm... where is it. No! No need for that either. Call up code completion and it will suggest to you the properties applicable to the current context in the view.

    Above, also notice that "beer" is underlined in grey, telling me that I have not yet used that variable. The code completion below is especially sweet, since it doesn't only give you access to the controller, but to the JSON that you defined within the methods within the controller:

    angular.module('myApp.controllers', []).
      controller('MyCtrl1', function($scope) {
          $scope.allbeers = [{name:'heineken'},{name:'grolsch'}];

    So the "name" that you see in the code completion below comes from the "name" in the function above, in the relevant scope.

  • Need to deploy the app during development? Sigh. Now I need to deploy the app and then kind of figure out where those images and other resources that I see in the browser are defined back in the development environment. Oh well. Bit of a pain, really. Not really, not at all! There's a plugin for the Chrome browser that enables NetBeans IDE and the Chrome browser to interact with each other. Clicking in the browser shows you where rendered resources are defined back in the IDE! And vice versa!

  • Need to deploy to a browser on a mobile device? Yeh, this part is not much fun. Figure out command line calls to iOS and Android... then deploy them there, and the Android emulators are kind of slow, and it's all a bit of a hassle. Maybe skip trying out the app on all mobile devices, just too much work, let's focus on only the most popular ones. No need! Simple tools in the IDE let you deploy directly to your browser, whether on the desktop or on the mobile device, including iOS, if you're on Mac OSX, of course.

  • Need to work in Chrome Developer Tools and keep changes synchronized with files in NetBeans IDE? Yeah, that's, like, totally impossible. Wrong!

  • Need to debug and style on the mobile device? Yeah, well, forget about it. That's just not possible. Wrong again:

  • Need to deploy natively to mobile devices? Wow. Need to learn ObjectiveC. That's got to suck. And maybe having a native app on Android isn't so important either. Let's just convince our users that the browser on the mobile device is just as cool as native apps. Nope! No need to be a spin doctor anymore. Just use Cordova (a.k.a. PhoneGap), accessible and configurable from NetBeans IDE. Via one or two clicks, Cordova will create a native app for you for either iOS or Android and you can even deploy your Cordova generated app straight to the mobile device from NetBeans IDE.

  • Need to set up Karma? Oh, yes, Karma would be great as a test runner. Lots of buzz around Karma. Need to go on-line and figure out how to set up Karma. Probably quite a bit of work involved in that, so let's put that on the backburner for later. In the meantime, I'll just do without testing, will do that later when I have Karma set up. No need for this approach, either. As soon as you've created your AngularJS Seed template, you also have Karma support in NetBeans IDE, since the IDE figured out from the AngularJS Seed template that Karma support needs to be set up for you.

  • Need to set up Grunt? SASS? LESS? Oh, yes, there's these other cool technologies to include, somehow. Hmmm. Probably hard work. Let's also not do that immediately. Wrong again! Here it is, you can select them from the New File dialog and incorporate them immediately.

    And here's SASS, the movie:

  • Need to use Emmet and CoffeeScript? Well, that's all nice but I need Emmet and CoffeeScript. Not seeing those in the New File dialog, so I guess I'll... Wait! Just go to the Plugin Portal and you'll find what you're looking for.

  • Need to check the sources into Git? Doing well now, time for a break, let's check everything into Git. OK, let's call up the command line and... Wait! No need for the command line, NetBeans IDE has great Git support built into it.

Wow, so... wait... all I need is NetBeans IDE..? Well, if you say so!

Note: Very important info relating to changes to AngularJS support, in relation to NetBeans IDE, is found here.


OK, that's insanely cool!

Posted by simsam7 on January 16, 2014 at 05:01 PM PST #

This is awesome, I can finally use my favorite IDE for web development! Do you know is there anyway to change the templates to conform with yeoman or such so I don't have to recreate the project from scratch?

Posted by Jagwire on January 17, 2014 at 06:49 AM PST #

Hi Geertjan! I've been using Netbeans for HTML5 development a lot recently & the drag-and-drop js/css auto-complete feature has been a great time saver. However, it appears to stop working sometimes & instead of including the file, it opens it up in a new tab. How do I get the auto-complete feature to work again?

Posted by simsam7 on January 22, 2014 at 10:19 AM PST #

I'm starting with AngularJS and haven't decided for an IDE yet. Looks like NetBeans will be my IDE of choice.

Posted by Alex Reyes on January 30, 2014 at 09:30 AM PST #

Not a bad choice at all! Let me know anytime you need help.

Posted by Geertjan on January 30, 2014 at 11:56 AM PST #

That's really impressive. I might switch back to Netbeans in the future - AngularJS support is really nice.
Awesome features. Great job!

Posted by guest on February 10, 2014 at 11:55 AM PST #

Wanted to take this opportunity to thank you Geertjan, not only for this blog post but for your numerous earlier ones on Netbeans over the years. You Sir, are a true Netbeans champion. Hope Oracle realizes your true worth and the value provided by your developer focussed blog posts.

I had to grudingly migrate away from Netbeans to Eclipse a few years ago, since both were at roughly at feature parity and at work Eclipse was the platform of choice. However, now I am in the market for a Javascript IDE and in particular AngulaJS. I am truly impressed by Netbeans progress in this space. Just started using Netbeans 8 beta and looking forward to using javascript code completion and code navigation between javascript files and between javascript and html, as well as javascript refactoring features. This is where an IDE shines for larger projects, as opposed to just using VIM and a bunch of VIM plugins - which is what I've been using. Basically all the IDE goodness that we're accustomed to in Java, being available in Javascript.

Using Netbeans 8 beta and the grunt file feature from your blog. Right-mouse click on the grunt file, shows all the tasks in the gruntfile in a popup-menu. However, attempting to run a specific task on the popup menu always runs the 'default' task. Is this a known issue? Also, where's the best forum to find answers for such questions and ask them too.
Thanks for your feedback.

Posted by guest on February 19, 2014 at 03:09 AM PST #

I am very impressed with the AngularJS support in NetBeans. However, I do have one question. I am trying to use the components (accordian, tabset) from AngularUI UI-Bootstrap. In the editor the <accordian> and <tabset> elements flag as errors in my html. Is there any way to avoid that and have those directives recognized? Thanks.

Posted by guest on March 14, 2014 at 05:31 AM PDT #

This is an awesome article. Please keep contributing. Cheers!

Posted by guest on March 30, 2014 at 12:37 AM PDT #

Hi Geertjan,

Thanks for your article, it's great.
The problem for me is the fact that when I attempt to download the AngularJS Seed template (3rd print screen), my IDE instance fails. I checked the IDE log and I get something like a SSL Handshake error: unable to find valid certification path to requested target

Thing is I am behind a corporate proxy, and I have already tested my proxy settings and they are working fine (test succeeds in IDE general settings). I will attempt to add certificate to my local keystore, but not sure if this'll work.

Thanks for any feedback.

Posted by alex on April 28, 2014 at 07:10 AM PDT #

What happened when you went to Google and searched for ''?

Posted by Geertjan on April 28, 2014 at 09:16 AM PDT #

Hi Geertjan,

I did google that and I got various articles about looking up the site I am trying to access and saving its certificate then importing it to my local keystore.
Problem is I am not sure which site netbeans is trying to contact when updating the javascript libraries. Is it ?


Posted by alex on April 28, 2014 at 11:04 PM PDT #

Yes, it is.

Posted by Geertjan on April 29, 2014 at 02:34 AM PDT #

I managed to sort it out with our local Security dept. It seems the NetBeans client is acting strange when communicating with the proxy server.

Posted by alex on April 29, 2014 at 04:36 AM PDT #

Hi all, important additional reading to this article:

Posted by Geertjan on April 29, 2014 at 01:52 PM PDT #

Great Post.. Am already in love with AngularJS,, Would like to share two important blogs on Angular

Drag N Drop Directive for #AngularJS

Adding #Weather information in #AngularJS #FullCalendar

Posted by guest on May 26, 2014 at 04:40 AM PDT #

I'm having a heck of a time getting CDNJS to install on my computer. I'm running windows 10, but not the pro version. I've used npm to install cdnjs, but I get error messages saying that lodach@1.3.1 is not supported (or somehthing like that). I then update lodach to the 4 version, and try cdnjs jquery, and I get what appears to be a lot of js files downloaded but arn't related to my project.

Basically, I just want this simple thing: CDNJS in Netbeans to show js files so I can add them to my project.

Any help?

Posted by magnessRobert on June 27, 2016 at 07:00 AM PDT #

Nevermind. I somehow got Bower to work.

Posted by magnessRobert on June 27, 2016 at 07:34 AM PDT #

Post a Comment:
  • HTML Syntax: NOT allowed

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.


« July 2016