Home » JavaScript » Angular.js » Did AngularJS Borrow Some Concepts from JSF?

About Max Katz

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 an 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/

Reference: Did AngularJS Borrow Some Concepts from JSF? from our WCG partner Max Katz at the Maxa blog blog.

Do you want to know how to develop your skillset to become a Web Rockstar?

Subscribe to our newsletter to start Rocking right now!

To get you started we give you our best selling eBooks for FREE!

 

1. Building web apps with Node.js

2. HTML5 Programming Cookbook

3. CSS Programming Cookbook

4. AngularJS Programming Cookbook

5. jQuery Programming Cookbook

6. Bootstrap Programming Cookbook

 

and many more ....

 

I have read and agree to the terms & conditions

 

Subscribe
Notify of
guest

This site uses Akismet to reduce spam. Learn how your comment data is processed.

0 Comments
Inline Feedbacks
View all comments