12

I'm trying to figure out why the page doesn't navigate to its template when clicked. The URL updates, and I have no JS errors.. I believe it loads the file, but then it infinitely loads the controller. I found this out after I put a console.log('test!') in my SessionsController's instantiation.

The layout

<div ng-view></div>

My View

<a href="/testing"> My link of seriousness </a>

My JS

window.MainController = function($scope, $route, $routeParams, $location) {
  $scope.$route = $route;
  $scope.$location = $location;
  $scope.$routeParams = $routeParams;
  console.log($route);
  console.log($location);
  console.log($routeParams);
};

MainController.$inject = ["$scope", "$route"];

window.app = angular.module('web_client', [], function($routeProvider, $locationProvider) {
  return $routeProvider.when('/testing', {
    templateUrl: '/partials/other_stuff/index.html',
    controller: 'MyController'
  });
});


window.MyController = function($scope, $http) {
  console.log('Infinite Loop!');
};

And in partials/sessions/new.html , I have big and bright :

FOOBAR!
Improve this question
8
  • @npm I'm not sure what you mean. What is the "/" routes definition that I'm missing, and where would you place that? Commented Jan 28, 2013 at 16:28
  • 1
    Can you create jsfiddle.net example to illustrate issue? There you can even add your coffeescript code - sometimes it produce quite unexpected js. Commented Jan 28, 2013 at 16:47
  • I think this must be an implementation error. Maybe I'm not thinking about this correctly? I just want the view sessions/new.html to show as the view when clicking on my link.. Perhaps I'm doing something else? I updated my answer, but jsfiddle won't work appropriately unless I have my views, controllers, routes, everything up there and then translated to javascript. I'm definitely sure there's no js errors at all. Commented Jan 28, 2013 at 17:04
  • 1
    A few things... it's completely unnecessary to sculpt your view in something the server will have to process everytime. Ember, Meteor and Angular should be processing all HTML for you, anything the server his hosting up you should be able to hard code and cache. Also it's my personal belief that using CoffeeScript in a framework you're unfamiliar with is asking for trouble. Those two things aren't directly related to the cause of your problems, but they are going to hinder you when trying to debug it. Commented Jan 28, 2013 at 21:59
  • Its all just html. Server isn't doing anything but hosting a static site. Commented Jan 28, 2013 at 22:14

9 Answers 9

Reset to default
10

I have had this same issue before as well and I think the root cause is the use of <ng-view> which it looks like was used in this case as well. The route will already load a template URL so I believe the use of the ng-view directive causes that template to get loaded recursively causing an infinite loop.

Try removing ng-view and instead either place all view markup directly in the .html template you specify in templateUrl of the route. Alternatively, if it is a shared template try using ng-include instead(e.g. <div ng-include src="'/path/to/template.html'"></div> Don't forget the single quotes around your path to identify it as a string as opposed to a scope variable reference!).

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Thanks for this! I had used "ng-view" when I had meant to use "ng-show".
6

Problem with Same Symptoms

I recently solved a similar problem in one of my projects. I added console.log("Video Page Controller Loaded") into the controller I was debugging. Likewise, it logged that text until I close the tab.

My solution:

I was referenced the wrong name for the template file.

when('/videos', {
  templateUrl: 'templates/video-list.tpl.html',
  controller: 'VideoListCtrl'
})

When I should have had:

when('/videos', {
  templateUrl: 'templates/video-list.html',
  controller: 'VideoListCtrl'
})
Improve this answer

2 Comments

Just had the same issue. I just needed a "/" in front of my templateUrl which caused the controller to be called infinity. So be have attention to the templateUrl strings.
I was developing a new feature in an app and I hadn't still created the html template, that's how I got the infinite loop. It seems like Angular is trying to get the page again and again instead of displaying an error (ie: template not found). So yeah, misspelled templateUrl, missing template file and similar can cause this.
3

The only thing I see are missing brackets and a missing comma. You may try with this:

$routeProvider
  .when("/login", {
    templateUrl: "sessions/new.html",
    controller: SessionsController
  })
  .otherwise({
    redirectTo: "/"
  });
Improve this answer

11 Comments

Oh sorry its coffeescript, so no commas needed. But how come when my browser displays #/login, it doesnt' actually change the page? Its still the same page..
I checked my implementation and it looks exactly like yours. But does anything load at all?
No.. perhaps I need a redirectTo: in my when statement?
Are you working with the html5mode or basic hash bang? I am not sure whether this causes your issue but one never knows. If not why not set up a simple fiddle to illustrate your problem.
I resolved this.. and it was for something completely unrelated but sort of related. Just wanted to give thanks for your help. The problem was because I was using middleman to build my app. And you have to specify that partials do not include layout. So when Angular called the partial, it called the entire app again. ( embaressing_face.gif )
|
3

Had the same "infinite reload" problem and Alex Johnson made me think. Indeed, if the path of templateURL is empty (this was my case) or wrong path, an infinite reload of resources will happen. For me the solution was simple: I replaced templateURL: '' with template: ''.

Improve this answer

3 Comments

This does not really answer the question. If you have a different question, you can ask it by clicking Ask Question. You can also add a bounty to draw more attention to this question once you have enough reputation.
@ArnaudRinquin: When pattern-matching for "same problem", it's best to check if the post also contains a suggested solution. Which this one does.
Also, why include an empty template?
2

I had this same problem and ultimately realized I had not actually created the partial html file that I was telling it to load in my app.config - if it can't find the template file, Angular seems to go into an infinite loop of the controller function.

Improve this answer

Comments

1

  1. Check partial view path is the correct (check if you are getting HTTP code 302 for partial view. You can use morgan with Node+Express to print HTTP code for each request)

    1. If path is correct then you still may be getting infinite loop as Browser cache the static data. You can disable caching in chrome. To do so:
      • Open developer console
      • Click on setting button in developer console
      • Check on option "Disable cache (while DevTools is open)"
      • Restart the server and refresh the page with developer console in open state

For me, problem solved after resolving the path issue and disabling the caching

Improve this answer

Comments

1

My problem was with a template URL which was incorrect, and then started triggering a route that matched the URL pattern. Double check your templateUrl path is correct.

Improve this answer

Comments

0

Got the similar problem with Rack application. Solution was:

use Rack::Static, urls: ["/js", "/css", "/templates"]
Improve this answer

Comments

0

My problem was related on specifying the templateUrl without initial "/" not only on my router but on my directives!!

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.