如何在AngularJS中从URL中删除“#”

3

我的网址:eDemo/admin/test/list/#/list

我想要的是:eDemo/admin/test/list

js:

var serviceBase ="http://admin-pc/eDemo/admin/test/";
function config($routeProvider, $locationProvider) {

    $routeProvider
        .when('/add', {
            controller: 'addController',
            templateUrl: serviceBase + 'add',
            controllerAs: 'vm',
        })
        .when('/edit', {
            controller: 'editController',
            templateUrl: serviceBase + 'edit',
            controllerAs: 'vm',
        })


        .otherwise({ redirectTo : 'list' });
}

html:

<div class='ng-view'></div>

4
https://scotch.io/tutorials/pretty-urls-in-angularjs-removing-the-hashtag - Deep Kakkar
1
@DeepKakkar,你最好复制链接代码的主要部分并在答案部分发布。这将消除对该链接的依赖,并且问题将在此处得到解答。 - Moumit
3个回答

2

您只需要在路由提供程序配置中添加html5Mode(true)即可。

确保您将参数$locationProvider作为config函数的参数传递。

以下是示例JS代码:

var serviceBase ="http://admin-pc/eDemo/admin/test/";
app.config(['$routeProvider','$locationProvider',
     function ($routeProvider,$locationProvider) {

    $routeProvider
        .when('/add', {
            controller: 'addController',
            templateUrl: serviceBase + 'add',
            controllerAs: 'vm',
        })
        .when('/edit', {
            controller: 'editController',
            templateUrl: serviceBase + 'edit',
            controllerAs: 'vm',
        })


        .otherwise({ redirectTo : 'list' });

         $locationProvider.html5Mode(true);

}

而您的HTML应该如下所示:

<div class='ng-view'>
 <base href="<?=url('/').'/'?>">
</div>

请记住,无论何时都不要在任何类型的URL中传递#,例如重定向、通过AJAX提交表单或其他任何地方。


1
在路由的结尾处使用:

 $locationProvider.html5Mode(true);

这应该是:


var serviceBase ="http://admin-pc/eDemo/admin/test/";
function config($routeProvider, $locationProvider) {

$routeProvider
    .when('/add', {
        controller: 'addController',
        templateUrl: serviceBase + 'add',
        controllerAs: 'vm',
    })
    .when('/edit', {
        controller: 'editController',
        templateUrl: serviceBase + 'edit',
        controllerAs: 'vm',
    })
    $locationProvider.html5Mode(true);

    }

在视图文件中:
<head>
    <meta charset="utf-8">

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

1
你可以像这样使用 $locationProvider。
$locationProvider.html5Mode({
  enabled: true,
  requireBase: false
});

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接