AngularJS 404 error

Question

I'm getting a 404 error in Chrome's console for one of my routes.

.config(['$routeProvider', function($routeProvider) {
  $routeProvider
  .when("/", {templateUrl: "home/autocomplete.html", controller: "TypeaheadCtrl"})
  .when("/search", {templateUrl: "search/search.html", controller: "TypeaheadCtrl"})
  ...
}

The first route ( / ) works fine. Why does the second route ( /search ) throw a 404 error?

This is the error Chrome gives me:

Failed to load resource: the server responded with a status of 404 (Not Found)

The url is: http://localhost:8000/app/ . Yet, both my templates are displaying. I don't understand why I would get a 404 error for that url and yet both my templates display?

Answer 1

This was actually very simple and solved it as I was putting the question together.

The error was caused by this bit of code

<a class="navbar-brand" href="#/">
  <img alt="Brand" src="...">
</a>

It was the ellipsis in the src attribute, once removed, everything works fine. Posted just in case someone else makes the same silly mistake.

Answer 2

Both the routes are pointing to the same controller.Is it desired behavior. else please change the controller of the search route to different controller to make it work.