Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to combine angularjs and xhtml?

Tags:

angularjs

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?

like image 406
yankee Avatar asked Apr 20 '14 18:04

yankee


People also ask

How can you integrate AngularJS with HTML?

AngularJS extends HTML with ng-directives. The ng-app directive defines an AngularJS application. The ng-model directive binds the value of HTML controls (input, select, textarea) to application data. The ng-bind directive binds application data to the HTML view.

Can we use HTML in angular?

With AngularJS, you can include HTML from an external file.

Can I use JavaScript in AngularJS?

Angular JS features Easy to work: It is easy to work with Angular JS because it uses JavaScript, HTML, and CSS languages. Ready to use a template: AngularJS is mostly plain HTML, and it mostly uses the plain HTML template, which it passes to the DOM and then to the AngularJS compiler.

How do I upgrade AngularJS version?

Selecting an update version If there is a big version gap between your application's AngularJS version and the latest, try updating versions incrementally. For example, if your application is running AngularJS 1.2, do not immediately upgrade it to 1.6. 6. Instead choose a version closer to 1.2.


2 Answers

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.

like image 168
jedd.ahyoung Avatar answered Nov 02 '22 01:11

jedd.ahyoung


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...

like image 36
yankee Avatar answered Nov 02 '22 03:11

yankee