The AngularFaces saga continues! AngularFaces now offers seven components, and I learned how to angularize JSF components without having to derive from them.
Update Sept 16, 2014
AngularFaces 2.0 takes a different - and better - approach to adding fuctionality to JSF. This article describes the older version AngularFaces 1.0. Have a look at the tutorial at
Since my last AngularFaces post I've added two simple components: <a:selectBooleanCheckbox> and <a:selectOneMenu>. Suffice it to say they are derived from the corresponding PrimeFaces components and work exactly the same way <a:inputText> does.
Angularizing data tables proved to be much more difficult.
This didn't come as a surprise. AngularJS and JSF treat tables in a fundamentally different way. Adding insult to injury, the PrimeFaces data table component is a highly elaborated tool. I didn't expect to be able to port the full wealth of features to AngularFaces.
However, I was disappointed to see how little is possible. My first approach was to angularize each cell of the data table individually. That approach seemed to work fine until I remembered Angular's ng-repeat directive. JSF renders each row of the table. AngularJS forbids to do so. It wants you to define a single row of the table and uses it as a template. The table is built on the client using the model's data.
In my eyes, the Angular approach is much more sensible in a Javascript-centric environment, so I decided to follow it. Unfortunately, this means I have to write my own data table component from scratch. I had to abandon my preferred approach: to derive from a PrimeFaces class and to modify it as little as possible.
The current state of development is a very simple data table allowing you to display <h:outputTexts> as well as editable <h:inputTexts>, <h:selectBooleanCheckboxes> and <h:selectOneMenus>. The funny thing is simple JSF components currently work better than their AngularFaces counterparts.
There's a live demo at
The next challenge will be to send the edited content back to the JSF bean. As long as you simply edit the cell content, this shouldn't be too difficult. However, AngularJS allows you to add or remove columns on the fly. Clicking a command button should add or remove the corresponding rows on the server side, too. At this point, it's a pity Java 5 introduced generic data types with type erasure. So there is no simple generic way to add elements to an array. Such a feature would come in handy to implement a generic AngularFaces "add row" button. Most likely I'll have to resort to a clumsy solution, such a using a dedicated attribute:
Further reading
The AngularFaces GitHub repositoy. You can participate with the project by forking AngularFaces and sending me a pull request.