<!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>
<div ng-view></div>
<script>
var app = angular.module('myApp', ['ngRoute']);
// 配置路由
app.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/home.html',
controller: 'HomeController'
})
.when('/about', {
templateUrl: 'views/about.html',
controller: 'AboutController'
})
.when('/contact', {
templateUrl: 'views/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>
在这个例子中，我们创建了一个名为 myApp 的 AngularJS 模块，并在模块的配置中定义了路由。这些路由定义了不同路径下的视图和相应的控制器。我们还定义了三个简单的控制器，分别对应首页、关于页面和联系页面。
项目结构如下：