Yousuf Jawwad
Yousuf Jawwad

Reputation: 3097

$routeProvider not working in angular

this is my app.js

var cricketapp = angular.module('cricketapp', ['ngCookies']).
    config(['$routeProvider', function($routeProvider, $httpProvider, $cookies){
        $routeProvider.
            when('/', {
                templateUrl: '/partials/games-pending-entry.html',
                controller: HomeCtrl
            }).
            when('game/:gameId',{
                templateUrl: 'partials/shortlist.html',
                controller: ShortlistCtrl
            }).
            otherwise({redirectTo: '/'});
        //$httpProvider.defaults.headers.post['X-CSRFToken'] = $cookies.csrftoken;
    }]);

and controllers.js

function HomeCtrl($scope, $http){
    $http.get('/api/games-pending-entry').success(function(data){
        $scope.games_pending_entry = data;
    });
}

function ShortlistCtrl($scope, $http, $routeParams){
    $scope.gameId = $routeParams.gameId;
    $http.get('api/get-players').success(function(data){
        $scope.players = data;
    })
}

and in my html, i am calling the link as

<a class='btn btn-warning' href='#/game/{{ game.id }}'>Enter Shortlist</a>

when i click on this link, i am redirected back to /#/

where am i going wrong?

Upvotes: 2

Views: 3804

Answers (1)

Tiago Rold&#227;o
Tiago Rold&#227;o

Reputation: 10649

Your $routeProvider rules are wrong:

when('game/:gameId',{

should become

when('/game/:gameId',{

As the route isn't recognized, it redirects to '/'. Changing that will most likely solve the problem.

Also, you may find ngHref useful, to avoid having links broken, before the {{model}} bindings resolved: http://docs.angularjs.org/api/ng.directive:ngHref

Upvotes: 3

Related Questions