Using AngularJS in Eclipse, Part 4) Create Components

This is the last of four posts on how to run (inside Eclipse) the examples provided in AngularJS's home page:

• Using AngularJS in Eclipse, Part 1) The Basics
• Using AngularJS in Eclipse, Part 2) Add Some Control
• Using AngularJS in Eclipse, Part 3) Wire up a Backend
• Using AngularJS in Eclipse, Part 4) Create Components

The example covered on this post is the Create Components:

1) Creating the test files

First step is to create a folder called 4. Create Components:

...  with the 4 files provided by this example:

index.html

components.js

app.js

and bootstrap.css

2) Running in browser (and failing to change locale)

Here is what it looks like when loaded locally (in Eclipse):

This example shows how we can create components (i.e directives ) that are able to handle multiple languages or currencies.

The Localization tab (shown above) is currently set for english (USA) and the Pluralization tab (shown below) is currently set to English.

This demo also has support for SK, but there didn't seem to be an easy way to change the browser's locale (so that we can see the SK values in action)

But on the angular.org page they were able to show both US and SK side by side:

so there had to be a way to do it :)

3) programatically change the locale

Looking at the code from the angular.org the code changes made below seem to be the ones required.

Basically we need to:

• load up the angular-locale_sk.js file followed by immediately creating a module called ngLocal.sk
• load up the angular-locale_en-us.js file followed by immediately creating a module called ngLocal.us
• create a module called app-us that depends/consumes ngLocal.us
• create a module called app-sk that depends/consumes ngLocal.sk

Then we can change the ng-app to be app-sk:

... and now the locale is SK (i.e. Slovak):

... with the text showing in Slovak (well I hope it does, since I don't speak Slovakian :)  )

If we wanted to have the site back in english (US), we can change the ng-app to be app-us

... and we're back in USA currency and English language:

4) viewing Git Diffs in Eclipse

At this stage I wanted to see git diffs inside eclipse (for example 'current changes vs last committed code'), but the option I was looking for ('Compare With -> HEAD Revision') was not there.

The problem was that I needed to 'Share current project', which can be done via the Team menu:

After choosing the Share Project ... menu option, I was asked to chose the Git repository type (which is a bit weird since this was already a Git repository)

... and chose to use the repository in the parent folder of the selected project:

Once that completed, I was able to see the Compare With -> HEAD Revision option:

... which provides this really nice Git diff UI: