Question

我是AngularJS和ui-router的新手。我想删除URL中的hashtag（＃），并在实现它时遇到问题。

我已经做过的事，但它只显示空白页和许多错误：

在我的应用程序配置中添加了$locationProvider.html5Mode(true);
在我的头部标签中添加了<base href="/" />

请参见下面的屏幕截图和代码：

带有标签的URL： Image - before
应用上述步骤后： Image - after

代码：

var app = angular.module('app', ['ui.router']);

app.config(['$locationProvider', '$stateProvider', '$urlRouterProvider', function($locationProvider, $stateProvider, $urlRouterProvider) {
    $urlRouterProvider
    .otherwise('/home');
    
    $stateProvider
    .state('home',{
        url: '/home',
        templateUrl: 'views/home.html'
    })
    .state('about', {
        url:'/about',
        templateUrl: 'views/about.html'
    });
    
    $locationProvider.html5Mode(true);
}]);

<!DOCTYPE html>
<html lang="en" ng-app="app" ng-controller="mainController">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="icon" type="image/png" href="{{ favicon }}">
        <title>JKG</title>
        <!-- bootstrap -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
        <!-- angularjs -->
        <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.19/angular-ui-router.min.js"></script>
        <!-- main links -->
        <link rel="stylesheet" type="text/css" href="sass/main.css">
        <script src="js/app.js"></script>
        <script src="js/controller/mainController.js"></script>
        <base href="/" />
    </head>
    <body>
        <!--MAIN_CONTENT-->
        <main ui-view></main>
    </body>
</html>

有什么我想念的吗？有人可以帮我吗？先感谢您。

Answer 1

根据您使用的服务器，您可能需要为应用程序编写htacess规则

AngularJS UI路由器删除URL上的哈希

1 个答案: