How to combine angularjs and xhtml?

All we need is an easy explanation of the problem, so here it is.

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?

How to solve :

I know you bored from this bug, So we are here to help you! Take a deep breath and look at the explanation of your problem. We have many solutions to this problem, But we recommend you to use the first method because it is tested & true method that will 100% work for you.

Method 1

One of the best ways to do this is to use the HTML/XHTML data- attributes. You can write valid HTML and XHTML without having to include any angular namespace. This would be as follows:

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" data-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>

This is also beneficial when it comes to all other Angular declarations, such as ng-repeat and ng-show, etc.

<div ng-repeat="item in items">{{item.name}}</div> // This won't validate.
<div data-ng-repeat="item in items">{{item.name}}</div> // This will validate.

Note that your solution with bootstrapping the Angular app is also valid – but it’s not really a fix for the issue you’re having. (It’s simply a different way to load your Angular app, which happened to work for your situation since you didn’t have any other ng- directives in your markup.)

See a similar question and answer here.

Method 2

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…

Note: Use and implement method 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply