You find the requirements in a dedicated chapter. Cutting a long story short: You need Java 6 and JSF 2.2.
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:
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/!
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.
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/webapps
This folder contains the XHTML files and the AngularJS controllers.Our example uses these files:
If you use CDI, please replace @ManagedBean by @Named and make sure you import the new Viewscope javax.faces.view
.
This simple example doesn't need an AngularJS-Controller. But if it had one, it'd look like this:
That's it! Your first AngularFaces application is up and running. Granted, it doesn't use AngularJS yet, but it demonstrates several other interesting features of AngularFaces:
pom.xml
is more verbose than the minimal pom.xml
given above.h:
und b:
. (Too bad your IDE doesn't know about this...)Now it's up to you. Experiment with the program, browse through the other chapters of the tutorial, and most of all:
You find the requirements in a dedicated chapter. Cutting a long story short: You need Java 6 and JSF 2.2.
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:
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/!
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.
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/webapps
This folder contains the XHTML files and the AngularJS controllers.Our example uses these files:
If you use CDI, please replace @ManagedBean by @Named and make sure you import the new Viewscope javax.faces.view
.
This simple example doesn't need an AngularJS-Controller. But if it had one, it'd look like this:
That's it! Your first AngularFaces application is up and running. Granted, it doesn't use AngularJS yet, but it demonstrates several other interesting features of AngularFaces:
pom.xml
is more verbose than the minimal pom.xml
given above.h:
und b:
. (Too bad your IDE doesn't know about this...)Now it's up to you. Experiment with the program, browse through the other chapters of the tutorial, and most of all:
A página ainda não foi traduzido para o Português. Por favor, leia a tradução em Inglês. Pedimos desculpas por qualquer inconveniente.
You find the requirements in a dedicated chapter. Cutting a long story short: You need Java 6 and JSF 2.2.
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:
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/!
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.
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/webapps
This folder contains the XHTML files and the AngularJS controllers.Our example uses these files:
If you use CDI, please replace @ManagedBean by @Named and make sure you import the new Viewscope javax.faces.view
.
This simple example doesn't need an AngularJS-Controller. But if it had one, it'd look like this:
That's it! Your first AngularFaces application is up and running. Granted, it doesn't use AngularJS yet, but it demonstrates several other interesting features of AngularFaces:
pom.xml
is more verbose than the minimal pom.xml
given above.h:
und b:
. (Too bad your IDE doesn't know about this...)Now it's up to you. Experiment with the program, browse through the other chapters of the tutorial, and most of all:
Die Mindestanforderungen sind in einem eigenen Kapitel beschrieben. Um es kurz zu machen: Sie brauchen Java 6 und JSF 2.2.
Am einfachsten ist es, mit einer der Projektschablonen zu beginnnen. Auf dem AngularFaces GitHub Repositoy liegt ein einfaches Demo-Projekt, das AngularFaces mit BootsFaces und PrimeFaces kombiniert. In den meisten Fällen ist das eine gute Basis:
CombinedResourceHandler
zu verwenden. AngularFaces und BootsFaces laden viele kleine Javascript- und CSS-Dateien. Der CombinedResourceHandler
beschleunigt das Laden der Seite
erheblich. Zumindest heute (22.03.2015) noch: falls Sie SPDY oder HTTP/2 einsetzen, bremst der CombinedResourceHandler
ihre Seite möglicherweise aus.Falls Sie dennoch auf BootsFaces oder PrimeFaces verzichten wollen, entfernen Sie einfach die entsprechenden Einträge in der pom.xml
.
Ein weiteres interessantes Demo ist das Autohändler-Demo, dessen Quelltexte auf GitHub liegen. Ich verwende dieses Projekt oft zum Experimentieren. Erwarten Sie als bitte keinen vorbildlichen Quelltext. Dafür finden Sie dort aber Beispiele, wie Sie eine PrimeFaces-Datatable oder die AngularJS-Komponente ngTable in AngularFaces verwenden können, oder wie Sie Daten aus Javascript heraus zum Server schicken können.
Für etwas verspieltere Naturen gibt es noch das Tetris Demoprojekt. Es handelt sich dabei um eine etwas weitergehende Demostration der Möglichkeiten von AngularFaces. Es enthält eine Menge Javascript-Code, aber auch einen Datenbankzugriff auf der Serverseite. Viel Spaß mit der Live-Demo auf http://angularfaces.net/tetris/!
Sie haben die Wahl, eine fertige AngularFaces-Version von MavenCentral oder jCenter zu beziehen, oder sich die aktuelle Entwicklerversion aus den GitHub-Quelltexten selber zu bauen. Mittlerweile ist AngularFaces so ausgereift, dass ich immer die erste Variante empfehle.
In jedem Fall müssen Sie in der web.xml
noch einen Kontextparameter hinzufügen, damit AngularFaces läuft.
Wenn Sie den Kontextparameter vergessen, erinnert AngularFaces Sie beim Hochfahren des Servers daran.
Wenn Sie Maven oder Gradle verwenden, sind Sie wahrscheinlich schon mit der Standard-Projektstruktur von Maven vertraut.
Wichtig sind dabei diese Ordner:
src/main/java
Hier kommen Ihre Java-Quelltexte hin.src/main/resources
Hier kommen Dateien hin, die nicht kompiliert werden müssen, aber trotzdem in den Klassenpfad aufgenommen werden sollen. Dazu gehören zum Beispiel die
Sprachdateien für die in AngularFaces eingebaute automatische Übersetzung.src/main/webapps
Hier kommen die XHTML- und die AngularJS-Controller hin.In unserem Beispiel verwenden wir diese Dateien:
Falls Sie CDI verwenden, ersetzen Sie bitte @ManagedBean duch @Named und importieren den neuen Viewscope javax.faces.view
.
Dieses Beispiel braucht keinen AngularJS-Controller. Aber wenn es einen AngularJS-Controller hätte, sähe es so aus:
Das war's! Ihr erstes AngularFaces-Programm läuft schon. Es verwendet zwar noch kein AngularJS, dafür zeigt es einige andere Features von AngularFaces:
pom.xml
deutlich länger als die weiter oben angegebene pom.xml
.h:
und b:
können Sie bei AngularFaces in den meisten Fällen weglassen. (Leider weiss Ihre IDE nichts davon...)Jetzt sind Sie an der Reihe: experimentieren Sie mit dem Programm, und stöbern Sie in den übrigen Kapiteln dieses Tutorials. Mir bleibt an dieser Stelle nur noch Eines zu sagen: