What is AngularFaces?

AngularFaces simplifies many tedious tasks in JSF programming. The core feature is to add AngularJS to JSF, but it doesn't stop there. Among other things, it add labels and messages automatically to input fields, evaluates the Bean Annotation API attributes (e.g. @Max, @Min, @Size, @NotNull) on the client and helps you to target an international audience: all you have to provide the foreign language translations. AngularFaces does the rest of the work for you. Oh, and there's one last thing: AngularFaces modifies the AJAX engine of JSF. Native AngularFaces AJAX requests don't send HTML code to the client. The just send data, saving a lot of bandwidth.

This tutorial makes you familiar with every AngularFaces feature. Additional information can be found at BeyondJava.net, for instance the the AngularFaces 2.0 announcement on BeyondJava.net. The original announcement AngularJS puts JSF on steroids also covers many key ideas still valid with AngularFaces 2.0.

What is new in AngularFaces 2.0?

AngularFaces 1.0 derived JSF widgets from PrimeFaces widgets. It managed to make many popular PrimeFaces widgets Angular-aware (for want of a better word). However, PrimeFaces widgets aren't really designed with deriving components in mind. Plus, JSF 2.2 made the HTML5 style popular in the JSF world. Many people stopped to use heavy-weight component libraries. If people consider PrimeFaces heavyweight, what's AngularFaces to them?

So AngularFaces 2.0 tackles the problem from a different angle. Instead of creating new widgets it integrates into the existing widgets of PrimeFaces, Mojarra, MyFaces, HTML5 and probably most other JSF component libraries.

AngularJS vs. AngularDart

A poll on beyondjava.net revealed that a strong minority of you favors AngularDart over AngularJS. A surprisingly strong minority, but a minority nonetheless. So the first version of AngularFaces 2.0 concentrates on the Javascript branch of Angular (i.e. AngularJS). However, I still consider Dart the superior language (and definitely a lot more fun, at least to me), so a future version of AngularFaces is going to support both AngularJS and AngularDart.

Do I have to be familiar with AngularJS to benefit from AngularFaces?

No. AngularFaces offers a couple of nice features you can use almost without using AngularJS. Simplified foreign language support, Client Side Bean Validation and automatic creation of labels and messages don't require AngularJS knowledge. It's even possible to use AngularFaces as a way to simplify Javascript programming without knowing a lot about AngularJS. Maybe the only thing you should abstain from is jQuery DOM tree manipulation. AngularJS manipulates the DOM tree itself, so it might react confused.

About the tutorial

The tutorial will introduce you step-by-step to AngularFaces.

The first three chapters make you familiar with a couple of features that help you - without requiring Javascript programming. Chapter 5 covers a similar feature: AngularFaces reads JSR303 annotations from JSF beans and brings them to the client.

AngularJS itself is covered in step 3, 4, 6 and 7.