anonymous5671
anonymous5671

Reputation: 331

Angular JS routing not working

I am trying to route my page to another page once the controller is accessed but its not working. I can route the first two pages but the third one is not working. Can someone help me on this.

This is my routing code:

$routeProvider', function ($routeProvider) {
            $routeProvider.
                when('/category', {
                    //templateUrl : 'js/partials/course-list.html',
                    controller : 'CategoryController'
                }).
                when('/category/:categoryid', {
                    templateUrl : 'js/partials/film-list.html',
                    controller : 'MovieController'
                }).
                when('/actor/:filmid', {
                    templateUrl : 'js/partials/actor-list.html',
                    controller : 'ActorController'
                }).
                otherwise({
                    redirectTo : '/'
                });
        } 

Currently my ActorController is not working. Once i click on the movies it should show the actor of the films but in my case its not working

This is my partial html file for the movie-list.html

<section>
<h3>{{movieCount}}</h3>
<table>
    <tr data-ng-repeat="movie in movies" data-ng-click="selectFilm($event,movie)"  style="cursor: pointer;">
        <td>{{movie.title}}</td>
    </tr>
    <strong>{{successMessage}}</strong>
</table>

And this is my controller code

).controller('ActorController', 
            [
                '$scope', 
                'dataService', 
                '$routeParams',

                function ($scope, dataService, $routeParams){
                    $scope.actors = [ ];
                    $scope.actorCount = 0;

                    var getActors = function (moviecode) {
                        dataService.getActors(moviecode).then(
                            function (response) {
                                $scope.actorCount = response.rowCount + ' actors';
                                $scope.actors = response.data;
                                $scope.showSuccessMessage = true;
                                $scope.successMessage = "Actor Success";
                            },
                            function (err){
                                $scope.status = 'Unable to load data ' + err;
                            }
                        );  // end of getStudents().then
                    };

                // only if there has been a courseid passed in do we bother trying to get the students
                if ($routeParams && $routeParams.filmid) {
                    console.log($routeParams.filmid);
                    getActors($routeParams.filmid);
                }

                }
            ]
        )

This is the selectFilm() code from the MovieController

$scope.selectedFilm = {};
                    $scope.selectFilm = function ($event,movie) {
                        $scope.selectedFilm = movie;
                        $location.path('/actor/' + movie.film_id); 
                    }

This is the movie controller code

).controller('MovieController', 
            [
                '$scope', 
                'dataService', 
                '$routeParams',
                '$location',

                function ($scope, dataService, $routeParams, $location){
                    $scope.movies = [ ];
                    $scope.movieCount = 0;

                    var getMovies = function (moviecode) {
                        dataService.getMovies(moviecode).then(
                            function (response) {
                                $scope.movieCount = response.rowCount + ' movies';
                                $scope.movies = response.data;
                                $scope.showSuccessMessage = true;
                                $scope.successMessage = "Movies Success";
                            },
                            function (err){
                                $scope.status = 'Unable to load data ' + err;
                            }
                        );  // end of getStudents().then
                    };
                    $scope.selectedFilm = {};
                    $scope.selectFilm = function ($event,movie) {
                        $scope.selectedFilm = movie;
                        $location.path('/actor/' + movie.film_id); 
                        // $window.location.href = '/actor/' + movie.film_id
                        console.log(movie.film_id);

                    }

                // only if there has been a courseid passed in do we bother trying to get the students
                if ($routeParams && $routeParams.categoryid) {
                    console.log($routeParams.categoryid);
                    getMovies($routeParams.categoryid);
                }

                }
            ]
        )

Upvotes: 1

Views: 118

Answers (1)

anonymous5671
anonymous5671

Reputation: 331

I solved the problem by myself wher first of all the $location variable was not defined in the function and later on the movie object dont have the film_id so I had to readjust my SQL query to make it work. After changing the SQL query i can route my page now.

Upvotes: 1

Related Questions