AngularJS 路由学习笔记
AngularJS 是一个很强大的前端JavaScript框架，它提供了很多功能，使我们可以通过编写JavaScript代码来创建丰富的互动式前端应用程序。其中一个重要的功能是路由。
路由允许我们在应用程序中定义不同的页面，然后在用户浏览时根据URL路径动态加载这些页面。通过使用路由，我们可以创建单页应用程序(Single Page Applications, SPA)，这种应用程序无需重新加载整个页面就能更改内容。
设置路由
设置路由需要使用AngularJS的ngRoute模块。首先要确保你已经在项目中引入了ngRoute模块。例如：
htmlCopy Code<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js"></script>
然后，在应用程序的主模块中注入'ngRoute'模块：
javascriptCopy Codevar app = angular.module('myApp', ['ngRoute']);
现在可以开始设置路由了。下面是一个简单的例子：
javascriptCopy Codeapp.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl : 'home.html',
controller : 'HomeController'
})
.when('/about', {
templateUrl : 'about.html',
controller : 'AboutController'
})
.otherwise({redirectTo: '/'});
});
这个配置代码告诉AngularJS，当用户访问网站的根路径时将会加载home.html作为模板，并使用HomeController作为控制器，当用户访问/about路径时将会加载about.html作为模板，并使用AboutController作为控制器。最后，如果用户访问不存在的路径，则会重定向到根路径。
实例
下面是一个简单的实例，我们来创建一个名为myApp的AngularJS应用程序，设置路由，然后创建两个页面：home.html和about.html。在这个例子中，我们使用Bootstrap框架为页面添加了样式。
index.html文件：
htmlCopy Code<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AngularJS 路由学习笔记</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<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'
})
.otherwise({redirectTo: '/'});
});
app.controller('HomeController', function($scope) {
$scope.message = '欢迎来到主页';
});
app.controller('AboutController', function($scope) {
$scope.message = '欢迎来到关于页面';
});
</script>
</head>
<body ng-app="myApp">
<nav class="navbar navbar-default">
<div class="container-fluid">
<ul class="nav navbar-nav">
<li><a href="#/">主页</a></li>
<li><a href="#/about">关于</a></li>
</ul>
</div>
</nav>
<div class="container">
<ng-view></ng-view>
</div>
</body>
</html>
home.html文件：
htmlCopy Code<div class="jumbotron text-center">
<h1>{{ message }}</h1>
<p>这是主页。</p>
</div>
about.html文件：
htmlCopy Code<div class="jumbotron text-center">
<h1>{{ message }}</h1>
<p>这是关于页面。</p>
</div>
在这个例子中，当用户访问主页时将会看到一个包含欢迎消息的大号字体(jumbotron)，当用户访问关于页面时同样也会看到一个包含欢迎消息的大号字体。注意，我们使用了AngularJS的双括号语法(bindings)将消息变量绑定到HTML模板。
现在可以在浏览器中打开index.html文件，并在主页和关于页面之间切换了。