在路由器中运行时，从Angularjs中删除＃
这里是我在AngularJS中的app.jspath文件
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漂亮，
所以我喜欢这个删除＃在这里build议
app.config(['$routeProvider', '$locationProvider' function ($routeProvider, $locationProvider) {
并在最后一行
$locationProvider.html5Mode(true);
但是，没有任何事情发生在应用程序，它仍然在＃中的URL。
即使我试过这种方式
我怎么能做到这一点？
更新：
如果我做
.run(function ($rootScope, $location, Data, $http, $locationProvider) {
并在最后一行
$locationProvider.html5Mode(true);
我得到这个错误
Error: $injector:unpr Unknown Provider
我尝试了很多方法，但都没有成功。
更新2：
或者任何人都可以提供一个没有＃在URL中提供示例的angularjs示例的链接？
你为什么要使用.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); }]);
如果你仍然面临问题，我build议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="publichttp://img.dovov.comfavicon.ico" /> <link rel="icon" type="favicon.ico" href="publichttp://img.dovov.comfavicon.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将无法为客户端显示路由问题。 尝试这个。 这是完全function的代码。
<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>
尝试改变：
$locationProvider.html5Mode(true);
至：
$locationProvider.html5Mode({ enabled: true, requireBase: false });
您不能在.run注入$locationProvider ，因为提供程序仅适用于.config
这个答案应该有帮助，但是你会有两个问题：
-
您需要在
$locationProvider.html5Mode(true)之前进行检查，因为它不适用于IE 10或更高版本。if(window.history && window.history.pushState){ $locationProvider.html5Mode(true); } -
这只会通过删除
#当用户input它的url，即如果用户input的app/#/login它将更改为app/login。 但是，如果用户书签或复制更改后的urlapp/login并将其input到浏览器中，则由于服务器不知道angular路由，因为它仅在客户端。 在我上面链接的线程中，您可能会发现一些关于如何解决这个问题的意见。
问题是缺less服务注入。 所以在configuration节尝试注入像下面的$ locationProvider。
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' }) $locationProvider.html5Mode(true); }])
你偶然会收到404错误？ 无论何时将模式更改为html5history，都必须通知Web服务器始终返回索引页面，而不pipe请求的URL是什么。 正如angular文件在这里所说： https : //docs.angularjs.org/guide/ $ location
使用这种模式需要在服务器端重写URL，基本上你必须重写所有的链接到你的应用程序的入口点（例如index.html）。 要求使用
<base>标记对于这种情况也很重要，因为它允许Angular区分作为应用程序库的url部分和应用程序应该处理的path。
你有没有尝试过，并正确configuration它？ 另外请记住，您必须指定应用程序的基本条目href才能正常工作
<base href="/" />
有了html5mode，你必须在你的html文件中指定基础url，例如，
<base href="/">
有些链接可供您参考，
https://docs.angularjs.org/error/ $ location / nobase
https://scotch.io/quick-tips/pretty-urls-in-angularjs-removing-the-hashtag
它看起来不太可能你从href中手动删除hash-bang（＃），并且它会导致你的路由器发生故障，因为hashbangs可以使浏览器不处理你的状态以便发送get请求到一个端点。 浏览器不会通过＃/路由发送get请求，除非您在html5模式下使用您的url提供程序。 对于html5模式，将下面的行添加到你的app.config函数中：
$locationProvider.html5Mode(true).hashPrefix('!')
