AngularJS作为一款流行的JavaScript框架，在Web应用程序开发中扮演着重要角色。它的路由功能尤其受到开发者的青睐，因为它使得实现单页面应用（SPA）的页面切换和导航变得轻松高效。本文将详细介绍AngularJS的路由功能，并通过实例演示其具体步骤和用法。
步骤1: 引入AngularJS和ngRoute模块
首先，在HTML文档中引入AngularJS库和ngRoute模块。ngRoute模块是AngularJS提供的用于实现路由功能的扩展模块。
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular-route.min.js"></script>
</head>
<body>
<div ng-app="myApp">
<h1>AngularJS 路由示例</h1>
<a href="#/home">Home</a>
<a href="#/about">About</a>
<div ng-view></div>
</div>
<script>
var app = angular.module("myApp", ["ngRoute"]);
</script>
</body>
</html>
步骤2: 配置路由
在你的AngularJS应用中，需要配置路由来定义不同页面的URL和对应的视图模板。使用routeProvider对象进行路由的配置。
app.config(["$routeProvider", function($routeProvider) {
$routeProvider
.when("/home", {
templateUrl: "home.html",
controller: "HomeController"
})
.when("/about", {
templateUrl: "about.html",
controller: "AboutController"
})
.otherwise({
redirectTo: "/home"
});
}]);
在上面的代码中，我们定义了两个路由：/home表示默认首页，使用home.html作为视图模板，HomeController作为控制器；/about表示关于页面，使用about.html作为视图模板，AboutController作为控制器。另外，通过otherwise方法可以设置默认路由。
步骤3: 创建视图模板
创建相应的视图模板文件home.html和about.html。
<!-- home.html -->
<div>
<h2>首页</h2>
<p>这是首页内容。</p>
</div>
<!-- about.html -->
<div>
<h2>关于我们</h2>
<p>这是关于我们页面内容。</p>
</div>
步骤4: 创建控制器
创建相应的控制器文件HomeController.js和AboutController.js。
// HomeController.js
app.controller("HomeController", ["$scope", function($scope) {
$scope.message = "这是首页控制器";
}]);
// AboutController.js
app.controller("AboutController", ["$scope", function($scope) {
$scope.message = "这是关于我们控制器";
}]);
现在，当用户访问http://localhost:8000/时，将会看到首页内容。如果用户点击“关于”链接，则会跳转到关于页面。
总结
通过以上步骤，我们成功地在AngularJS中实现了路由功能，从而轻松实现了单页面应用的高效导航。AngularJS的路由功能为开发者提供了强大的工具，使得构建复杂的单页面应用变得更加容易。