Here's my problem : for some reason, on valid links, Angular can't find what I'm looking for and return the 404. Here's the route configuration :

  $routeProvider.when('/', {templateUrl: 'partials/home.html'});
  $routeProvider.when('/home', {templateUrl: 'partials/home.html'});
  $routeProvider.when('/menus', {templateUrl: 'partials/menus.html'});
  $routeProvider.when('/menu/:menuId', {templateUrl: 'partials/menu.html', controller: 'ShowMenuCtrl'});
  $routeProvider.when('/products', {templateUrl: 'partials/products.html'});
  $routeProvider.when('/product/:productId', {templateUrl: 'partials/product.html', controller: 'ShowProductCtrl'});
  $routeProvider.when('/drink/:productId', {templateUrl: 'partials/product.html', controller: 'ShowProductCtrl'});
  $routeProvider.when('/drinks', {templateUrl: 'partials/drinks.html'});
  $routeProvider.when('/order', {templateUrl: 'partials/order.html'});
  $routeProvider.when('/404', {templateUrl: 'partials/404.html'});
  $routeProvider.otherwise({redirectTo: '/404'});

For example : a link ( such as <a href="#/menu/{[{menu.id}]}" translate >SEE</a>) pointing to /menu/45122245, will work when I'm on /menus/ view, but not on /home/ (and return the 404).

Same URL is used, same object with same ID, so I don't know what is going on. I don't know if any other code could help you, let me know what you need :)

Here's my problem : for some reason, on valid links, Angular can't find what I'm looking for and return the 404. Here's the route configuration :

  $routeProvider.when('/', {templateUrl: 'partials/home.html'});
  $routeProvider.when('/home', {templateUrl: 'partials/home.html'});
  $routeProvider.when('/menus', {templateUrl: 'partials/menus.html'});
  $routeProvider.when('/menu/:menuId', {templateUrl: 'partials/menu.html', controller: 'ShowMenuCtrl'});
  $routeProvider.when('/products', {templateUrl: 'partials/products.html'});
  $routeProvider.when('/product/:productId', {templateUrl: 'partials/product.html', controller: 'ShowProductCtrl'});
  $routeProvider.when('/drink/:productId', {templateUrl: 'partials/product.html', controller: 'ShowProductCtrl'});
  $routeProvider.when('/drinks', {templateUrl: 'partials/drinks.html'});
  $routeProvider.when('/order', {templateUrl: 'partials/order.html'});
  $routeProvider.when('/404', {templateUrl: 'partials/404.html'});
  $routeProvider.otherwise({redirectTo: '/404'});

For example : a link ( such as <a href="#/menu/{[{menu.id}]}" translate >SEE</a>) pointing to /menu/45122245, will work when I'm on /menus/ view, but not on /home/ (and return the 404).

Same URL is used, same object with same ID, so I don't know what is going on. I don't know if any other code could help you, let me know what you need :)

• javascript
• angularjs

• 1 Try adding absolute URLs to your question. There's is a big difference if you are in /#/menu or you are in /menu when activating a link. – Nikola Radosavljević Commented May 20, 2014 at 10:35
• Same thing, it returns the 404. That's really weird... /product/4578754 (for exemple) should at least display the correct template, right ? – enguerranws Commented May 20, 2014 at 14:31
• Can you isolate the bug in a fiddle ot plunkr? – Braulio Commented May 22, 2014 at 18:16
• Well, that seems to work know... And I don't actually know why : I guess the issue came from wrong ID for :productId / :menuId, so it returned the 404... – enguerranws Commented May 23, 2014 at 9:42
• Did it work? Did you got a chance to make it fail in a plunkr or fiddle? – Braulio Commented May 26, 2014 at 10:57

2 Answers 2

May be I am too late to reply to this post, but nevertheless I believe the following solution should do the trick,

angular.module('moduleName')
..config(['$pileProvider', '$routeProvider', function ($pileProvider, $routeProvider) {
 $routeProvider.when('/', {templateUrl: 'partials/home.html'});
  $routeProvider.when('/home', {templateUrl: 'partials/home.html'});
  $routeProvider.when('/menus', {templateUrl: 'partials/menus.html'});
  $routeProvider.when('/menu/:menuId', {templateUrl: 'partials/menu.html', controller: 'ShowMenuCtrl'});
  $routeProvider.when('/products', {templateUrl: 'partials/products.html'});
  $routeProvider.when('/product/:productId', {templateUrl: 'partials/product.html', controller: 'ShowProductCtrl'});
  $routeProvider.when('/drink/:productId', {templateUrl: 'partials/product.html', controller: 'ShowProductCtrl'});
  $routeProvider.when('/drinks', {templateUrl: 'partials/drinks.html'});
  $routeProvider.when('/order', {templateUrl: 'partials/order.html'});
  $routeProvider.when('/404', {templateUrl: 'partials/404.html'});
  $routeProvider.otherwise({redirectTo: '/404'});
}])

.run(['$location', function ($location) {
    if ($location.path() === '' && $location.$$absUrl.indexOf('/partials') > -1) {
        $location.path('/home')
    }
}]);

Angular requires you to specify the url base in the head of your main html file () unless html5Mode.requireBase is set to false in the html5Mode definition object passed to $locationProvider.html5Mode(). With that, relative urls will always be resolved to this base url, even if the initial url of the document was different.