在路由器中运行时,从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.htmllogin.htmldashboard.htmllogout.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

这个答案应该有帮助,但是你会有两个问题:

  1. 您需要在$locationProvider.html5Mode(true)之前进行检查,因为它不适用于IE 10或更高版本。

     if(window.history && window.history.pushState){ $locationProvider.html5Mode(true); } 
  2. 这只会通过删除#当用户input它的url,即如果用户input的app/#/login它将更改为app/login 。 但是,如果用户书签或复制更改后的url app/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('!')