Thursday, January 16, 2014

Integrated AngularJS Development

By: Geertjan Wielenga | Product Manager

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 CDNJS.com. 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.



















    http://www.youtube.com/watch?v=-5dbwgzi0nA

  • 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!



    https://www.youtube.com/watch?v=O85AV406SXI

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












    https://www.youtube.com/watch?v=PRj9JScvcJE

  • 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:

    http://www.youtube.com/watch?v=0QvgzBp2_rw

  • 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.

Join the discussion

Comments ( 18 )
  • simsam7 Friday, January 17, 2014

    OK, that's insanely cool!


  • Jagwire Friday, January 17, 2014

    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?


  • simsam7 Wednesday, January 22, 2014

    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?


  • Alex Reyes Thursday, January 30, 2014

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


  • Geertjan Thursday, January 30, 2014

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


  • guest Monday, February 10, 2014

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

    Awesome features. Great job!


  • guest Wednesday, February 19, 2014

    Feedback:

    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.

    Question:

    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.


  • guest Friday, March 14, 2014

    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.


  • guest Sunday, March 30, 2014

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


  • alex Monday, April 28, 2014

    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: sun.security.provider.certpath.SunCertPathBuilderException: 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 https://cdnjs.com certificate to my local keystore, but not sure if this'll work.

    Thanks for any feedback.


  • Geertjan Monday, April 28, 2014

    What happened when you went to Google and searched for 'sun.security.provider.certpath.SunCertPathBuilderException'?


  • alex Tuesday, April 29, 2014

    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 cdnjs.com ?

    Thanks


  • Geertjan Tuesday, April 29, 2014

    Yes, it is.


  • alex Tuesday, April 29, 2014

    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.


  • Geertjan Tuesday, April 29, 2014

    Hi all, important additional reading to this article:

    https://blogs.oracle.com/geertjan/entry/angularjs_seed_bower_and_netbeans


  • guest Monday, May 26, 2014

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

    Drag N Drop Directive for #AngularJS http://goo.gl/pg8qbE

    Adding #Weather information in #AngularJS #FullCalendar http://goo.gl/nc7vtA


  • magnessRobert Monday, June 27, 2016

    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?


  • magnessRobert Monday, June 27, 2016

    Nevermind. I somehow got Bower to work.


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

Visit the Oracle Blog

 

Contact Us

Oracle

Integrated Cloud Applications & Platform Services