404 when redirecting to page with url parameter using AngularJS

Question

So I'm trying to get to the info page for a serie by redirecting to "http://www.test.com/serie/2" for example.

I use Angular routing and previously had an issue with getting a 404 when I reloaded the page. This now seems to work, but now it gives one redirecting to the serie page. Here is my code so far.

Home view:

<div class="col col-md-10">
    <div class="col col-md-3" ng-repeat="serie in series | limitTo: 10">
        <serie-card
            id="serie.id"
            name="serie.name"
            genres="serie.genres"
            img="serie.image.medium"
            lang="serie.language"
            rating="serie.rating"
            status="serie.status"
            ng-click="openSerie(serie)">
        </serie-card>
    </div>
</div>

The controller for the serie-card directive:

app.controller('serieCardController', ['$scope', '$location',  function($scope, $location){
    $scope.openSerie = function(id){
        var url = rootUrl+"/serie/" + id;
        window.location = url;
    }
}]);

My app.js file

app.config(['$routeProvider', '$locationProvider',
    function($routeProvider, $locationProvider) {
            $routeProvider.
            when('/home', {
                templateUrl: 'templates/home.php',
                controller: 'homeController'
            }).
            when('/serie/:id',{
                templateUrl: 'templates/serie.php',
                controller: 'serieInfoController'
            }).
            when('/login',{
                templateUrl: 'templates/login.php',
                controller: 'loginController'
            }).
            otherwise({
                redirectTo: '/home'
            });

            $locationProvider.html5Mode(true);
}]);

I don't know if it helps anything but also added a .htaccess to remove the url page extention.

RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^([^\.]+)$ $1.php [NC,L]

ErrorDocument 404 /error.php

I hope someone can help me with this issue, since I couldn't find any answers anywhere else.

Sajal · Accepted Answer · 2016-06-02 07:34:18Z

1

You have passed the whole serie object in ng-click but expecting an id in the controller. Probably need to change that to

ng-click="openSerie(serie.id)"

An alternative for routing the location to new route is better done use $location since the two routes are on the same base path.

Change window.location = url to $location.path("/serie/" + id).

answered Jun 2, 2016 at 7:34

Sajal

4,4111 gold badge22 silver badges41 bronze badges

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

4 Comments

Bas Pauw Over a year ago

I noticed the serie/id issue tried with only the id aswell. Also I tried to use $location.path, but it will give me a "$location.path is not a function" error, and I have $location injected.

Bas Pauw Over a year ago

Yes it does, it redirects me to a url like "www.test.com/serie/1" but that responds with a 404

Sajal Over a year ago

What does the url for home page look like? Make sure you are not missing a controller and view for route series/:id.

Bas Pauw Over a year ago

The home url looks like test.com/home, and I got a serie page just for testing which consists only of a h1 tag, the controller is also present.

Collectives™ on Stack Overflow

404 when redirecting to page with url parameter using AngularJS

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related