$location / switching between html5 and hashbang mode / link rewriting

前端 未结 4 1612
情深已故
情深已故 2020-11-22 01:49

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

4条回答
  •  悲哀的现实
    2020-11-22 02:35

    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

    link
    

    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

    
      
        
      
    
    

    In this mode you can use links without the # in HTML files

    link
    

    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:

    
      
        
      
    
    

    In this case the links can also be written without the hash in the HTML file

    link
    

    Link in Browser:

    http://www.example.com/index.html#!/base/path
    

提交回复
热议问题