How to combine angularjs and xhtml?

angularjs

Solution

I found a solution using manual setup. The code then looks like this:

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>My HTML File</title>
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js" />
    <script type="text/javascript">
        angular.module('myApp', []);

    angular.element(document).ready(function() {
      angular.bootstrap(document, ['myApp']);
    });
  </script>
</head>
<body>

  <p>Nothing here {{'yet' + '!'}}</p>

</body>
</html>

While this seems a suitable workaround for now, I'd still love to know what the problem is...

Problem

Here is an example of a minimal example for angularjs which works when saved as `angular.html`: ``` <!DOCTYPE html> <html lang="en" xmlns:ng="http://angularjs.org" ng:app=""> <head> <title>My HTML File</title> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script> </head> <body> <p>Nothing here {{'yet' + '!'}}</p> </body> </html> ``` However I strongly believe in XML and I like to create all my html documents XML compliant. I tried to adapt the example and save it as `angular.xhtml`: ``` <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:ng="http://angularjs.org" ng:app=""> <head> <title>My HTML File</title> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js" /> </head> <body> <p>Nothing here {{'yet' + '!'}}</p> </body> </html> ``` The big changes are the xhtml-Namespace and the file extension ".xhtml". There is no error or anything. It's just that the page is displayed as if angular was not present. How do I get angularjs working with an XML compliant file?

Original source