Playground for creating stateless Web applications with HTML5, CSS, JavaScript and PrimeUI on the client side and Java EE 6/7 with the JAX RS module that does the communication in JSON format on the server side.

But I did spent more time with jQuery then with AngularJS, so I decided to start over again. This time with pure AngularJS and to see if I could have the same developer experience with an AngularJS widget library as with PrimeFaces.

AngularJS 1.2.x with animations

When I started working on AngularPrime, only version 1.0.x of AngularJS was available. So no animations were available ‘natively’ in AngularJS. Of course, PrimeUI used the animations of jQuery.

Now AngularJS 1.2.x is available and thus AngularWidgets uses the animations which are available within AngularJS.

Some examples are the collapse and expand of a panel, or the showing and hiding of the InputText of Button widget.

And I must admit, I’m not a CSS guru, ninja or whatever you may call it. So things can be improved.

Row selection with data table

Another important difference is the row selection within the data table widget. With AngularPrime (and PrimeUI) when a row is selected, the row number is stored internally in the list which keeps track of selection.

This of course gives problems when the data can be sorted by some column or new data is shown in the table.

AngularWidgets therefor uses the concept of some id to keep track of the selected row. In order for the selection to work, the developer must indicate some property of the shown object which uniquely identifies each row (the famous id). The value of this property is stored when a row is selected and thus within AngularWidgets, it is possible to sort the data according to some column AND keep the previous selected rows.

In the mean time, Grafaces (https://github.com/rdebusscher/grafaces) is advanced far enough to be useful. Grafaces is an extension to Arquillian Graphene which makes it even easier to test your component library. And the good thing is that Arquillian Graphene and Grafaces is technology independent, as long as it outputs HTML.

So for the testing of the AngularWidgets components, Graphene elements are defined and used to test the correct behaviour in the browser.

For the 8 components which are already available, there are in total 56 tests written.

Use of templates

The widgets are defined with AngularJS directives and the choice was made to use as much as possible the template options. Of course, template is not enough and some code is written and attached to the link phase of the directive. But I tried to limit the adding of DOM elements with code and maximise the use of templates.

PrimeFaces alike

AngulerWidgets is also defined as HTML elements. So you can no longer use the attribute version. This is done mainly because of the following reasons

- The HTML becomes easier to read as you see now elements which indicate what kind of widget will be shown at that place.

- To be more PrimeFaces alike. PrimeFaces uses also elements and also the naming of the attributes on the AngularWidgets elements is chosen, if possible, to be identical to PrimeFaces.

Missing things

Of course, AngularWidgets is still a lot of things missing in regards to AngularPrime.

The most eye-catching thing is that only 8 widgets are available for the moment.

They are not chosen randomly but each widget has been selected to test out a specific type of functionality.

- There are of course the basic elements like input and button elements.

- Fieldset is chosen for the animation challenge.

- Tab view for the dynamic addition with included files

- Growl is a widget which is purely defined in an AngularJS service, there is no directive.

- data table uses inter directive communication. You have the column and the data table directive.

- Autocomplete has the challenge of showing a list of suggestions when characters are typed.

You can always clone the GitHub repository and send some Pull Requests afterwards with your contribution.For the code, you can always have a look at the AngularPrime components and convert the jQuery code to pure AngularJS.