AngularJs reload page instead only load view

Question

I have a simple app in AgularJS. I need to load view in route

$routeProvider.when('/articles/:url', {
  templateUrl: 'partials/article.html',
  controller: ArticleCtrl
});

But if i click on Page reloads and after reload Angular try to load partials/article.html view, but fails on error " NetworkError: 404 Not Found - http://localhost:3000/clanky/partials/article.html " I know that I can use "../partials/article.html" insted "partials/article.html", but I mean that isn't the core of problem.

There are my routes:

blog.config([
  '$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
    $locationProvider.html5Mode(true);
    $routeProvider.when('/', {
      templateUrl: 'partials/main.html',
      controller: MainCtrl
    });
    $routeProvider.when('/login', {
      templateUrl: 'partials/login.html',
      controller: LoginCtrl
    });
    $routeProvider.when('/backend', {
      templateUrl: 'partials/backend.html',
      controller: BackendCtrl
    });
    $routeProvider.when('/articles/:url', {
      templateUrl: 'partials/article.html',
      controller: ArticleCtrl
    });
    return $routeProvider.otherwise({
      redirectTo: '/'
    });
  }
]);

PS If I try go to the any other route, for example, login, it partialy works, but reload is still here.

Thanks for yours answers

Answer 1

seems that I've got the same problem as you.

I don't know how to handle this but I think that's because the page was reloaded .

When you are not setting the html5Mode to true , then will be # at the url, and if you reload the page, the # will track the information to the $scope to work with the htmlHistory api so that the app can work properly even with the page refresh.

But once you set the html5Mode to true , then there's no # to store any $scope information, and when the page reload, angular can not found the accordingly scope so it return 404 .

You can check $location section on angularjs guide , it has a section explaining why this happen.

Page reload navigation

The $location service allows you to change only the URL; it does not allow you to reload the page. When you need to change the URL and reload the page or navigate to a different page, please use a lower level API, $window.location.href.

Hope this can be helpful for you, and if you got any better answer, please let me know, I'm also waiting for the right way to solve it.

Answer 2

Start your templateUrl with a slash:

templateUrl: '/partials/article.html'

instead of

templateUrl: 'partials/article.html'