Geek Answers Handbook

How to combine angularjs and xhtml?

Here is an example of a minimal example for angularjs that 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 XML documents compatible with XML. 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>

Big changes are the xhtml namespace and the .xhtml file extension. There is no mistake or anything else. It is just that the page is displayed as if angular were not there.

How do I get angularjs to work with an XML compatible file?

+6
source share
2 answers

I found a solution using manual configuration. Then the code 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>

As long as this seems like a workaround, I will still know what the problem is ...

+2
source

One of the best ways to do this is to use the HTML / XHTML data- . You can write valid HTML and XHTML without having to include any angular namespace. It will 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 useful when it comes to all other angular declarations like 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.

Please note that your solution with downloading the angular application is also valid - but this is not really a fix for the problem you are facing. (This is just another way to download your angular application, which turned out to be ng- for your situation, since you did not have any other ng- directives in your markup.)

See a similar question and answer here.

+3
source

More articles:


All Articles