CODEWITHSUNDEEP
angularjsjsfxhtmlfacelets
cauchuyennhocuatoi
cauchuyennhocuatoi

Reputation: 471

Using AngularJS <div ng-app=""> in Facelets causes warning "Undefined attribute name (ng-app)"

I am building web site using JSF, so that I use Facelets as view technology. Facelets is XHTML+XML based. Now I want to use AngularJS into my project. I read tutorial here: http://www.w3schools.com/angular/tryit.asp?filename=try_ng_intro.

<!DOCTYPE html>
<html>

<head>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
</head>

<body>

<div ng-app="">

<p>Input something in the input box:</p>
<p>Name: <input type="text" ng-model="name" value="John"></p>
<p ng-bind="name"></p>

</div>

</body>
</html>

I push above code in to a file test.xhtml. But a warning appears:

Undefined attribute name (ng-app)

How can I modify XHTML so that it understands AngularJS?

Upvotes: 1

Views: 1573

Answers (2)

BalusC
BalusC

Reputation: 1109222

This warning is coming from the editor, not from JSF. The editor is during validation just thinking that you're brand new to this all and possibly made a mistake, because this attribtue is not recognizable as standard JSF/Facelets. You can safely ignore the warning and run the code straight away. It should run and work fine.

You can reconfigure the editor to not show the warning anymore. You did unfortunately not tell anywhere which editor you're using, so it's merely guessing based on the exact error message. The exact error message is recognizable as the one coming from Eclipse. I can reproduce it here:

enter image description here

Do you notice that Eclipse was so friendly to show quick fixes as well? Pick the one which says "Ignore 'ng-app' attribute in valiation" (or perhaps the one saying 'ng-*' attributes). It'll bring you to Eclipse validation preferences with the excluded attribtues prefilled:

enter image description here

Just click OK and then do a rebuild/revalidate. Now the warning should disappear:

enter image description here

Upvotes: 0

iTollu
iTollu

Reputation: 1069

The solution is to let JSF insert a pass-through attribute. If you swap <div ng-app=""> with JSF' <h:panelGroup layout="block"> you can give JSF control over that div's attributes:

<html 
    xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://xmlns.jcp.org/jsf/html"
    xmlns:f="http://xmlns.jcp.org/jsf/core"
/>
...
<h:panelGroup layout="block">
    <f:passThroughAttribute name="ng-app" value=""/>
</h:panelGroup>
...
</html>

See Oracle tutorial, section 8.9.2 Using Pass-Through Attributes.

Upvotes: 0

Related Questions