AngularJS 设置所有路由的基本 URL

在本文中，我们将介绍如何使用AngularJS的ngRoute模块设置所有路由的基本URL。

什么是ngRoute模块？

ngRoute模块是AngularJS中一个重要的模块，用于实现单页面应用程序的路由功能。它提供了路由配置和控制器的依赖注入，使开发者可以轻松地创建和管理不同的视图，以及在不同的URL之间进行导航。

设置基本URL

在ngRoute模块中，我们可以通过$routeProvider提供的when方法来设置基本URL。when方法接受两个参数，第一个参数是路由的URL路径，第二个参数是配置对象，包含了路由的相关信息。

以下是一个设置基本URL的示例：

var app = angular.module('myApp', ['ngRoute']);
app.config(function( $routeProvider,$ locationProvider) {
   $routeProvider .when('/home', { templateUrl: 'views/home.html', controller: 'HomeController' }) .when('/about', { templateUrl: 'views/about.html', controller: 'AboutController' }) .otherwise({ redirectTo: '/home' }); // 设置基本URL$ locationProvider.baseHref = '/myapp';
});

在上面的示例中，我们通过$routeProvider.when方法定义了两个路由：一个是/home，另一个是/about。当用户访问这些路由时，AngularJS会加载相应的HTML模板，并执行相应的控制器。

最后，我们使用$locationProvider的baseHref属性来设置基本URL。在上面的示例中，我们将基本URL设置为/myapp。这意味着所有的路由路径都是基于这个URL的，例如/home实际上是/myapp/home。

示例说明

为了更好地说明如何设置基本URL，我们假设我们正在开发一个电子商务网站。我们的网站有一个主页和一个关于页面，基本URL被设置为/shopping。

首先，我们需要创建一个HTML文件作为我们应用的入口点。在这个HTML文件中，我们需要引入AngularJS的脚本文件，并且在<body>标签中添加一个ng-app指令来定义我们的应用模块。

<!DOCTYPE html>
<html>
<head>
  <title>Shopping App</title>
  <!-- 引入AngularJS -->
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
  <!-- 引入ngRoute模块 -->
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular-route.min.js"></script>
</head>
<body ng-app="myApp">
  <div ng-view></div>
  <!-- 引入应用的脚本文件 -->
  <script src="app.js"></script>
</body>
</html>

然后，我们需要创建一个名为app.js的JavaScript文件，用来定义我们的AngularJS应用模块和路由配置。

var app = angular.module('myApp', ['ngRoute']);
app.config(function( $routeProvider,$ locationProvider) {
   $routeProvider .when('/home', { templateUrl: 'views/home.html', controller: 'HomeController' }) .when('/about', { templateUrl: 'views/about.html', controller: 'AboutController' }) .otherwise({ redirectTo: '/home' }); // 设置基本URL$ locationProvider.baseHref = '/shopping';
});

在上面的代码中，我们使用.when方法定义了两个路由：一个是/home，另一个是/about。我们为每个路由指定了相应的HTML模板和控制器。

接下来，我们需要创建两个HTML模板文件分别命名为home.html和about.html，并在这些文件中添加相应的内容。

home.html:

<h1>Welcome to the Shopping App Home Page!</h1>
<p>This is the home page of our shopping app.</p>

about.html:

<h1>About Us</h1>
<p>We are a leading online shopping platform.</p>

最后，我们还需要定义HomeController和AboutController两个控制器，用来处理相应的视图逻辑。

app.controller('HomeController', function( $scope) { // 控制器逻辑 }); app.controller('AboutController', function($ scope) {
  // 控制器逻辑
});

现在，我们可以在浏览器中运行我们的应用，并通过访问http://localhost:8080/shopping来查看我们的主页。

总结

在本文中，我们介绍了如何使用AngularJS的ngRoute模块设置所有路由的基本URL。我们通过$routeProvider提供的when方法来定义路由，并使用$locationProvider的baseHref属性设置基本URL。最后，我们提供了一个示例，演示了如何将这些概念应用到一个电子商务网站中。通过理解和掌握这些概念，我们可以更好地开发和管理我们的AngularJS应用程序。