AngularFaces 2.1: Apache License V2, AngularJS 1.3 and much more

Yesterday, I’ve published what I hope to be the last release candidate of AngularFaces on Maven Central. Basically, AngularFaces 2.1 RC5 already is the final version. I only called it a release candidate I did a few last-minute changes. I felt the need to run more tests.

AngularFaces 2.1 offers many new features. Today, I’ll present four of them: the new license, AngularJS 1.3, first-class divs and the new AJAX support contributed by Marco Rinck.

Apache License V2

By public request, I chose to publish AngularFaces under a more liberal license. Starting with AngularFaces 2.1, I put AngularFaces under an Apache License V2. Putting it in a nutshell, the new license allows you to use AngularFaces in commercial projects.

AngularJS 1.3

I’ve updated AngularJS to version 1.3. The update wasn’t exactly easy: as it turned out, I used quite a few implementation details and internal APIs that have changed. I had to rewrite a couple of components from scratch (i.e. <pui-label /> and <pui-message />).

By the way, I don’t expect incompatibilities when you update from AngularFaces 2.0 to 2.1, with the sole exception of AngularJS 1.3.

Divs are now first-class citizens

Most AngularJS programs put the ng-app and ng-controller attributes on a div. In standard JSF, this is not possible: a div isn’t part of the JSF component tree, so AngularFaces 2.0 didn’t see the AngularJS controller. AngularFaces 2.1 fixes this. div and span now are first-class citizens of JSF, provided they contain an ng-* attribute.

AJAX support

I’ve integrated Marco Rinck’s JUA project into AngularFaces. In other words: the model and scope of AngularJS now “survive” an AJAX request. JUA itself doesn’t update the model, so you have to add an AngularFaces tag to update the model values after an AJAX request: <ac:updateModelAfterAJAXRequest />.

Example

This screen shot shows a rapid prototyping feature of AngularFaces: most labels are automatically guessed from the JSF bean name.

You don’t have to deal with clumsy message bundles. It suffices to provide a language file. AngularFaces translates most text for you:

Labels and messages are added automatically. Notice the <translate> tag and the AngularJS mustaches. They refer to JSF bean attributes, which are also injected into the AngularJS model. AngularFaces synchronizes both models for you.

  <h:body ng-app="AngularFacesExamples" ng-controller="MyCtrl" id="angular">
    <h:form id="myForm" prependId="false">
        <ac:updateModelAfterAJAXRequest />
      <h2><h:outputText value="Welcome to AngularFaces 2.0!" /></h2>
        <translate>Based firmly in the future...</translate><br />
        <hr />
        <h:panelGroup colspan="2" header="{{calculatorBean.headerText}}" >
        <br />
        <h:outputText value="This demo uses the new JSF 2.2 HTML5 style to define the components." />
        <h:panelGrid columns="3">
          <input jsf:value="{{calculatorBean.number1}}" />
          <input jsf:value="{{calculatorBean.number2}}" />
          <input jsf:value="{{calculatorBean.result}}"
               label="#{calculatorBean.resultCaption}" />
          <input jsf:value="{{calculatorBean.serverSideResult}}" />
          <input jsf:value="{{calculatorBean.randomNumberFromServer}}" />
          <h:commandButton value="Add on server (AF AJAX)" 
               action="#{calculatorBean.add}">
            <f:ajax render="angular" execute="@form" />
          </h:commandButton>
          <h:commandButton value="Add on server (JSF AJAX)"
            action="#{calculatorBean.add}">
            <f:ajax render="@form" execute="@form" />
          </h:commandButton>
          <h:commandButton value="Add on server (without AJAX)" 
            action="#{calculatorBean.add}" />
        </h:panelGrid>
        <h:messages globalOnly="false" />
      </h:panelGroup>
    </h:form>
  </h:body>

Kudos

Rudy de Busscher, Thomas Andraschko, Marco Rinck and a developer who calls himself Ratcashdev on GitHub helped to finish and polish AngularFaces 2.1. Thanks, everybody! Kudos also go to everyone who opened an issue on GitHub or dropped my a note. Your feedback matters!

Preview

There are more features added in AngularFaces 2.1. I’ll present them in follow-up articles soon. Stay tuned!

Dig deeper

Marco Rinck presents JUA

2 thoughts on “AngularFaces 2.1: Apache License V2, AngularJS 1.3 and much more

  1. Sam Elstob

    This is impressive stuff. Looking forward to hearing more about it in your follow up articles. We are up against some challenges with JSF 2.1/Primefaces and looking for a way to introduce Angular in an existing application.

    Reply
    1. Stephan Rauh Post author

      Thanks! In the meantime, I’ve release the final version of AngularFaces 2.1 on Maven Central. Currently I’m preparing the follow-up articles.

      By the way, probably you have to update to JSF 2.2 to use AngularFaces.

      Would you mind to tell us which challenges you ran into? Maybe it helps me to learn how AngularFaces can be improved in future versions.

      Reply

Leave a Reply

Your email address will not be published.