Angular Route Infinite Loop

Question

For some reason when I have a dynamic property in my route and access that page I get stuck in an infinite loop where that page will continuously request itself.

.config(["$routeProvider", "$locationProvider", function($routeProvider, $locationProvider)
{
    $locationProvider.html5Mode(true);

    $routeProvider.when("/", {
        templateUrl: "pages/index.html",
        controller: "IndexCtrl"
    }).when("/listhome", {
        templateUrl: "pages/listhome.html",
        controller: "ListHomeCtrl"
    }).when("/profile", {
        templateUrl: "pages/profile.html",
        controller: "ProfileCtrl"
    }).when("/newlist", {
        templateUrl: "pages/newlist.html",
        controller: "NewListCtrl"
    }).when("/userlists/:id", {
        templateUrl: "pages/userlists.html",
        controller: "UserListsCtrl"
    }).otherwise({
        redirectTo: "/"
    });

The route I'm looking at is the /userlists/:id route. The controller for that route is-

TopTenApp.controller("UserListsCtrl", ["$scope","$routeParams", function($scope, $routeParams)
{
    console.log($routeParams);
    $scope.lists = [];
}]);

And when I access /userlists/9 I see-

Object {id: "9"}

Being logged every 3 seconds and the page freezes. This seems to happen whenever there is a forward slash after the location ("/userslists/" instead of "/userlists").

Does anyone know the cause of this?

Another problem I'm having is that if I got to /userlists/9 directly through the address bar and not through a link on the site the entire page's html contents is alerted. Anyone know why this happens? — micah, Jan 25 '14 at 21:53
Forget I said anything. Another logic issue- not angularjs related. — micah, Jan 25 '14 at 21:57

score 26 · Accepted Answer · answered Jan 25 '14 at 21:49

26

Silly me I realized the problem. I guess it makes sense but the template url needs to have a forward slash in front of it when the page is multiple "directories" deep.

.config(["$routeProvider", "$locationProvider", function($routeProvider, $locationProvider)
{
    $locationProvider.html5Mode(true);

    $routeProvider.when("/", {
        templateUrl: "/pages/index.html",
        controller: "IndexCtrl"
    }).when("/listhome", {
        templateUrl: "/pages/listhome.html",
        controller: "ListHomeCtrl"
    }).when("/profile", {
        templateUrl: "/pages/profile.html",
        controller: "ProfileCtrl"
    }).when("/newlist", {
        templateUrl: "/pages/newlist.html",
        controller: "NewListCtrl"
    }).when("/userlists/:id", {
        templateUrl: "/pages/userlists.html",
        controller: "UserListsCtrl"
    }).otherwise({
        redirectTo: "/"
    });
}]);

Hopefully that helps someone else with a similar problem.

answered Jan 25 '14 at 21:49

micah

7,596
10
49
90

Thanks! Also make sure you also update the paths in your ng-includes. – PeterB Jul 20 '14 at 20:00
This just solved a similar problem of mine (after I spent more time on it than I'd like to admit). Thanks! – kajetons Sep 14 '14 at 17:10
1

Same here, the problem was a misspell templateUrl. Thanks! – Bertrand Nov 06 '14 at 15:37
1

I'm getting 404 (Not Found) error when adding a forward slash. – AJ_83 May 20 '15 at 13:02
@AJ_83 It largely depends on how your urls are setup. – micah May 20 '15 at 14:04
Problem solved. I got: //when('/', { // templateUrl: 'index.html', // controller: 'controllerA' //}). PLUS otherwise({ redirectTo: '/' }); in my config file. Deleted first one. – AJ_83 May 20 '15 at 14:18
Thank you man, I am just wondering how you figured it out, I spend a lot of time , and almost getting crazy :) just to add , if you have images or links in your page , they also need to have forward slash in front – Milad Rezazadeh Aug 17 '15 at 17:08

Angular Route Infinite Loop

1 Answers1

Linked