AngularJS 设置所有路由的基本URL

在本文中，我们将介绍如何使用AngularJS的ngRoute模块来设置所有路由的基本URL。ngRoute是AngularJS提供的用于创建单页应用程序的路由模块。使用ngRoute，我们可以将不同的页面组织成不同的视图，并使用路由来导航和控制页面之间的切换。

阅读更多：AngularJS 教程

什么是ngRoute模块？

ngRoute是AngularJS中的一个核心模块，用于提供路由功能。它允许我们在应用程序中定义不同的路由，并与不同的视图和控制器进行关联。ngRoute模块还提供了一些实用的功能，例如路由参数、嵌套路由和重定向等。

ngRoute模块的基本用法

要使用ngRoute模块，首先需要在应用程序的模块定义中添加对ngRoute的依赖：

var app = angular.module('myApp', ['ngRoute']);

接下来，我们可以使用 $routeProvider来配置应用程序的路由。我们可以通过调用$ routeProvider提供的方法来定义不同的路由规则。

app.config(function(routeProvider) {routeProvider
    .when('/', {
      templateUrl: 'home.html',
      controller: 'HomeController'
    })
    .when('/about', {
      templateUrl: 'about.html',
      controller: 'AboutController'
    })
    .otherwise({
      redirectTo: '/'
    });
});

上面的代码中，我们定义了两个路由规则，分别是根路由’/’和/about路由。每个路由规则都指定了对应的模板和控制器。当应用程序的URL匹配到某个路由规则时，将加载指定的模板，并使用相应的控制器进行处理。

设置所有路由的基本URL

在有些情况下，我们希望为应用程序的所有路由设置一个共同的基本URL，这样可以使得路由配置更加简洁。在AngularJS中，我们可以使用$locationProvider来设置基本URL。

app.config(function(locationProvider) {locationProvider
    .html5Mode(true)
    .hashPrefix('!');
});

上面的代码中，我们通过调用html5Mode方法将应用程序设置为HTML5模式，这样就可以使用更友好的URL格式。然后，我们调用hashPrefix方法来设置基本URL的前缀，默认的前缀是’!’。设置了基本URL后，我们可以在定义路由规则时去掉基本URL的部分。

app.config(function(routeProvider) {routeProvider
    .when('/', {
      templateUrl: 'home.html',
      controller: 'HomeController'
    })
    .when('/about', {
      templateUrl: 'about.html',
      controller: 'AboutController'
    })
    .otherwise({
      redirectTo: '/'
    });
});

上面的代码中，我们定义的路由规则中不再包含基本URL，只需要定义相对于基本URL的路径即可。

示例说明

假设我们的应用程序的基本URL是https://example.com/app，我们可以通过设置$locationProvider来配置基本URL。然后，我们定义了两个路由规则，分别是根路由’/’和/about路由。当用户访问https://example.com/app/#/时，将加载home.html模板，并使用HomeController进行处理。当用户访问https://example.com/app/#/about时，将加载about.html模板，并使用AboutController进行处理。