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.

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