【问题标题】：How to use AngularJS in jsf page如何在 jsf 页面中使用 AngularJS
【发布时间】：2016-12-05 14:52:39
【问题描述】：

我想学习 AngularJS 以在 JSF 页面中使用。这纯粹是学习目的。我尝试在 jsf 中简单地添加 AngularJS 代码。但似乎它不能识别 AngularJS 代码。它只是在浏览器中输出相同的My first expression: {{ 5 + 5 }}。

我的 jsf 页面

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js">    
    </script>

    <body>
      <div ng-app="hi" >
         <p>My first expression: {{ 5 + 5 }}</p>
      </div>

    </body>

</html>

谁能帮助我如何在 jsf 页面中获取 AngularJS 表达式的输出？或者告诉我一些方向

更新

我的实际意图是从 Managebean 或另一个 jsf 页面获取一些 json 并在此处填充。但作为测试，我尝试创建一个虚拟 json 结构。但 jsf 仍然无法识别 AngularJS 组件。它只是打印我的第一个表达式：{{ 5 + 5 }} 浏览器控制台打印MyFirstAng.xhtml:24 Uncaught TypeError: app.conntroller is not a function

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<body>
<div ng-app="myAPP" ng-controller="customerctrl">    
<p>My first expression: {{ 5 + 5 }}</p>

<!-- <ul>
<li ng-repeat="x in myData">
{{x.Name + ', ' + x.Age}}
</li>
</ul>
 -->

 </div>    
</body>    
<SCRIPT type="text/javascript">

    var app = angular.module('myAPP',[]);
     app.conntroller('customerctrl', function($scope){

      // $scope.myData=[{Name:'jani',Age:'32'}];
     });

 </SCRIPT> 
</html>

【问题讨论】：

hi 模块在哪里定义？您是否已将其添加到您的索引页？

标签： angularjs jsf jsf-2

【解决方案1】：

好的，我找到了问题。这是app.controller 中的一个错字。我输入了额外的“n”。有效。感谢到目前为止所有指导我发现问题的人。我以为我缺少包含一些 AngularJS 库之类的东西。

【讨论】：

【解决方案2】：

要么粘贴这个

var app = angular.module('hi',[]);

在您的脚本中或使ng-app="" ...您的选择。如果您在ng-app 中指定任何内容，那么您必须按照我上面给出的那样制作一个模块。否则，不要在ng-app 中指定任何内容，即ng-app=""。在稍后阶段，当您想要制作控制器时，您可以制作一个模块。现在最好留空。

【讨论】：

@zaunut 如果我删除属性值我得到message Error Parsing /angular/MyFirstAng.xhtml: Error Traced[line: 7] Attribute name "ng-app" associated with an element type "div" must be followed by the ' = ' character. 错误
很高兴您遇到了这个问题....将任何一个答案标记为正确答案以将此问题标记为已回答..

【解决方案3】：

为了让 Angular 初始化 ng-app="hi"，需要存在一个具有该名称的模块。否则，您应该会在浏览器开发工具控制台中看到异常。开发 javascript 应用时请注意控制台错误

要么包含一个具有该名称的模块，要么从属性中删除该名称，然后使用ng-app

【讨论】：

message Error Parsing /angular/MyFirstAng.xhtml: Error Traced[line: 7] Attribute name "ng-app" associated with an element type "div" must be followed by the ' = ' character. 如果我删除 ng-app 属性值，我会收到此错误。