"Invalid Template Root" error

I am using AngularJS for the front end of my Play 2.0 application. I loosely followed Paul Dijou's blog post for setting up HTML5 routing. Basically, Play framework serves the index.html file for every unknown route, and from there AngularJS routing takes over.

In my application I have moved my navigation bar into a directive. This works fine when I initially load my application. But when I do a refresh after navigating "deeper" into my Angular app, Angular throws an Invalid Template Root error for my `navbar directive. As you can see below, the template has exactly one root element, just as required.

I already checked this question, but I am using the templateUrl attribute.

Plunker (Content stripped, but otherwise accurate)

Can anyone tell me what I am doing wrong?

Directive:

myDirectives.directive("navbar", function() {
    return {
        restrict : "E",
        replace : true,
        templateUrl : "assets/app/partials/navbar.html"
    };
});

Template (navbar.html):

<div ng-controller="NavbarCtrl">
    <nav class="navbar navbar-fixed-top">
        ... (There is more content here but the problem occurs even if this content is removed)
    </nav>
</div>

Answers


Try replacing your relative template URL with an absolute one:

// Note the leading '/'.
// You could also try a full URL, although that makes development hard.
templateUrl : "/assets/app/partials/navbar.html"

Need Your Help

SoapUI disable logs for a TestCase

groovy soapui

I need to disable logs in soapui while running a test case.

pointer to integer type modeled on pointer to typedef type

c pointers typedef

For didactic motives, i want to build a pointer to an integer, and i take a model from a pointer to a typedef (working example below in (1) ) but the example at (0) gives the mesage "error: syntax