以下是一个简单的例子，演示了如何在 AngularJS 中使用路由：
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>AngularJS 路由</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular-route.min.js"></script>
</head>
<body ng-controller="myCtrl">
<h2>AngularJS 路由</h2>
<!-- 使用 ng-view 指令来渲染路由视图 -->
<div ng-view></div>
<script>
var app = angular.module('myApp', ['ngRoute']);
// 配置路由
app.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'home.html',
controller: 'HomeController'
})
.when('/about', {
templateUrl: 'about.html',
controller: 'AboutController'
})
.when('/contact', {
templateUrl: 'contact.html',
controller: 'ContactController'
})
.otherwise({
redirectTo: '/'
});
});
// 控制器
app.controller('HomeController', function ($scope) {
$scope.message = '欢迎来到首页！';
});
app.controller('AboutController', function ($scope) {
$scope.message = '关于我们的信息。';
});
app.controller('ContactController', function ($scope) {
$scope.message = '联系我们吧！';
});
</script>
</body>
</html>
在这个例子中，我们首先引入了 ngRoute 模块，并将其作为依赖注入到我们的应用模块中。然后，我们使用 $routeProvider 配置了不同路径的路由信息。
- / 对应首页，使用 HomeController 控制器和 home.html 模板。
- /about 对应关于页面，使用 AboutController 控制器和 about.html 模板。
- /contact 对应联系页面，使用 ContactController 控制器和 contact.html 模板。
- 如果路由不匹配任何已定义的路径，则重定向到 /。
在 HTML 文件中，我们使用 ng-view 指令来渲染路由的视图。
这只是一个简单的例子，实际中你可能会在控制器中添加更多的逻辑和功能，以及更多的路由和视图。
转载请注明出处：http://www.pingtaimeng.com/article/detail/4875/Angular