4

I am new to angularjs, and was trying to create a sample angularjs in a Facelets file. But I am getting an error in the line <html ng-app> in Eclipse IDE. The error specifies that the ng-app attribute should be followed by an = character. Is it not possible to include angularjs code in a Facelets XHTML file?

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:ng="http://angularjs.org" ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
</head>
<body>
<div>
<label>Name:</label>
<input type="text" ng-model="yourName" placeholder="Enter a name here">
<hr>
<h1>Hello {{yourName}}!</h1>
</div>
</body>
</html>
BalusC
  • 1,082,665
  • 372
  • 3,610
  • 3,555
aquero
  • 843
  • 4
  • 13
  • 30
  • Show us the part of the code where the error is being reported. – MD Sayem Ahmed Aug 21 '13 at 11:23
  • The IDE might just be trying to HTML validate the file. Your app should still work with just `ng-app` attribute. – AlwaysALearner Aug 21 '13 at 11:27
  • but I tried to access the page using firefox. It didnt work. – aquero Aug 21 '13 at 11:31
  • See firebug console for errors. – Chandermani Aug 21 '13 at 11:33
  • In XHTML attributes without assigned values are invalid, which is why Eclipse is complaining. Your app should continue to work normally if you want to ignore the warnings. – André Dion Aug 21 '13 at 12:41
  • @AndréDion I gave an empty string as the ng-app attribute value, then the error stopped appearing. But now when I try to access the xhtml page using firefox, getting this error . "This XML file does not appear to have any style information associated with it. The document tree is shown below." and it displays the xhtml page as such. – aquero Aug 21 '13 at 13:37
  • @aquero Remove the `` line and set your encoding with a `` tag instead: `` (place that within your `` section). – André Dion Aug 21 '13 at 13:44
  • @AndréDion : Tried that, but still showing the same error.. :( – aquero Aug 21 '13 at 13:49
  • @aquero It would be helpful if you can reproduce your setup on [jsfiddle](http://jsfiddle.net/) or [plunker](http://plnkr.co/). – André Dion Aug 21 '13 at 13:57
  • 1
    @André: Huh? Do you have *any* idea what you're talking about? They have both a quite different meaning! Your comment is therefore utter nonsense and a completely blind shoot in the dark. But, after all, removing the XML prolog should absolutely not matter to Facelets' XML parser. It defaults to UTF-8 already. The meta tag is also superflous. JSF defaults to that content type already. – BalusC Aug 22 '13 at 12:13
  • 2
    aquero, I don't do angularjs, so I have no utter idea if it works, but it appears that you could just specify an arbitrary attribute value such as ``. That should make it XML-valid. This is also hinted by Tushar Sharma, albeit in a bit poor way as he didn't bother to read the code formatting rules in the message editor help. – BalusC Aug 22 '13 at 12:20
  • 1
    aquero, as to *"This XML file does not appear to have any style information associated with it"*, this is a completely different problem unrelated to angularjs. You made likely the classic beginner's mistake that you forgot to invoke JSF's `FacesServlet` with the request to the Facelets file. See also e.g. http://stackoverflow.com/questions/14804452/opening-facelets-page-errors-with-this-xml-file-does-not-appear-to-have-any-sty – BalusC Aug 22 '13 at 12:22
  • @BalusC Try not to sound like such an egotistical tool. I'm attempting to help and your comments directed towards me and Tushar aren't at all constructive and are borderline offensive. My suggestion to remove the XML declaration is based on [the W3C's recommendation](http://www.w3.org/TR/xhtml1/#C_1) to do so. – André Dion Aug 22 '13 at 13:01

4 Answers4

3

Take a look at following:

  1. Try angular faces: https://github.com/stephanrauh/AngularFaces
  2. And there is also a project: https://github.com/pankajtandon/PointyPatient
  3. Prime faces refer to: http://angularprime.appspot.com/#/main

The best way is to go with HTML & JS as Client, and JAX-RS on Server Side.

I had similar problems, with Primefaces and Bootstrap, and became convinced, that JS & HTML at the moment is better for client side development.

mavarazy
  • 7,562
  • 1
  • 34
  • 60
0

Give the attribute the ng-app.

The value of the attribute would be the same as the name of variable that contains the return value of angular.module().

for ex: ng-app="SampleApp"
in the html page

var SampleApp = angular.module("SampleApp", ["ngResource"]). config(

//your code

);

in the app.js file

I think this should work for you.

The logic is that, when you define the ng-app it gives the reference to the particular module of app.js that would call the relevant controllers.

Tushar Sharma
  • 347
  • 1
  • 3
  • 11
0

There is an app.js file in angularjs. This contains all the controllers define. These controllers act as connecters and data pipeliners between the html(our view) and the .cs(mvc controller) files.

These controllers are defined in a module (as i have defined one in the above answer).

There can be numerous modules in app.js. and hence they wil have numerous controllers.

ng-app is a directive that contains the name of the module you want to use as attribute. ng-app defined will be active till the closing tag of the tag defined. That means if you have defined ng-app in html tag, it will work till the html tag closes, if in a div, it will work for that division.

If you dont get anything, google it, or refer the angularjs documentation, or shoot me a question.!!

I hope you got something out of it.:-)

Tushar Sharma
  • 347
  • 1
  • 3
  • 11
0

Stumbled on this while searching myself.

XHTML does not allow an attribute without a value. While you can ignore this in Eclipse, the latest JSF libraries blow up and you'll get an exception.

Specify a value, which corresponds to your module name. For example, if you initialize your angular module with:

var myAppModule = angular.module('myApp', []);

Then you need to specify:

<html ng-app="myApp">

And all should be good minus some warnings in eclipse for not recognizing "ng-app". Works for me. Also, you probably want the HTML 5 doc type instead of the strict you have. Try:

<!DOCTYPE html>
<html ng-app="myApp">
MarkL
  • 477
  • 4
  • 11