无法从 AngularJS 中的 URL 中删除 #答案

【问题标题】：Unable to remove # from URL in AngularJS无法从 AngularJS 中的 URL 中删除 #
【发布时间】：2017-06-29 13:35:43
【问题描述】：

我在 AngularJS 中有一个简单的单页应用程序。 URL 看起来像这样.../Angular/index.html，当我点击页面中的链接时，它会转换为.../Angular/index.html#/addStudent。

现在，我想从 URL 中删除 #，但我无法做到。我用谷歌搜索并找到了很多答案，但没有一个有效（我对 Angular 和编程真的很陌生），所以可能是我错过了一些非常愚蠢的东西。

代码如下：

<html>
   
   <head>
      <title>Angular JS Views</title>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-route.min.js"></script>
   </head>
   
   <body>
      <h2>AngularJS Sample Application</h2>
      <div ng-app = "mainApp">
         <p><a href = "#addStudent">Add Student</a></p>
         <p><a href = "#viewStudents">View Students</a></p>
         <div ng-view></div>
         
         <script type = "text/ng-template" id = "addStudent.htm">
            <h2> Add Student </h2>
            {{message}}
         </script>
         
         <script type = "text/ng-template" id = "viewStudents.htm">
            <h2> View Students </h2>
            {{message}}
         </script>
      </div>
      
      <script>
         var mainApp = angular.module("mainApp", ['ngRoute']);
         mainApp.config(['$routeProvider', function($routeProvider) {
            $routeProvider.
            
            when('/addStudent', {
			   //url:'/',
               templateUrl: 'addStudent.htm',
               controller: 'AddStudentController'
            }).
            
            when('/viewStudents', {
			   //url:'/',
               templateUrl: 'viewStudents.htm',
               controller: 'ViewStudentsController'
            }).
            
            otherwise({
               redirectTo: '/addStudent'
            });
			//$urlRouterProvider.otherwise('/');
			//$locationProvider.html5Mode(true);
			//check browser support
       // if(window.history && window.history.pushState){
            //$locationProvider.html5Mode(true); will cause an error $location in HTML5 mode requires a  tag to be present! Unless you set baseUrl tag after head tag like so: <head> <base href="/">

         // to know more about setting base URL visit: https://docs.angularjs.org/error/$location/nobase

         // if you don't wish to set base URL then use this
        // $locationProvider.html5Mode({
          //       enabled: true,
            //     requireBase: false
				// rewriteLinks: true
    //      });
     //   }
            
         }]);
         
         mainApp.controller('AddStudentController', function($scope) {
            $scope.message = "This page will be used to display add student form";
         });
         
         mainApp.controller('ViewStudentsController', function($scope) {
            $scope.message = "This page will be used to display all the students";
         });
			
      </script>
      
   </body>
</html>

【问题讨论】：

How to remove the hash # from the angularjs ng-route的可能重复
Removing the fragment identifier from AngularJS urls (# symbol)的可能重复
@Ted 嗨，我知道这是重复的，但即使经过给定的解决方案，我也无法解决问题。

标签： javascript html angularjs angular-ui-router

【解决方案1】：

您需要将 HTML5-mode 设置为 true：

$locationProvider.html5Mode(true);

并且在您的链接中，不要包含#。改为这样做：

<a href="/addStudent">Add Student</a>

【讨论】：

我的初始 url 是 file:///C:/Users/.../Desktop/.../Angular/index.html 并且它正在使用 # (url 变成了类似于 file :///C:/Users/.../Desktop/.../Angular/index.html#/Addstudent）。我尝试使用 $locationProvider.html5Mode(true);如您所见，注释代码（还在配置和功能中添加了 $locationProvider ，正如许多类似问题的答案中所建议的那样，但没有一个有效）
@RamnarayanChaudhary 如果您按照我的建议进行更改会发生什么？
它从 url 中删除了 # 但无法连接到模板。所以它显示错误“找不到文件”。
我尝试了代码中注释的方法。

【解决方案2】：

如果要删除前缀 (#)，可以执行以下操作：

1) 在模块配置中激活 HTML5 模式

$locationProvider.html5Mode(true);

2) 在 index.html 的 `<head`> 中将 base 设置为 `/`

<head>
    ...
    <base href="/">
</head>

请注意，如果您使用的是 Angular 1.6，则还需要删除 !。你可以看到this solution。

【讨论】：

我试过这个。网址与我预期的一样（没有#），但页面显示错误 404。

【解决方案3】：

使用

$locationProvider.html5Mode({
      enabled: true,
      requireBase: false
    });

在你的js和

<base href="http://localhost:4000" || "or your URL in here">

在主 HTML 中

不要忘记在你的配置中$locationProvider。

【讨论】：

我尝试使用它，但它不起作用。它从 url 中删除了 # 但无法连接到模板。所以它显示错误“找不到文件”如果可行，请您在系统中尝试此代码并进行更改。提前致谢。
我做了一些更改，请检查

1) 在模块配置中激活 HTML5 模式

2) 在 index.html 的 &lt;head> 中将 base 设置为 /

2) 在 index.html 的 `<head`> 中将 base 设置为 `/`