angularjs - $location / switching between html5 and hashbang mode / link rewriting -
i under impression angular rewrite urls appear in href attributes of anchor tags within tempaltes, such work whether in html5 mode or hashbang mode. documentation location service seems html link rewriting takes care of hashbang situation. expect when not in html5 mode, hashes inserted, , in html5 mode, not.
however, seems no rewriting taking place. following example not allow me change mode. links in application need rewritten hand (or derived variable @ runtime. required manually rewrite urls depending on mode?
i don't see client-side url rewriting going on in angular 1.0.6, 1.1.4 or 1.1.3. seems href values need prepended #/ hashbang mode , / html5 mode.
is there configuration necessary cause rewriting? misreading docs? doing else silly?
here's small example:
<head> <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.3/angular.js"></script> </head> <body> <div ng-view></div> <script> angular.module('sample', []) .config( ['$routeprovider', '$locationprovider', function ($routeprovider, $locationprovider) { //commenting out line (switching hashbang mode) breaks app //-- unless # added templates $locationprovider.html5mode(true); $routeprovider.when('/', { template: 'this home. go <a href="/about"/>about</a>' }); $routeprovider.when('/about', { template: 'this about. go <a href="/"/>home</a' }); } ]) .run(); </script> </body> addendum: in re-reading question, see used term "rewriting" without abundance of clarity , when wanted rewriting. question how angular rewrite urls when renders paths , how interpret paths in js code uniformly across 2 modes. not how cause web server html5-compatible rewriting of requests.
the documentation not clear angularjs routing. talks hashbang , html5 mode. in fact, angularjs routing operates in 3 modes:
- hashbang mode
- html5 mode
- hashbang in html5 mode
for each mode there a respective locationurl class (locationhashbangurl, locationurl , locationhashbanginhtml5url).
in order simulate url rewriting must set html5mode true , decorate $sniffer class follows:
$provide.decorator('$sniffer', function($delegate) { $delegate.history = false; return $delegate; }); i explain in more detail:
hashbang mode
configuration:
$routeprovider .when('/path', { templateurl: 'path.html', }); $locationprovider .html5mode(false) .hashprefix('!'); this case when need use urls hashes in html files such in
<a href="index.html#!/path">link</a> in browser must use following link: http://www.example.com/base/index.html#!/base/path
as can see in pure hashbang mode links in html files must begin base such "index.html#!".
html5 mode
configuration:
$routeprovider .when('/path', { templateurl: 'path.html', }); $locationprovider .html5mode(true); you should set base in html-file
<html> <head> <base href="/"> </head> </html> in mode can use links without # in html files
<a href="/path">link</a> link in browser:
http://www.example.com/base/path hashbang in html5 mode
this mode activated when use html5 mode in incompatible browser. can simulate mode in compatible browser decorating $sniffer service , setting history false.
configuration:
$provide.decorator('$sniffer', function($delegate) { $delegate.history = false; return $delegate; }); $routeprovider .when('/path', { templateurl: 'path.html', }); $locationprovider .html5mode(true) .hashprefix('!'); set base in html-file:
<html> <head> <base href="/"> </head> </html> in case links can written without hash in html file
<a href="/path">link</a> link in browser:
http://www.example.com/index.html#!/base/path
Comments
Post a Comment