AngularJS ui-路由器删除 URL 上的哈希
AngularJS ui-router removing hash on URL
我是 AngularJS 和 ui-路由器的新手。我想删除 URL 中的主题标签 (#),但在实现时遇到了问题。
我已经做了 ff 但它只显示空白页和许多错误:
- 在我的应用程序配置中添加了
$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>
有什么我遗漏的吗?有人可以帮我吗?先感谢您。
根据您使用的服务器,您可能需要为应用程序编写 htaccess 规则
我是 AngularJS 和 ui-路由器的新手。我想删除 URL 中的主题标签 (#),但在实现时遇到了问题。
我已经做了 ff 但它只显示空白页和许多错误:
- 在我的应用程序配置中添加了
$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>
有什么我遗漏的吗?有人可以帮我吗?先感谢您。
根据您使用的服务器,您可能需要为应用程序编写 htaccess 规则