在 Web 浏览器中运行 Angular 应用程序时获取“#”和 URL

Question

我已经使用 angularJS 框架创建了一个应用程序。在网络浏览器上运行应用程序时，我得到 # 以及我的 url。我尝试了以下方法，

 var app = angular.module('missingFound', ['ngRoute','ngCookies','UserModel','homeController','DashBoardContrl','TimeLineContrl','MissingPostContrl','FoundPostContrl','GisContrl'])
    
    .config(['$routeProvider','$locationProvider',
             function($routeProvider,$locationProvider) {

    	$routeProvider.when('/', {
    		templateUrl : 'views/home.html',
    		controller : 'homeCtrl'
    	})
    	
    	
    	.when('/dashboard',{	
    		templateUrl: 'views/dashboard.html',
    			controller : 'dashboardCntr',
    			authenticated : true
    	})
    	
    	.when('/timeline',{
    		templateUrl : 'views/timeline.html',
    		controller : 'timelineCntr',
    		authenticated : true
    	})
    	
    	.when('/missingForm',{
    		templateUrl : 'views/missingForm.html',
    		controller : 'missingCntr',
    		authenticated : true
    	})
    	
    	.when('/foundForm',{
    		templateUrl : 'views/foundForm.html',
    		controller : 'foundCntr',
    		authenticated : true
    	})
    	
    	.when('/gisPage',{
    		templateUrl : 'views/gis.html',
    		
    		authenticated : true
    	})
    	.otherwise({
    		redirectTo:"/"
    	});
    
    		   $locationProvider.html5Mode(true);
    	
    /*	$locationProvider.html5Mode({
    		  enabled: true,
    		  requireBase: false
    		});*/
    		   
       
    
    	
    }])
    
    
    
    .run(['$rootScope','$location','AuthService',
             function($rootScope,$location,AuthService){
    			$rootScope.$on("$routeChangeStart", function(event, next, current){
    				if(next.$$route.authenticated){
    					if(!AuthService.getAuthStatus()){
    						$location.path('/');
    					}
    				}
    				
    				if(next.$$route.originalPath == '/'){
    					console.log('Login Page');
    					if(AuthService.getAuthStatus()){
    						$location.path(current.$$route.originalPath);
    					}
    				}
    		})
    }]);

我的网址是这样的 - http://localhost:7080/Police4/#/

当我通过路由导航到不同的 hmtl 页面时，它在登录后工作正常，但是当我试图复制 URL 路径并在不同的选项卡中打开时，它的显示页面未找到。 在使用 '#' 之前它工作正常，但 URL 看起来很丑。

Answer 1

默认情况下，Angular 的路由 URL 都会放置一个 # 字符来将 Angular 控制的部分与 URL 的其余部分分开。这在一些旧版浏览器上是必需的，它们不允许在不重新加载页面的情况下更改 URL 的主要部分。

您可以通过启用 html5 模式来摆脱这种情况。例如，参见https://scotch.io/quick-tips/pretty-urls-in-angularjs-removing-the-hashtag 但是，您还需要配置您的服务器以识别 Angular URL，并为您的应用程序发送主页，即使 URL 似乎指向子页面也是如此。

Answer 2

你好，这对你有帮助，
将此代码添加到您的项目中，

$locationProvider.html5Mode(true); $locationProvider.hashPrefix('!');

阅读 https://docs.angularjs.org/guide/$location