Welcome!

APIs for the Internet of Things

Max Katz

Subscribe to Max Katz: eMailAlertsEmail Alerts
Get Max Katz via: homepageHomepage mobileMobile rssRSS facebookFacebook twitterTwitter linkedinLinkedIn


Blog Feed Post

Did AngularJS Borrow Some Concepts from JSF?

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:

<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.

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

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

    $scope.countAction = function () {
        $scope.echo = $scope.name;
        $scope.count = $scope.name.length;
    };
}]);
@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: https://jsfiddle.net/maxkatz/wbpp331b/


Read the original blog entry...

More Stories By 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” (Apress 2008, 2011), DZone MVB (Most Valuable Blogger), and is a frequent speaker at developer conferences. You can find out what Max is up to on his blog: http://maxkatz.org and Twitter: @maxkatz.