AngularJS 路由 本章节我们将为大家介绍 AngularJS 路由。 AngularJS 路由允许我们通过不同的 URL 访问不同的内容。 通过 AngularJS 可以实现多视图的单页Web应用（single page web application，SPA）。 通常我们的URL形式为 http://runoob.com/first/page，但在单页Web应用中 AngularJS 通过 # + 标记 实现，例如： http://runoob.com/#/first http://runoob.com/#/second http://runoob.com/#/third 当我们点击以上的任意一个链接时，向服务端请的地址都是一样的 (http://runoob.com/)。 因为 # 号之后的内容在向服务端请求时会被浏览器忽略掉。 所以我们就需要在客户端实现 # 号后面内容的功能实现。 AngularJS 路由 就通过 # + 标记 帮助我们区分不同的逻辑页面并将不同的页面绑定到对应的控制器上。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>路由</title>
<script src="angular-1.4.1/angular.min.js"></script>
<script src="angular-1.4.1/angular-route.min.js"></script><!--载入实现路由的js文件-->
<script type="text/javascript">
angular.module('ngRouteExample', ['ngRoute']) //包含了ngRoute模块作为主应用模块的依赖模块
.controller('HomeController', function ($scope, $route) { $scope.$route = $route;})
.controller('AboutController', function ($scope, $route) { $scope.$route = $route;})
.config(function ($routeProvider) { //AngularJS 模块的 config 函数用于配置路由规则。通过使用 configAPI，我们请求把$routeProvider
// 注入到我们的配置函数并且使用$routeProvider.whenAPI来定义我们的路由规则
$routeProvider.
when('/home', {
templateUrl: 'embedded.home.html', //第一个参数是URL或者URL正则规则 第二个参数是路由配置对象
controller: 'HomeController'
}).
when('/about', {
templateUrl: 'embedded.about.html',
controller: 'AboutController'
}).
otherwise({
redirectTo: '/home'
});
});
</script>
</head>
<body ng-app="ngRouteExample" class="ng-scope"> <!--当当前页面为embedded.home.html时就输出一个Home页面-->
<script type="text/ng-template" id="embedded.home.html">
<h1> Home页面 </h1>
</script>
<!--当当前页面为embedded.about.html时就输出一个About页面-->
<script type="text/ng-template" id="embedded.about.html">
<h1> About页面 </h1>
</script> <div>
<div id="navigation">
<a href="#/home">Home</a>
<a href="#/about">About</a>
</div> <div ng-view=""><!--该div内的HTML内容会根据路由的变化而变化 --> </div>
</div>
</body>
</html>
运行结果：