AngularJS是否從JSF借用了概念？
發(fā)布于：2021-02-06 00:00:59
AngularJS和JavaServer Faces是兩個不同的框架。但事實證明，兩者有一些驚人相似的方法。
自從Appery.io添加了對Bootstrap和AngularJS的支持以來，我一直在使用這些框架。許多年前，我一直在使用和教授JSF和RichFaces 框架。出乎意料的是（或沒有），我看到了AnguarJS和JSF之間的一些概念相似之處。顯然，AngularJS和JSF是非常不同的框架，但是它們確實共享一些概念。讓我們看一個簡單的例子。
這是AngularJS頁面的外觀：
<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>這是JSF頁面的外觀：
JSF / Facelets頁面
<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 通過ng-model指令定義 名稱模型。該指令擴展了HTML輸入元素的功能。
JSF通過托管bean定義名稱模型。<h：inputText>組件擴展了HTML輸入元素的功能。
{{echo}}和{{count}}使用表達式顯示，并綁定（綁定）到AngularJS范圍。這兩個變量都在AngularJS控制器中設置（類似于JSF托管Bean）
＃{echoBean.echo}和＃{echoBean.count}使用表達式顯示，并綁定（綁定）到JSF范圍內的托管bean。這兩個變量都在JSF托管Bean中定義（類似于AngularJS控制器）
ng-click引用一個函數（在范圍內定義）以計算輸入的長度
actionListener引用一個函數（在托管Bean中定義）以計算輸入的長度
AngularJS提供指令以擴展HTML標記，JSF提供UI組件以擴展HTML標記。
如您所見，即使語法不同，某些概念還是非常相似。這兩個框架都定義了一個視圖（頁面），該視圖綁定到范圍內的對象。
顯然，這些都是非常相似的，您可能會認為許多其他框架都具有相同的概念?？蚣苤g的一個重要區(qū)別是AngularJS是客戶端框架，而JSF是服務器端框架。
AngularJS控制器
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 }
作者介紹
