AngularJS routing without the hash '#'

2018-12-31 04:57发布

站内问答 / JavaScript
1669 11 6

I'm learning AngularJS and there's one thing that really annoys me.

I use $routeProvider to declare routing rules for my application:

$routeProvider.when('/test', {
  controller: TestCtrl,
  templateUrl: 'views/test.html'
})
.otherwise({ redirectTo: '/test' });

but when I navigate to my app in browser I see app/#/test instead of app/test.

So my question is why AngularJS adds this hash # to urls? Is there any possibility to avoid it?

11条回答
宁负流年不负卿
2楼-- · 2018-12-31 05:08

In fact you need the # (hashtag) for non HTML5 browsers.

Otherwise they will just do an HTTP call to the server at the mentioned href. The # is an old browser shortcircuit which doesn't fire the request, which allows many js frameworks to build their own clientside rerouting on top of that.

You can use $locationProvider.html5Mode(true) to tell angular to use HTML5 strategy if available.

Here the list of browser that support HTML5 strategy: http://caniuse.com/#feat=history

查看更多
0人赞 添加讨论(0) 举报
梦醉为红颜
3楼-- · 2018-12-31 05:09

Lets write answer that looks simple and short

In Router at end add html5Mode(true);

app.config(function($routeProvider,$locationProvider) {

    $routeProvider.when('/home', {
        templateUrl:'/html/home.html'
    });

    $locationProvider.html5Mode(true);
})

In html head add base tag

<html>
<head>
    <meta charset="utf-8">    
    <base href="/">
</head>

thanks To @plus- for detailing the above answer

查看更多
0人赞 添加讨论(0) 举报
怪性笑人.
4楼-- · 2018-12-31 05:13

You could also use the below code to redirect to the main page (home):

{ path: '', redirectTo: 'home', pathMatch: 'full'}

After specifying your redirect as above, you can redirect the other pages, for example:

{ path: 'add-new-registration', component: AddNewRegistrationComponent},
{ path: 'view-registration', component: ViewRegistrationComponent},
{ path: 'home', component: HomeComponent}
查看更多
0人赞 添加讨论(0) 举报
大哥的爱人
5楼-- · 2018-12-31 05:14

In Angular 6, with your router you can use:

RouterModule.forRoot(routes, { useHash: false })
查看更多
0人赞 添加讨论(0) 举报
栀子花@的思念
6楼-- · 2018-12-31 05:20

If you enabled html5mode as others have said, and create an .htaccess file with the following contents (adjust for your needs):

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]

Users will be directed to the your app when they enter a proper route, and your app will read the route and bring them to the correct "page" within it.

EDIT: Just make sure not to have any file or directory names conflict with your routes.

查看更多
0人赞 添加讨论(0) 举报
大哥的爱人
7楼-- · 2018-12-31 05:25

**

It is recommended to use the HTML 5 style (PathLocationStrategy) as location strategy in Angular

** Because

  1. It produces the clean and SEO Friendly URLs that are easier for users to understand and remember.
  2. You can take advantage of the server-side rendering, which will make our application load faster, by rendering the pages in the server first before delivering it the client.

Use Hashlocationstrtegy only if you have to support the older browsers.

Click here to know more

查看更多
0人赞 添加讨论(0) 举报
1 2 下一页
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)