Understanding what it takes to remove the hash # from angular routes

by

That’s expected. Here’s what happens when html5 is not turned on:

  • you enter the url http://localhost:8080/index.html#/main in the address bar
  • the browser makes a http request to localhost:8080/index.html and gets the html page as a response
  • the html page contains an angular application that is executed. The angular router parses the path after the hash (/main), and thus loads the associated view and controller

Now what happens when you enable html5 mode and load index.hml?

  • you enter the url http://localhost:8080/index.html in the address bar
  • the browser makes a http request to localhost:8080/index.html and gets the html page as a response
  • the html page contains an angular application that is executed. The angular router parses the path (/index.html), sees that it doesn’t match any route, and thus changes the location in the address bar to the default: /main, and then loads the associated view and controller. Changing the location in the address bar doesn’t make the browser do anything other than adding a new entry in its navigation history.

Now, what happens if you hit refresh, or directly enter http://localhost:8080/main in the address bar? Well in that case, you’re saying the browser: “please load the page at the url http://localhost:8080/main. So that’s what the browser does: it sends an HTTP request to http://localhost:8080/main. Since the server doesn’t have anything at this address, it sends back a 404.

Now how to make it work? It’s actually quite simple: you need to configure the server to send back the index.html page when it gets a request for the path /main (and for all the other paths of the angular application). That way, the browser will load the HTML page, the angular application it contains will be restarted, the angular router will parse the path (/main) from the URL, and it will thus load the view and the controller associated to that path.

More Related Contents:

  1. Reloading the page gives wrong GET request with AngularJS HTML5 mode
  2. $location / switching between html5 and hashbang mode / link rewriting
  3. angularjs 1.6.0 (latest now) routes not working
  4. The Advantages when we put AngularJS within Symfony web application
  5. How to dynamically change header based on AngularJS partial view?
  6. How to Display blob (.pdf) in an AngularJS app
  7. How to call a method defined in an AngularJS directive?
  8. How to execute AngularJS controller function on page load?
  9. How do I store data in local storage using Angularjs?
  10. Angularjs dynamic ng-pattern validation
  11. Is there a way to make AngularJS load partials in the beginning and not at when needed?
  12. Angular js init ng-model from default values
  13. What’s the most concise way to read query parameters in AngularJS?
  14. Implementing loading spinner using httpInterceptor and AngularJS 1.1.5
  15. Getting an error when using ng-controller in angularjs ver 1.3.0 [duplicate]
  16. How to get element by classname or id
  17. Dynamically set the value of ui-sref Angularjs
  18. How do you get AngularJS to bind to the title attribute of an A tag?
  19. Angular Js – set token on header default
  20. AngularJs ReferenceError: $http is not defined
  21. RegEx for no whitespace at the beginning and end
  22. Can you change templateUrl on the fly?
  23. angularjs move focus to next control on enter
  24. AngularJS – Get List of All Registered Services?
  25. What is `priority` of ng-repeat directive can you change it?
  26. What is ng-transclude?
  27. How to share data between two modules in AngularJS?
  28. AngularJS ng-model-options getter-setter
  29. When to use double braces {{}} in angularJS
  30. Angular reload current route and reload the current template

Leave a Comment