1. HTML 模板：
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>AngularJS 路由与多视图</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular-route.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 = 'Welcome to the Home Page!';
});
app.controller('AboutController', function ($scope) {
$scope.message = 'Learn more About Us.';
});
app.controller('ContactController', function ($scope) {
$scope.message = 'Contact Us for any inquiries.';
});
</script>
</body>
</html>
2. 视图模板（views/home.html，views/about.html，views/contact.html）：
- home.html：
<h1>{{ message }}</h1>
<p>This is the home page.</p>
- about.html：
<h1>{{ message }}</h1>
<p>Learn about our company.</p>
- contact.html：
<h1>{{ message }}</h1>
<p>Contact us for more information.</p>
在这个示例中，ngRoute 模块用于处理路由。$routeProvider 被用来配置路由，并且每个路由都指定了相应的模板和控制器。ng-view 指令用于显示当前路由的视图。
请确保在实际应用中使用 HTTPS 协议加载 AngularJS 库，以确保安全性。此外，为了运行上述示例，你需要一个支持服务器端路由的 Web 服务器。如果只是本地测试，可以使用一些工具如 Live Server 或 HTTP Server 来模拟服务器环境。
转载请注明出处：http://www.pingtaimeng.com/article/detail/4889/Angular