Angular inline template 404 not found in drupal page

Question

I'm serving an angular router in a drupal 7 page. The same example works fine in this fiddle: http://jsfiddle.net/laurencefass/Lsu8p124/.

HTML

<script type="text/ng-template" id="embedded.home.html">
  <h1> Home </h1>
</script>

<script type="text/ng-template" id="embedded.about.html">
  <h1> About </h1>
</script>

<div ng-app="routerApp"> 
  <div id="navigation">  
  <a href="#/home">Home</a>
  <a href="#/about">About</a>
  </div>
  <div ng-view></div>
</div>

Javascript

var app=angular.module('routerApp', ['ngRoute']);

app.controller('HomeController', function ($scope) {});
app.controller('AboutController', function ($scope) {});
app.config(function ($routeProvider) {
    $routeProvider.
    when('/home', {
       templateUrl: "embedded.home.html",
       controller: 'HomeController'
    }).
    when('/about', {
       templateUrl: 'embedded.about.html',
       controller: 'AboutController'
    }).
    otherwise({
        redirectTo: '/home'
    });
});

I get the following runtime error:

score 0 · Answer 1 · edited May 23 '17 at 11:58

0

The scripts need to be inside the ng-app div for inline scripts to work otherwise angular is looking for a file. not the best implementation, nor obviously documented, but it works for testing purposes. Using Inline Templates in Angular

edited May 23 '17 at 11:58

Community

1
1

answered Oct 22 '15 at 11:32

Laurence Fass

1,614
3
21
43

Angular inline template 404 not found in drupal page

1 Answers1