AngularJS:如何从URL中删除#!/(bang前缀)?

时间:2017-01-04 09:50:42

标签: angularjs routing angular-ui-router angularjs-1.6

我已经完成了$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

理想情况下,我希望网址为http://example.comhttp://example.com/#!/list-rolehttp://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

6 个答案:

答案 0 :(得分:19)

如果要删除此前缀,请将此代码添加到配置中:

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>

答案 1 :(得分:0)

如果您使用AngularJS与MVC进行.NET堆栈,那么您需要从URL中删除“#”:

1.在_Layout页面中设置基本href:

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

2.然后,在角度应用配置中添加以下内容:

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

答案 2 :(得分:0)

以下代码将删除网址中的感叹号(!)标记

$locationProvider.hashPrefix('');

或者转到Routing issue with AngularJS project using yeoman setup

它对我有用

答案 3 :(得分:0)

添加到您的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/

答案 4 :(得分:0)

将以下内容添加到app.js

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

  $locationProvider.hashPrefix('');

}]);

答案 5 :(得分:-1)

$locationProvider.hashPrefix('');

请检查此问题:AngularJS ui-router application has /#!/ in the URL