AngularJS route not working

Question

I tried to make the 'getting started' tutorial from Angular JS, but I have a problem when setting the route of a link: the controller of that route does not get called when the user clicks on the link.

Here is my code:

angular.module('phonecat', []).
config(['$routeProvider',
    function ($routeProvider) {
        $routeProvider.
        when('/phones', {
            templateUrl: 'partials/phone-list.html',
            controller: PhoneListCtrl
        }).
        when('/phones/:phoneId', {
            templateUrl: 'partials/phone-detail.html',
            controller: PhoneDetailCtrl
        }).
        otherwise({
            redirectTo: '/phones'
        });
    }
]);

function PhoneDetailCtrl($scope, $routeParams, $http) {
    $scope.phoneId = $routeParams.phoneId;

    $scope.total = 4;
    $http.get('phones/' + $routeParams.phoneId + '.json').success(function (data) {
        $scope.phone = data;
    });
}

function PhoneListCtrl($scope, $http) {
    $http.get('phones/phones.json').success(function (data) {
        $scope.phones = data;
    });

    $scope.orderProp = 'age';
}

add quotes around your controllers names when setting routes — jaime
– jaime, Commented Oct 26, 2012 at 3:08
+1 Exact same issue. Routes and pages are all set up appropriately, clicking the link updates the URL in the browser, but no page are actually loaded. — Trip
– Trip, Commented Jan 28, 2013 at 16:34
@jaime i think quote around controller name are not required, in one of my demo example i have put up the quotes but it was not working and when i removed the code it started workin. thanks. — Prerak K
– Prerak K, Commented Aug 13, 2014 at 10:39

AT_ · Accepted Answer · 2013-02-13 12:17:38Z

2

What angularjs version did you use? I follow the tutorial too, and it use angular-1.0.0rc7.js and if I look up in the app.js file, it use template rather than templateUrl:

$routeProvider.when('/phones', {
    template: 'partials/phone-list.html',
    controller: PhoneListCtrl
});

so by looking your code, you might want to use angular-1.0.3.js or prior version above the RC

answered Feb 13, 2013 at 12:17

AT_

2231 gold badge2 silver badges12 bronze badges

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

Comments

SonOfNun · Accepted Answer · 2012-12-10 23:57:42Z

1

This should work but you need to be sure the link is inside the DOM element which is the root of your app; ie (ng-app='my-app'). It's hard to tell without seeing the page markup.

answered Dec 10, 2012 at 23:57

SonOfNun

9577 silver badges11 bronze badges

2 Comments

Paul Sheldrake Over a year ago

I had a similar problem and adding the link worked. But if I go directly to the path or hit the refresh button I get a 404. Any ideas?

SonOfNun Over a year ago

Do you have html5mode enabled?

Toby Speight · Accepted Answer · 2016-06-01 07:48:48Z

0

The problem was solved by the asker:

I fixed the problem - actually I had the HTML of the next step of this tutorial and it was messing up with the app, mainly because it had binding with attribute that did not exist in the model yet.

answered Jun 1, 2016 at 7:48

community wiki

Toby Speight

1 Comment

Toby Speight Over a year ago

Asker added solution as edit to the question; I moved it here.

Collectives™ on Stack Overflow

AngularJS route not working

3 Answers 3

Comments

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related