CODEWITHSUNDEEP
angularjsangularjs-directiveangularjs-routing
Nicholas Pappas
Nicholas Pappas

Reputation: 10624

AngularJS ng-template Directive Not Found in routeProvider

I am attempting to include multiple partial templates to be included in an ng-view, but the routeProvider directives are always trying to fetch the file from the server (not the embedded ng-template).

I have the following defined in my HTML:

<script type="text/ng-template" id="groupList.html">
  <!-- contents -->
</script>

<script type="text/ng-template" id="participantList.html">
  <!-- contents -->
</script>

<script src="js/app.js"></script> <!-- AngularJS app file -->

In my app.js file I have the following:

var myApp = angular.module('myApp', ['ngResource', '$strap.directives']);

// Update interpolateProvider for Django server
myApp.config(function ($interpolateProvider) {
    $interpolateProvider.startSymbol('[[');
    $interpolateProvider.endSymbol(']]');
});

myApp.config(function ($routeProvider)
{
    $routeProvider.when('/', {
        templateUrl: '../static/views/home.html'
    });

    $routeProvider.when('/group', {
        controller: 'GroupCheckInCtrl',
        templateUrl: 'groupList.html'
    });

    $routeProvider.when('/group/:groupId', {
      controller: 'GroupCheckInCtrl',
      templateUrl: 'participantList.html'
    });

    $routeProvider.otherwise({
        redirectTo: '/'
    });
});

When ever I load the page, I get an error in my browser console:

GET http://127.0.0.1:8000/visitorLog/group/groupList.html 404 (NOT FOUND)

The AngularJS app section of my page looks like this:

<div ng-app="myApp" ng-controller="GroupCheckInCtrl">
  <!-- other content -->

  <ng-view>Loading...</ng-view>

</div>

What am I missing that is not allowing AngularJS to load my ng-template script directive?

Upvotes: 1

Views: 7186

Answers (1)

Chris Auer
Chris Auer

Reputation: 1167

make sure that the inline script tags are children of the element that has the ng-app="myApp" attribute. If the script tags are outside this element, it will not work. The easiest way to fix this is to add the "ng-app='myApp'" to the tag. Here is an example of what I mean:

<body ng-app="plunker" ng-controller="MainCtrl">
  <script type="text/ng-template" id="groupList.html">
    Group list html
  </script>

  <script type="text/ng-template" id="participantList.html">
    Participants list html
  </script>
  <ul>
    <li><a href="#/group">group</a></li>
    <li><a href="#/participant">participant</a></li>
  </ul>
  <div ng-view>
    Loading...
  </div>

</body>

Here is the relevant plunker: http://plnkr.co/edit/K1gMiLenRk0oPkzlGNjv

Upvotes: 13

Related Questions