AngularJS 路由不带哈希“#”

AngularJS

AngularJS 是一种流行的JavaScript框架，用于构建现代化的单页面应用程序（SPA）。其强大的功能之一是路由机制，它允许开发者根据URL的变化来加载不同的视图和控制器。在过去，AngularJS的路由机制使用URL中的哈希（#）来标记不同的路由，但现在可以通过一些简单的配置来去除哈希，使URL更加友好和可读。

去除哈希的路由设置

要去除AngularJS路由中的哈希，我们需要在应用的配置中添加一个选项。在AngularJS 1.6及更高版本中，可以使用$locationProvider服务的html5Mode方法来实现。首先，在应用的配置块中注入$locationProvider服务，并调用html5Mode方法：

Javascript
angular.module('myApp', [])
  .config(['$locationProvider', function($locationProvider) {
    $locationProvider.html5Mode(true);
  }]);

这样配置之后，AngularJS将使用HTML5的history.pushState方法来管理URL，而不是使用哈希。

使用去除哈希的路由

一旦我们配置了去除哈希的路由，就可以在应用中定义不同的路由，并将其与对应的视图和控制器关联起来。下面是一个简单的例子，展示了如何使用去除哈希的路由：

Javascript
angular.module('myApp', ['ngRoute'])
  .config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'home.html',
        controller: 'HomeController'
      })
      .when('/about', {
        templateUrl: 'about.html',
        controller: 'AboutController'
      })
      .otherwise({
        redirectTo: '/'
      });
    $locationProvider.html5Mode(true);
  }])
  .controller('HomeController', ['$scope', function($scope) {
    // HomeController的逻辑
  }])
  .controller('AboutController', ['$scope', function($scope) {
    // AboutController的逻辑
  }]);

在上面的例子中，我们定义了两个路由：根路径/和关于页面/about。当用户访问这些路由时，AngularJS将加载对应的视图和控制器。

注意事项

在使用去除哈希的路由时，需要确保服务器配置正确。因为去除了哈希，URL中的路径必须与服务器上的实际文件路径相对应。如果服务器上没有正确的配置，可能会导致路由无法正常工作。

通过去除AngularJS路由中的哈希，我们可以使URL更加友好和可读。使用$locationProvider的html5Mode方法，我们可以配置AngularJS以使用HTML5的history.pushState方法来管理URL。然后，我们可以定义不同的路由并与对应的视图和控制器关联起来。记得在使用去除哈希的路由时，确保服务器配置正确。