Angular Controller returns 404 on a Route Parameter

Question

I'm building my first web app with Node.js and AngularJs. My problem lies in this code here:

var app = angular.module('Martin', ['ngResource','ngRoute']);

app.config(['$routeProvider', function($routeProvider){
    $routeProvider
        .when('/', {
            templateUrl: 'partials/home.html',
            controller: 'PageCtrl'
        })
        .when('/etx/:id', {
            templateUrl: 'partials/page.html',
            controller: 'PageCtrl'
        });
}]);

app.controller('PageCtrl', ['$scope', '$resource', '$routeParams',
    function($scope, $resource, $routeParams){
        console.log('Got here');
        var Page = $resource('/api/pages/:id');
        Page.get({ id: $routeParams.id }, function(page){
            $scope.page = page;
        });
    }]);

From what I understand, if I were to request /etx/mypage, the function in PageCtrl should be run, but when I try to pull it up in a browser, I get a 404 error and nothing is printed to the console.

I tested it with the home page ('/'), and the controller works fine then.

which version of angular is this? unless you use `html5Mode`, the URL for that route is either `#/etx/mypage` or `#!/etx/mypage`, depending on the angular version. — Claies, Apr 20 '17 at 01:33
also, a 404 error implies that the server responded to the request, not angular, so you might have to verify that your server routes are correctly returning your angular app. — Claies, Apr 20 '17 at 01:35

score 0 · Accepted Answer · answered Oct 10 '17 at 02:46

As @Claies identified, the problem was I forgot the octothorpe (or hashtag if you want to be less cool) in the URL. So it should not be etc/mypage, but #/etc/mypage. This behavior is less than ideal in many cases (including mine), so I recommend disabling this with HTML5 mode for links.

Angular Controller returns 404 on a Route Parameter

1 Answers1