Angular ui-router `template:` works, but not `templateUrl:`

Question

Using template: 'test', works, but replacing that line with templateUrl: 'static/app/partials/filter.html', does not do anything, I assume because the partial is never found (but haven't verified this). The path to filter.html is Project/app/static/app/partials/filter.html, where Project is located under C:\Users\david\Dropbox\JetBrains\

This is used in conjunction with a Django project, and I've been following the example set by a DjangoCon demonstration with Angular where their properly working templateUrl is templateUrl: 'static/tweeter/partials/tweet-list.html',

I've tried variations on the templateUrl in assumption that this is the problem, by removing and adding various layers of directories. If this is a directory path problem, what directory am I supposed to use as a reference?

Sorry I can't figure out how to link to plnkr, I'll just copy the code here:

index:

<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-resource.min.js"></script>
  <script data-require="ui-router@*" data-semver="0.2.15" src="http://rawgit.com/angular-ui/ui-router/0.2.15/release/angular-ui-router.js"></script>
</head>

<body ng-app="mapApp">
  <div ui-view>
    <p>test failed</p>
  </div>
</body>
</html>

partial:

<h1>test success</h1>

js:

angular
  .module('mapApp', ['ui.router'])
  .config(function($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.otherwise('/');
    $stateProvider
      .state('test', {
        url: '/',
        templateUrl: 'filter.html',
      });
  })

score 0 · Answer 1 · answered Nov 13 '15 at 11:51

0

your templateUrl should be templateUrl: 'partials/filter.html' only

answered Nov 13 '15 at 11:51

macrog

2,085
1
22
30

Tried that just now, it didn't work. How are we supposed to come up with the correct directory, i.e. what is the templateUrl in relation to? – davidtgq Nov 13 '15 at 11:53
make a plnkr plz to illustrate your problem – macrog Nov 13 '15 at 11:55
`WARNING: Tried to load angular more than once.` that's the only thing in console. Working on the plnkr, haven't used it before – davidtgq Nov 13 '15 at 11:58
Couldn't figure out how to link to plnkr so pasted code in OP, but I can't even get `template:` to work on plnkr (which works in my local project) – davidtgq Nov 13 '15 at 12:20
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/95042/discussion-between-macrog-and-vandidant). – macrog Nov 13 '15 at 12:59

score 0 · Answer 2 · answered Nov 13 '15 at 16:50

0

Make your paths relative to wherever your JS file is located. Also do you see something in the browser's console.

answered Nov 13 '15 at 16:50

Anshul

387
3
15

I tried putting them in the same directory and using `templateUrl: 'test.html'` still no dice. Nothing relevant to the error, just `WARNING: Tried to load angular more than once.` – davidtgq Nov 13 '15 at 16:54

score 0 · Answer 3 · answered Apr 18 '16 at 01:08

0

I was running into the same problem with a Django project, but it worked after setting the templateUrl path to start from the project root directory. Try templateUrl: '/app/static/app/partials/filter.html'. Hope that works!

answered Apr 18 '16 at 01:08

cl2205

21
4

score 0 · Answer 4 · answered May 18 '17 at 14:36

template String works fine but not templateUrl

I am also facing issue with templateUrl:

below is error on chrome console

angular.js:14525 RangeError: Maximum call stack size exceeded
    at Object.error (angular.js:14525)
    at angular.js:11008
    at invokeLinkFn (angular.js:10428)
    at nodeLinkFn (angular.js:9815)
    at compositeLinkFn (angular.js:9055)
    at publicLinkFn (angular.js:8920)
    at lazyCompilation (angular.js:9311)
    at boundTranscludeFn (angular.js:9098)
    at controllersBoundTransclude (angular.js:9865)
    at update (angular-route.js:1172) "<!-- ngView: -->"

Angular ui-router `template:` works, but not `templateUrl:`

4 Answers4