Tag Archives: angularjs

Embedded AngularJS partials, or: HTML5 !== XHTML

Posted on by
Reply

I just bumped heads with a really gnarly problem. In fact it’s a miracle that I stumbled upon the solution, it could have gone unseen for a long time!

The root of the problem was that I used XHTML syntax in a HTML5 document, and I didn’t get what I expected. I’m still getting used to HTML5 and my understanding was that HTML5 was a superset of HTML4 and XHTML with some extensions. As such I expected XHTML syntax to be supported by HTML5 — but, not so!

I was trying to refactor my AngularJS app to use partial views that were embedded in <script> tags with the type ‘text/ng-template’ and an associated ID.

On my way I found this article on StackOverflow which said:

make sure that the inline script tags are children of the element that has the ng-app=”myApp” attribute.

That was actually a problem I had to solve, I think, because I’d put the ng-app directive on the <html> element not the <body> element. But things still weren’t working and my code looked like this:

...
  <body ng-app="fflurry_app" ng-controller="MainCtrl">
    <ul class="menu">
      <li><a href="#/home">Home</a></li>
    </ul>
    <div ng-view />
    <!-- partials: -->
<script type="text/ng-template" id="home.html">
<h1>Welcome!</h1>
</script>
<script type="application/javascript">
'use strict';
var fflurry_app = angular.module( 'fflurry_app', [] ).
  config( [ '$routeProvider', function( $routeProvider ) {
      $routeProvider.when( '/home', { templateUrl: 'home.html', controller: 'MainCtrl' } );
      // ...      
    }]);
    // ...
</script>
...
</body></html>

So… have you spotted the problem? It’s a tricky one… the problem is with the ‘<div ng-view />’ element. This is being parsed as an open <div> with no closing </div> in HTML5. In XHTML this would be an opened and closed element. In HTML5 it’s ignoring the ‘/>’ and just opening a <div>! Hah! So the <script> partials are children on this <div> and not of the ng-app container, so they’re not being found by Angular!

The solution is now trivial. Just make sure we open and close our ng-view <div> like this: <div ng-view></div>.