location switching between html5 and hashbang mode link rewriting

Question

I was under the impression that Angular would rewrite URLs that appear in href attributes of anchor tags within tempaltes  such that they would work whether in html5 mode or hashbang mode  The documentation for the location service seems to say that HTML Link Rewriting takes care of the hashbang situation   I would thus expect that when not in HTML5 mode  hashes would be inserted  and in HTML5 mode  they would not   However  it seems that no rewriting is taking place   The following example does not allow me to just change the mode   All links in the application would need to be rewritten by hand  or derived from a variable at runtime   Am I required to manually rewrite all URLs depending on the mode   I don t see any client-side url rewriting going on in Angular 1 0 6  1 1 4 or 1 1 3   It seems that all href values need to be prepended with    for hashbang mode and   for html5 mode   Is there some configuration necessary to cause rewriting  Am I misreading the docs  Doing something else silly   Here s a small example       lt head gt       lt script src    cdnjs cloudflare com ajax libs angular js 1 1 3 angular js  gt  lt  script gt   lt  head gt    lt body gt       lt div ng-view gt  lt  div gt       lt script gt          angular module  sample                    config             routeProvider     locationProvider               function   routeProvider   locationProvider                       commenting out this line  switching to hashbang mode  breaks the app                   -- unless   is added to the templates                  locationProvider html5Mode true                     routeProvider when                            template   this is home  go to  lt a href   about   gt about lt  a gt                                        routeProvider when   about                         template   this is about  go to  lt a href      gt home lt  a                                                            run         lt  script gt   lt  body gt      Addendum  in re-reading my question  I see that I used the term  rewriting  without an abundance of clarity as to who and when I wanted to do the rewriting  The question is about how to get Angular to rewrite the URLs when it renders paths and how to get it to interpret paths in the JS code uniformly across the two modes   It is not about how to cause a web server to do HTML5-compatible rewriting of requests

User · Answer

Fur future readers  if you are using Angular 1 6  you also need to change the hashPrefix   appModule config    locationProvider   function  locationProvider         locationProvider html5Mode true        locationProvider hashPrefix             Don t forget to set the base in your HTML  lt head gt     lt head gt       lt base href     gt           lt  head gt    More info about the changelog here

User · Answer

This took me a while to figure out so this is how I got it working - Angular WebAPI ASP Routing without the   for SEO   add to Index html - base href      Add  locationProvider html5Mode true   to app config I needed a certain controller  which was in the home controller  to be ignored for uploading images so I added that rule to RouteConfig        routes MapRoute          name   Default2           url   Home                defaults  new   controller    Home   action    SaveImage            In Global asax add the following - making sure to ignore api and image upload paths let them function as normal otherwise reroute everything else    private const string ROOT DOCUMENT     Index html    protected void Application BeginRequest Object sender  EventArgs e        var path   Request Url AbsolutePath      var isApi   path StartsWith   api   StringComparison InvariantCultureIgnoreCase       var isImageUpload   path StartsWith   home   StringComparison InvariantCultureIgnoreCase        if  isApi    isImageUpload          return       string url   Request Url LocalPath      if   System IO File Exists Context Server MapPath url            Context RewritePath ROOT DOCUMENT      Make sure to use  location url   XXX   and not window location     to redirect Reference the CSS files with absolute path   and not   lt link href  app content bootstrapwc css  rel  stylesheet    gt    Final note - doing it this way gave me full control and I did not need to do anything to the web config   Hope this helps as this took me a while to figure out

User · Answer

The documentation is not very clear about AngularJS routing  It talks about Hashbang and HTML5 mode  In fact  AngularJS routing operates in three modes    Hashbang Mode HTML5 Mode Hashbang in HTML5 Mode   For each mode there is a a respective LocationUrl class  LocationHashbangUrl  LocationUrl and LocationHashbangInHTML5Url    In order to simulate URL rewriting you must actually set html5mode to true and decorate the  sniffer class as follows    provide decorator   sniffer   function  delegate       delegate history   false    return  delegate        I will now explain this in more detail   Hashbang Mode  Configuration    routeProvider    when   path         templateUrl   path html        locationProvider    html5Mode false     hashPrefix         This is the case when you need to use URLs with hashes in your HTML files such as in   lt a href  index html   path  gt link lt  a gt    In the Browser you must use the following Link  http   www example com base index html   base path  As you can see in pure Hashbang mode all links in the HTML files must begin with the base such as  index html      HTML5 Mode  Configuration    routeProvider    when   path         templateUrl   path html          locationProvider    html5Mode true     You should set the base in HTML-file   lt html gt     lt head gt       lt base href     gt     lt  head gt   lt  html gt    In this mode you can use links without the   in HTML files   lt a href   path  gt link lt  a gt    Link in Browser   http   www example com base path   Hashbang in HTML5 Mode  This mode is activated when we actually use HTML5 mode but in an incompatible browser  We can simulate this mode in a compatible browser by decorating the  sniffer service and setting history to false   Configuration    provide decorator   sniffer   function  delegate       delegate history   false    return  delegate       routeProvider    when   path         templateUrl   path html          locationProvider    html5Mode true     hashPrefix         Set the base in HTML-file    lt html gt     lt head gt       lt base href     gt     lt  head gt   lt  html gt    In this case the links can also be written without the hash in the HTML file   lt a href   path  gt link lt  a gt    Link in Browser   http   www example com index html   base path

User · Answer

I wanted to be able to access my application with the HTML5 mode and a fixed token and then switch to the hashbang method  to keep the token so the user can refresh his page    URL for accessing my app   http   myapp com amazing url token super token  Then when the user loads the page   http   myapp com amazing url token super token  amazing url  Then when the user navigates   http   myapp com amazing url token super token  another url  With this I keep the token in the URL and keep the state when the user is browsing  I lost a bit of visibility of the URL  but there is no perfect way of doing it   So don t enable the HTML5 mode and then add this controller    config   stateProvider - gt       stateProvider state  home-loading              url                controller   homeController          controller  homeController     state   location - gt      if window location pathname                 location url window location pathname window location search  replace       else          state go  home         location   replace

[angularjs] $location / switching between html5 and hashbang mode / link rewriting

Examples related to angularjs

Examples related to angular-routing