AngularJS: 如何从 URL 中删除#!/（bang 前缀）？

Question

我已经完成了 $locationProvider.html5Mode(true); 但它不起作用。每当我访问 http://example.com 时，它都会转到 http://example.com/#!/。代码在这里：

var myApp = angular.module('myApp', ['ui.router', 'ui.bootstrap']);

myApp.config(['$qProvider', function ($qProvider) {
    $qProvider.errorOnUnhandledRejections(false);
}]);

myApp.config(function($stateProvider, $urlRouterProvider,$locationProvider) {
    // For any unmatched url, redirect to EXTRANET home page
    $urlRouterProvider.otherwise('/');
    // Now set up the states
    $stateProvider
    .state('listrole', {
    url: "/list-role",
    views: {
      'main-content': {
        templateUrl: rootUrl+ 'views/main.html',
        controller: 'rolesCtrl'
      }
    }
    })
    $locationProvider.hashPrefix('');
    $locationProvider.html5Mode(true);
});

更新我也添加了 $locationProvider.hashPrefix(''); 但没有区别。另外让我告诉你，我在地址栏中输入地址并按下回车键。我做得对吗？浏览器如何发现它不需要从服务器刷新？

更新 #2

理想情况下，我希望 URL 为 http://example.com，http://example.com/#!/list-role 为 http://example.com/list-role。现在 http://example.com/list-role 给出 404

更新 #3

我正在使用 nginx 代理，如果有帮助的话。

更新 #4

已删除缓存。现在我可以看到 http://example.com 而不是 http://example.com/#! 但 http://example.com/list-role 仍然给出 404

Answer 1

如果您在 .NET 堆栈中使用 AngularJS 的 MVC，这是从 url 中删除“#”所必须执行的操作：

1.Set 在您的 _Layout 页面中添加您的基本 href：

 <head> <base href="/"> </head>

2.Then，在您的 angular 应用配置中添加以下内容：

$locationProvider.html5Mode(true)
$locationProvider.hashPrefix("!");

Answer 2

$locationProvider.hashPrefix('');

请检查这个问题：

Answer 3

下面的代码将删除 URL

中的感叹号 (!)

$locationProvider.hashPrefix('');

否则转到

对我有用

Answer 4

如果要删除此前缀，请将此代码添加到您的配置中：

appModule.config(['$locationProvider', function($locationProvider) {
  $locationProvider.hashPrefix('');
}]);

Source here 了解更多信息。

更新

如果你想删除整个前缀（# 而不仅仅是 !），你可以尝试 this solution:

1) 激活 HTML5 模式并删除模块配置中的前缀 !

$locationProvider.html5Mode(true);
$locationProvider.hashPrefix('');

2) 然后在 index.html

上的 <head> 中将基数设置为 /

<head>
    ...
    <base href="/">
</head>

Answer 5

添加到您的 html 文件 <head> <base href="/foldername/"> </head>

这是给你的 app.js $locationProvider.html5Mode(true);

这是为了 .htaccess 创建文件，如果你没有。

RewriteEngine On 
# If an existing asset or directory is requested go to it as it is
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d  
RewriteRule ^ - [L]
RewriteRule ^ /foldername/

Answer 6

将以下内容添加到 app.js

app.config(['$locationProvider', function($locationProvider) {

  $locationProvider.hashPrefix('');

}]);

AngularJS: 如何从 URL 中删除#!/（bang 前缀）？

AngularJS: How to remove #!/ (bang prefix) from URL?

routing

angularjs

angular-ui-router

angularjs-1.6

更新