$routeProvider not redirecting

Question

I have config() like this.

function config($httpProvider, $routeProvider) {

$httpProvider.interceptors.push('httpInterceptorService');

$routeProvider
  .when('/detail/:id', {
    controller: 'CourseDetailController',
    controllerAs: 'vm',
    templateUrl: 'templates/course-detail.html'
  })
.otherwise({
    redirectTo: '/'
  });
}

View

<a class="course--module course--link" href="/#/detail/{{ course._id   }}">

when course is clicked URL is encoded like below and no routing seems to be happening.

http://localhost:5000/#!/#%2Fdetail%2F57029ed4795118be119cc43d

I tried

1. Removed /# from href = "/#/detail/{{ course._id }}", but this time URL becomes http://localhost:5000/detail/57029ed4795118be119cc43d and not picked up angular router and making a server request instead.

2. Manually visited URL in the address bar http://localhost:5000/#!/detail/F57029ed4795118be119cc43d without encoded character and this time view is changed correctly.

Any idea?.

Answer 1

Do this in your config,

function config($httpProvider, $routeProvider, $locationProvider) {
    $locationProvider.hashPrefix('');

And try using ng-href

<a class="course--module course--link" ng-href="/#/detail/{{ course._id   }}">

OR

Just add a ! after your # in href

<a class="course--module course--link" ng-href="/#!/detail/{{ course._id   }}">

Answer 2

You need to use the browser level API, with the object window, or you can inject the $window reference in your controller.

• window.location.href="http://www.google.com";
• $window.location.href="http://www.google.com";