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/
Max Katz 
Leave a Reply