Removing the fragment identifier from AngularJS urls (# symbol)

后端未结

关注

 14  2006

Happy的楠姐

Is it possible to remove the # symbol from angular.js URLs?

I still want to be able to use the browser\'s back button, etc, when I change the view and will update th

相关标签:

14条回答

滥情空心

2020-11-22 00:35
Just add $locationProvider In
```
.config(function ($routeProvider,$locationProvider)
```
and then add $locationProvider.hashPrefix(''); after
```
.otherwise({
        redirectTo: '/'
      });
```
That's it.
0 讨论(0)
发布评论:

提交评论
- 加载中...
醉梦人生

2020-11-22 00:36
According to the documentation. You can use:
```
$locationProvider.html5Mode(true).hashPrefix('!');
```
NB: If your browser does not support to HTML 5. Dont worry :D it have fallback to hashbang mode. So, you don't need to check with if(window.history && window.history.pushState){ ... } manually

For example: If you click: <a href="/other">Some URL</a>

In HTML5 Browser: angular will automatically redirect to example.com/other

In Not HTML5 Browser: angular will automatically redirect to example.com/#!/other
0 讨论(0)
发布评论:

提交评论
- 加载中...
长发绾君心

2020-11-22 00:39

Follow 2 steps-
1. First set the $locationProvider.html5Mode(true) in your app config file.
For eg -
angular.module('test', ['ui.router']) .config(function($stateProvider, $urlRouterProvider, $locationProvider) { $locationProvider.html5Mode(true); $urlRouterProvider.otherwise('/'); });

2.Second set the <base> inside your main page.
For eg ->
<base href="/">

The $location service will automatically fallback to the hash-part method for browsers that do not support the HTML5 History API.

0 讨论(0)
发布评论:

提交评论
- 加载中...

野趣味

2020-11-22 00:42

I write out a rule in web.config after $locationProvider.html5Mode(true) is set in app.js.

Hope, helps someone out.

  <system.webServer>
    <rewrite>
      <rules>
        <rule name="AngularJS" stopProcessing="true">
          <match url=".*" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
            <add input="{REQUEST_URI}" pattern="^/(api)" negate="true" />
          </conditions>
          <action type="Rewrite" url="/" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>

In my index.html I added this to <head>

<base href="/">

Don't forget to install url rewriter for iis on server.

Also if you use Web Api and IIS, this match url will not work out, as it will change your api calls. So add third input(third line of condition) and give out a pattern that will exclude calls from www.yourdomain.com/api

0 讨论(0)

无人共我

2020-11-22 00:43
You can tweak the html5mode but that is only functional for links included in html anchors of your page and how the url looks like in the browser address bar. Attempting to request a subpage without the hashtag (with or without html5mode) from anywhere outside the page will result in a 404 error. For example, the following CURL request will result in a page not found error, irrespective of html5mode:
```
$ curl http://foo.bar/phones
```
although the following will return the root/home page:
```
$ curl http://foo.bar/#/phones
```
The reason for this is that anything after the hashtag is stripped off before the request arrives at the server. So a request for http://foo.bar/#/portfolio arrives at the server as a request for http://foo.bar. The server will respond with a 200 OK response (presumably) for http://foo.bar and the agent/client will process the rest.

So in cases that you want to share a url with others, you have no option but to include the hashtag.
0 讨论(0)
发布评论:

提交评论
- 加载中...

长发绾君心

2020-11-22 00:46

My solution is create .htaccess and use #Sorian code.. without .htaccess I failed to remove #

RewriteEngine   On
RewriteBase     /
RewriteCond     %{REQUEST_URI} !^(/index\.php|/img|/js|/css|/robots\.txt|/favicon\.ico)
RewriteCond     %{REQUEST_FILENAME} !-f
RewriteCond     %{REQUEST_FILENAME} !-d
RewriteRule     ./index.html [L]

0 讨论(0)

1 2 3 下一页