1. HTML 模板（index.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：
<h1>{{ message }}</h1>
<p>This is the home page.</p>
- views/about.html：
<h1>{{ message }}</h1>
<p>Learn about our company.</p>
- views/contact.html：
<h1>{{ message }}</h1>
<p>Contact us for more information.</p>
在这个示例中，index.html 文件是主页面，而 views/ 文件夹中的每个 HTML 文件都是一个模板，分别对应不同的路由。你可以根据需要创建更多的模板文件，并在路由配置中进行相应的修改。
这只是一个简单的示例，实际中你可能需要更复杂的结构和功能。如果项目变得更大，考虑使用 AngularJS 组件和服务来组织代码，以更好地维护和扩展应用程序。
转载请注明出处：http://www.pingtaimeng.com/article/detail/4890/Angular