Viel Spaß mit AngularFaces!

Requirements

Template projects

Using a template project is always a good approach to learning a new framework. There's a simple demo project on
my GitHub repository,
combining AngularFaces with BootsFaces and PrimeFaces. In most cases that's a good foundation to build on:

AngularFaces simplifies the JSF programming model und makes it possible to use AngularJS in a JSF application.

BootsFaces brings the elegant layout of Twitter Bootstrap to the JSF world. Of course you don't need BootsFaces
to use Bootstrap. But it makes many things simpler, offers more expressive markup language and give you one or two
dozen components which are optimized both for JSF and Bootstrap.

For everything else I recommend PrimeFaces. In particular, PrimeFaces offers a wealth of advanced widgets
that haven't a AngularFaces or BootsFaces counterpart. Nor do we want to offer such widgets: Both AngularFaces and BootsFaces are
meant to be used with PrimeFaces (version 5.0+). You can safely use all three frameworks together in the same application.
There's hardly any risk to run into incompatibilities, let alone a maintainance hell.

OmniFaces is another good match to AngularFaces and BootsFaces (even though it didn't make it into the template project). A component I'm particularly fond of
is the CombinedResourceHandler. Both AngularFaces and BootsFaces load many small Javascript and CSS files. The CombinedResourceHandler
improves page load time considerably by combining these files into a single file, which is loaded much faster. Today, that is:
if you use SPDY or HTTP/2, new rules apply. Chances are you shouldn't use CombinedResourceHandler after migrating to HTTP/2.

In case you don't want to use PrimeFaces or BootsFaces, simply remove the entries from the pom.xml.

Another interesting demo showing quite a few advanced features is the car dealer demo,
the sources of which are available on GitHub. There's a caveat:
I frequently use the project for experiments. Please don't expect the most commendable code. On the plus side, you'll find
examples how to use a PrimeFaces DataTable or an AngularJS ngTable in an AngularFaces application. Another advanced feature
is sending AngularJS model data to the server from an AngularJS controller.

In case you're fond of games, there's the Tetris demo.
It's a slightly more advances demo of AngularFaces. On the one hand it consists of a lot of Javascript code, on the other
hand there's also a server-side database access with JPA. Enjoy the live demo at
http://angularfaces.net/tetris/!

Let's go!

You can grab a precompiled release of AngularFaces from MavenCentral or jCenter. Alternatively, you can build AngularFaces from source.
By now AngularFaces is mature enough, so I recommend the first option.

In any case you have to add a context parameter to the web.xml.
AngularFaces is a friendly framework: if you forget to set the parameter, AngularFaces reminds you when starting the server.

Your first AngularFaces program

Users of Maven and Gradle are already familiar with Maven's default project layout.

Please create these folders:

src/main/java Put your Java source code files here.

src/main/resources Files in this folder aren't compiled, but they are included in the class path nonetheless. For instance, the
language files for the automatic translation feature of AngularFaces belong here.

src/main/webappsThis folder contains the XHTML files and the AngularJS controllers.

Requirements

Template projects

Using a template project is always a good approach to learning a new framework. There's a simple demo project on
my GitHub repository,
combining AngularFaces with BootsFaces and PrimeFaces. In most cases that's a good foundation to build on:

AngularFaces simplifies the JSF programming model und makes it possible to use AngularJS in a JSF application.

BootsFaces brings the elegant layout of Twitter Bootstrap to the JSF world. Of course you don't need BootsFaces
to use Bootstrap. But it makes many things simpler, offers more expressive markup language and give you one or two
dozen components which are optimized both for JSF and Bootstrap.

For everything else I recommend PrimeFaces. In particular, PrimeFaces offers a wealth of advanced widgets
that haven't a AngularFaces or BootsFaces counterpart. Nor do we want to offer such widgets: Both AngularFaces and BootsFaces are
meant to be used with PrimeFaces (version 5.0+). You can safely use all three frameworks together in the same application.
There's hardly any risk to run into incompatibilities, let alone a maintainance hell.

OmniFaces is another good match to AngularFaces and BootsFaces (even though it didn't make it into the template project). A component I'm particularly fond of
is the CombinedResourceHandler. Both AngularFaces and BootsFaces load many small Javascript and CSS files. The CombinedResourceHandler
improves page load time considerably by combining these files into a single file, which is loaded much faster. Today, that is:
if you use SPDY or HTTP/2, new rules apply. Chances are you shouldn't use CombinedResourceHandler after migrating to HTTP/2.

In case you don't want to use PrimeFaces or BootsFaces, simply remove the entries from the pom.xml.

Another interesting demo showing quite a few advanced features is the car dealer demo,
the sources of which are available on GitHub. There's a caveat:
I frequently use the project for experiments. Please don't expect the most commendable code. On the plus side, you'll find
examples how to use a PrimeFaces DataTable or an AngularJS ngTable in an AngularFaces application. Another advanced feature
is sending AngularJS model data to the server from an AngularJS controller.

In case you're fond of games, there's the Tetris demo.
It's a slightly more advances demo of AngularFaces. On the one hand it consists of a lot of Javascript code, on the other
hand there's also a server-side database access with JPA. Enjoy the live demo at
http://angularfaces.net/tetris/!

Let's go!

You can grab a precompiled release of AngularFaces from MavenCentral or jCenter. Alternatively, you can build AngularFaces from source.
By now AngularFaces is mature enough, so I recommend the first option.

In any case you have to add a context parameter to the web.xml.
AngularFaces is a friendly framework: if you forget to set the parameter, AngularFaces reminds you when starting the server.

Your first AngularFaces program

Users of Maven and Gradle are already familiar with Maven's default project layout.

Please create these folders:

src/main/java Put your Java source code files here.

src/main/resources Files in this folder aren't compiled, but they are included in the class path nonetheless. For instance, the
language files for the automatic translation feature of AngularFaces belong here.

src/main/webappsThis folder contains the XHTML files and the AngularJS controllers.