days
0
-38
0
hours
-2
0
minutes
0
-8
seconds
-3
-9
search
AngularJSF

Did AngularJS borrow concepts from JSF?

Max Katz
Idea image via Shutterstock

AngularJS and the JavaServer Faces are two different frameworks. But as it turns out, the two have some strikingly similar approaches.

Since Appery.io added support for Bootstrap and AngularJS, I have been using these frameworks a lot. Many years ago I have been using and teaching JSF and RichFaces frameworks. Surprisingly (or not), I see some concept similarities between AnguarJS and JSF. Obviously AngularJS and JSF are very different frameworks, but they do share some concepts. Let’s look at a simple example.

This is how AngularJS page looks:

<html>
<body ng-app="myApp1">
   <div ng-controller="myController">
      <p>Name:<input type="text" ng-model="name"/></p>
      <p>Echo: {{echo}}</p>
      <p>Count: {{count}}</p>
      <p>
         <button ng-click="countAction()">Submit</button>
      </p>
   </div>
</body>
</html>

and this is how JSF page looks:

JSF/Facelets page

<html>
<body>
   <h:form>
      <p>Name:<h:inputText value="#{echoBean.name}"/></p>
      <p>Echo: #{echoBean.echo}</p>
      <p>Count: #{echoBean.count}</p>
      <p><h:commandButton value="Submit" actionListner="#{echoBean.countListner}"/>
   </h:form>
</body>
</html>
  • AngularJS defines the name model via the ng-model directive. The directive extends the functionality of HTML input element.
  • JSF defines the name model via the managed bean. <h:inputText> component extends the functionality of HTML input element.
  • {{echo}} and {{count}} are displayed using expressions and are bound (binding) to AngularJS scope. Both variables are set in AngularJS controller (similar to JSF managed bean)
  • #{echoBean.echo} and #{echoBean.count} are displayed using expressions and are bound (binding) to a managed bean inside JSF scope. Both variables are defined in JSF managed bean (similar to AngularJS controller)
  • ng-click references a function (defined in scope) to count the length of the input
  • actionListener references a function (defined in managed bean) to count the length of the input
  • AngularJS provides directives to extend HTML markup, JSF provides UI components to extend  HTML markup.

As you can see some of the concepts are rather similar even though the syntax is different. Both frameworks define a view (page) that is bound to an object in a scope.

Obviously these are very high level similarities and you can probably argue that many other frameworks share the same concepts. One important difference between the frameworks is that AngularJS is a client-side framework while JSF is a server-side framework.

AngularJS Controller

var myApp = angular.module('myApp1', []);

myApp.controller('myController', ['$scope', function ($scope) {

    $scope.countAction = function () {
        $scope.echo = $scope.name;
        $scope.count = $scope.name.length;
    };
}]);

JSF Manager Bean

@ManagedBean(name="echoBean")
@RequestScoped
public class EchoBean {
   private String name;
   private Integer count;

   public void countListener (ActionEvent event){
      count = name.length(); }
   }
   // getters and setters
}

You can try the AngularJS example here.

Author
Max Katz
Max Katz heads Developer Relations for Appery.io, a cloud-based mobile app platform. He loves trying out new and cool REST APIs in mobile apps. Max is the author of two books “Practical RichFaces”, and is a frequent speaker at developer conferences.

Leave a Reply

avatar
400