在路由中有.run时，从Angularjs中的url中删除#
在路由中有.run时，从Angularjs中的url中删除#
提问于 2015-11-30 19:27:40
这是我在AngularJS中的app.js路由文件
var app = angular.module('myApp', ['ngRoute', 'ngAnimate', 'toaster']);
app.config(['$routeProvider',
function ($routeProvider) {
$routeProvider.
when('/login', {
title: 'Login',
templateUrl: 'resources/views/layouts/loginUser.php',
controller: 'authCtrl'
})
.when('/', {
title: 'Login',
templateUrl: 'resources/views/layout/login.php',
controller: 'logoutCtrl'
})
.when('/reset', {
title: 'Reset Password',
templateUrl: 'resources/views/layouts/forgetPassword.php',
controller: 'authCtrl'
})
.when('/invalidtoken', {
title: 'Login',
templateUrl: 'resources/views/layout/invalidtoken.php',
controller: 'authCtrl',
role: '0'
})
//$locationProvider.html5Mode(true);
}])
.run(function ($rootScope, $location, Data, $http) {
$rootScope.$on("$routeChangeStart", function (event, next, current) {
var nextUrl = next.$$route.originalPath;
if (nextUrl == '/signin' || nextUrl == '/login' || nextUrl == '/verify' || nextUrl == '/register' || nextUrl == '/registered' || nextUrl == '/reset' || nextUrl == '/resetdone' || nextUrl == '/registersuccess')
{
$location.path(nextUrl);
}
else
{
$location.path('/');
}
});
});在这里，我使用.run处理一些请求。
我想从url中删除#以使url更美观，
因此，我这样做是为了按照建议删除# here
app.config(['$routeProvider', '$locationProvider'
function ($routeProvider, $locationProvider) {在最后一行
$locationProvider.html5Mode(true);但是应用程序没有发生任何变化，它仍然在url中有#。
甚至我也试过this的方式
我如何才能做到这一点？
更新:
如果我这样做了
.run(function ($rootScope, $location, Data, $http, $locationProvider) {在最后一行
$locationProvider.html5Mode(true);我得到了这个错误
Error: $injector:unpr
Unknown Provider我试过很多方法，但都不管用。
更新2 :
或者谁能建议一个angularjs示例的链接，它提供了url中没有#的示例？
回答 7
Stack Overflow用户
发布于 2015-12-08 12:33:46
为什么要使用.run()？将<base href="/" />添加到您的<head>或body的开头(第一行)，然后为了匹配您的.run()的逻辑，尝试这样( .otherwise("/path")到您的$routeProvider)：
var app = angular.module('myApp', ['ngRoute', 'ngAnimate', 'toaster']);
app.config(['$routeProvider', '$locationProvider',
function ($routeProvider, $locationProvider) {
$routeProvider.
when('/login', {
title: 'Login',
templateUrl: 'resources/views/layouts/loginUser.php',
controller: 'authCtrl'
})
.when('/', {
title: 'Login',
templateUrl: 'resources/views/layout/login.php',
controller: 'logoutCtrl'
})
.when('/reset', {
title: 'Reset Password',
templateUrl: 'resources/views/layouts/forgetPassword.php',
controller: 'authCtrl'
})
.when('/invalidtoken', {
title: 'Login',
templateUrl: 'resources/views/layout/invalidtoken.php',
controller: 'authCtrl',
role: '0'
})
. otherwise("/");
$locationProvider.html5Mode(true);
}]);如果您仍然面临问题，我建议您使用https://github.com/angular-ui/ui-router
更新：
你的index.html
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Green Hopping</title>
<link rel="shotcut icon" type="favicon.ico" href="public/images/favicon.ico" />
<link rel="icon" type="favicon.ico" href="public/images/favicon.ico" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
<script src="https://code.angularjs.org/1.4.2/angular-route.min.js"></script>
</head>
<body ng-cloak="">
<base href="/">
<div data-ng-view="" id="ng-view" class="slide-animation"></div>
</body>
<script>
var app = angular.module('myApp', ['ngRoute']);
app.config(['$routeProvider', '$locationProvider',
function ($routeProvider, $locationProvider) {
$routeProvider.
when('/', {
title: 'Home',
templateUrl: 'home.html',
controller: 'homeCtrl'
})
.when('/login', {
title: 'Login',
templateUrl: 'login.html',
controller: 'authCtrl'
})
.when('/logout', {
title: 'Logout',
templateUrl: 'logout.html',
controller: 'logoutCtrl'
})
.when('/dashboard', {
title: 'Dashboard',
templateUrl: 'dashboard.html',
controller: 'dashboardCtrl'
})
.otherwise('/');
$locationProvider.html5Mode(true);
}])
.run(function ($rootScope, $location, $http, loginSrv) {
$rootScope.$on("$routeChangeStart", function (event, next, current) {
var nextUrl = next.$$route.originalPath;
var orUseUrl = $location.path();
console.log(nextUrl);
if (nextUrl === '/logout'){loginSrv.logout();}
if (nextUrl === '/login'){loginSrv.login();}
if (loginSrv.loggedin === false) { $location.path('/'); }
else { $location.path(nextUrl); }
});
});
app.service("loginSrv",function(){
var ls= this;
ls.loggedin = false;
ls.logout = function(){
ls.loggedin = false;
}
ls.login = function(){
ls.loggedin = true;
}
});
app.controller("homeCtrl",function($scope, loginSrv){
$scope.loggedin = loginSrv.loggedin;
})
app.controller("dashboardCtrl",function($scope, loginSrv){
$scope.loggedin = loginSrv.loggedin;
})
app.controller("authCtrl",function($scope, loginSrv){
$scope.loggedin = loginSrv.loggedin;
})
app.controller("logoutCtrl",function($scope, loginSrv){
$scope.loggedin = loginSrv.loggedin;
})
</script>
</html>所有其他模板都是这样的。为home.html、login.html、dashboard.html、logout.html复制粘贴以下内容。Plunker将无法显示客户端的路由问题。尝尝这个。这完全是函数式代码。
<div>
<div><a href="/">Home</a> |
<a href="/login">Login</a> |
<a href="/dashboard">Dashboard</a> |
<a href="/logout">Logout</a></div>
<div> This is from the home/login/dashboard/logout Controller. Loggedin: {{loggedin}}</div>
</div>Stack Overflow用户
发布于 2015-12-08 19:32:26
尝试更改：
$locationProvider.html5Mode(true);至：
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});Stack Overflow用户
发布于 2015-12-05 15:26:29
您是否碰巧收到了404错误？无论何时将模式更改为html5history，您都必须告诉web服务器始终返回索引页，无论请求的是什么URL。正如angular文档所说：https://docs.angularjs.org/guide/$location
使用这种模式的
需要在服务器端重写URL，基本上你必须重写所有指向应用程序入口点的链接(例如index.html)。对于这种情况，需要
<base>标签也很重要，因为它允许Angular区分url中作为应用程序基础的部分和应该由应用程序处理的路径。
您是否尝试过这样做并对其进行了正确的配置？还要记住，您必须指定应用程序的基本条目href，它的工作方式如下所示
<base href="/" />页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/33997547
复制相关文章
相似问题
腾讯云开发者
