AngularJS是否从JSF借用了概念？_javascript_前端_博客

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标记。

如您所见，即使语法不同，某些概念还是非常相似。这两个框架都定义了一个视图（页面），该视图绑定到范围内的对象。

显然，这些都是非常相似的，您可能会认为许多其他框架都具有相同的概念。框架之间的一个重要区别是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 }