Angular JS route causing infinite loop

Question

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 t

Answer 1

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: ''.

Answer 2

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)

   2. 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

Answer 3

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'
})

Answer 4

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!).

Answer 5

Got the similar problem with Rack application. Solution was:

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

Answer 6

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: "/"
  });