Where to start on AngularJS for Java Developer

Background:

If you are a Java developer who is comfortable using Eclipse (JEE Developer version) you may be asking yourself where to start with AngularJS. There is all kinds of documentation out there in regards to AngularJS and https://angularjs.org/ provides, to the point, tutorials on how to get started. You can certainly go that route and use node.js embedded server and possibly a Javascript focused IDE like WebStorm. However I wanted to try and stay in a comfort zone, my comfort zone, of Eclipse and be in a position to deploy an Angular application to a container like Tomcat. This blog entry will present the trail I took to try and accomplish it.

Note: This is an adventure into Angular 1.x, not 2.x.  I would imagine this could all work with 2.x as well as it is focused on the dev environment setup.

Start:

Well the one consistent thing you will find to get started is to install the AngularJS Plugin, provided by Angelo ZERR.  You can use the Eclipse 4.5 (Mars) plugin install feature to configure an update site for the AngularJS plugin and perform the install.  Within Eclipse go to Help -> Install New Software.  Click on the "Add" button to add a new configuration for the AngularJS download site. In the add dialog for the name specify whatever you like, "Angular JS Plugin Site", for the location use http://oss.opensagres.fr/angularjs-eclipse/1.1.0/ .  Version 1.1.0 was the latest update at time of writing and it was released 11/2015.

The first thing that may be a little confusing as you proceed is you will see that there are multiple items that will be presented during the install:

- AngularJS Eclipse Tooling
- AngularJS Eclipse Tooling Development Resources
- AngularJS support for JSP
- AngularJS support for PHP (PDT)
- Tern - Embed Node.js
- Tern IDE
- Tern Tooling
- Tern Tooling Development Resources
- WTP HTML - Web Resources

and with each release of the plugin there seems to be additional items with documentation on the plugin WIKI lacking a bit behind.

Here is the description from the plugin website https://github.com/angelozerr/angularjs-eclipse/wiki/Getting-Started . Note as of 03/28 the documentation below only covered items as of version 0.5.0 of the plugin.  You can see from above there are many items that are not detailed in the documentation.  If you read through all the release notes you can probably piece everything together, but that can be pretty tedious.

• AngularJS Eclipse Tooling which is AngularJS Eclipse plugins .
• AngularJS support for JSP if you wish to use JSP with AngularJS.
• Tern - Embed Node.js if you have not node.js installed on your computer. Node.js is required to execute tern.js.
• Tern IDE to use tern with Eclipse IDE.
• Tern - Tooling if you want to generate tern plugin, JSON Type Definition or Web Browser editor (CodeMirror, Ace, Orion) with tern. For more information please read Tern Toolings

Note: Tern is actually a static code analysis engine for Javascript.  The Tern IDE allows for Tern to be used within Eclipse, a Java context.  Tern then requires the node.js engine.

I'm not sure I will ever really do anything with AngularJS support for JSP, or PHP, or Development Resources, or Tern - Tooling (to extend the built in Tern IDE); but there is not a lot of harm in just installing them. Proceed through the install steps, license acceptance, security warning (click OK) and then restart your Eclipse.

Demo Project:

Ok. Eclipse restarted ok, but is everything working.  I certainly encountered some pain while trying to get things working appropriately, so I will lay out steps to hopefully give you the best chance of success.

The first items to check after the plugin install, is the Tern configuration under global preferences. Go to Window --> Preferences under Eclipse.  Unlike what you will see in the plugin startup documentation, the Tern configuration is now present under the JavaScript node.   Expand the JavaScript node, then the Tern node, and then the Development node.  Click on the Repository item and then make sure that the AngularJS checkbox is selected in the list.  If it is not, select it and then click "Apply", and then "OK" to close out of the dialog.

Now create an AngularJS project.  Go to Eclipse and create a new "Static Web Project". You could also use the "Dynamic Web Project" if you wanted, but it really isn't needed for an AngularJS front end application.  From the Eclipse main menu select File --> New Project, expand the "Web" node and select "Static Web Project". Click "Next" and then provide a name for your project, keep the defaults, and then click "Finish". After creating the project Eclipse will prompt you to change to the "Web Perspective", click "Yes".   

At this point you should have a project within Eclipse that resembles the following structure:

Now before you start using or testing out any of the AngularJS plugin features, you must convert the project to an AngularJS project.  Right mouse click on your Eclipse project and select "Configure" then choose the "Convert to AngularJS project" option.  In addition you will want to change the project level Validation configuration.  Right mouse click on the project you just created and select "Properties".  From the "Properties" dialog select the "Validation" node, and you will see a list of all the Validators that are configured.  With the AngularJS plugin installed and for an Angular project you want to disable the standard "HTML Syntax Validator" and enable the "HTML Angular Syntax Validator".  This will allow the auto-completion and hover features to work for the various ng tags. Note that "HTML Angular Syntax" extends the "HTML Syntax Validator" therefore this change should not impact any of the HTML validation features within the base Eclipse Web Tools Platform (WTP).

Now you can create your AngularJS based index.html file.  I used the data-binding example that is part of the AngularJS website documentation, https://docs.angularjs.org/guide/concepts .

  <!doctype html>
  <html lang="en">
  <head>
  <meta charset="UTF-8">
  <title>Example - example-guide-concepts-1-production</title>
  

  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
  
</head>
<body>
  <div ng-app ng-init="qty=1;cost=2">
  <b>Invoice:</b>
  <div>
    Quantity: <input type="number" min="0" ng-model="qty">
  </div>
  <div>
    Costs: <input type="number" min="0" ng-model="cost">
  </div>
  <div>
    <b>Total:</b> {{qty * cost | currency}}
  </div>
</div>
</body>
</html>

You can create the index.html in root of the WebContent folder.  You can see in the example that it is referencing the angular.js script library through the google api url.  You can leave as is, or as I did download the angular.js library and place within a lib folder under WebContent.  Make sure to change the src attribute of the script tag to point to the appropriate relative location.  If you hover over any of the ng tags and see descriptions of the tags coming back then you now everything is working appropriately with the plugin.  You can also try auto completion by typing in the index.html page ng- and see if the angular tags pop up.

Deploy

You will fine multiple posts about using embedded http server with Node.js, livereload, webjars and other technologies to help automate deployments.  I prefer to start simple and down the road look at ways of automating or enabling hot deployment.  You can get lost trying to figure out what is going on in some of the other posts.  Just keep in mind that it is all javascript, so all you need to do is serve it up from a web server.  Also just make sure your example files are referencing the angular or other javascript libraries you include in your examples appropriately.  As I stated in the beginning, the goal was to deploy to Tomcat (any other web server/web container should work).  So to accomplish that I simply:

1) Copied everything present in my WebContent folder in Eclipse.
2) Created a folder in webapps under TOMCAT_ROOT on my system (/apache-tomcat-7.0.67) representing the name of my new example project, i.e. my-angular-demo.
3) Past all the files copied in step 1 into the new project folder created in step 2.
4) Start up your tomcat instance.  I am not detailing out how to install or start Tomcat.  There is plenty of documentation available on the web for installing and configuring tomcat.
5) Open up a browser and try out your new AngularJS app by hitting http://localhost:8080/my-angular-demo/

Voila! Everything should be working.

Subsequent post may cover features/usefulness of AngularJS  (a Java Developer's perspective) and further notes on slicker hot deployments from Eclipse or other build tools.  Please feel free to post comments or suggestions.