Thursday Jan 16, 2014

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.


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.


« January 2014 »