AngularJS路由
AngularJS路由使我们可以为应用程序中的不同内容创建不同的URL。对于不同的内容具有不同的URL，使用户可以将URL标记为特定内容，并将这些URL发送给朋友等。在AngularJS中，每个这样的可标记URL称为路由。
AngularJS路由使我们可以根据选择的路由显示不同的内容。网址是在#号后的URL中指定的。因此，以下URL都指向同一个AngularJS应用程序，但每个都指向不同的路由：
http://myangularjsapp.com/index.html#books
http://myangularjsapp.com/index.html#albums
http://myangularjsapp.com/index.html#games
http://myangularjsapp.com/index.html#apps
当浏览器加载这些链接时，将加载相同的AngularJS应用程序(位于" http://myangularjsapp.com/index.html")，但是AngularJS将查看路由(URL中位于#号后的部分) )并确定要显示的HTML模板。
在这一点上，这听起来可能有点抽象，所以让我们看一个完整的AngularJS路由示例：
<!DOCTYPE html>
<html lang="en">
<head>
<title>AngularJS Routes example</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular-route.min.js"></script>
</head>
<body ng-app="sampleApp">
<a href="#/route1">Route 1</a><br/>
<a href="#/route2">Route 2</a><br/>
<div ng-view></div>
<script>
var module = angular.module("sampleApp", ['ngRoute']);
module.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/route1', {
templateUrl: 'angular-route-template-1.jsp',
controller: 'RouteController'
}).
when('/route2', {
templateUrl: 'angular-route-template-2.jsp',
controller: 'RouteController'
}).
otherwise({
redirectTo: '/'
});
}]);
module.controller("RouteController", function($scope) {
})
</script>
以下各节将说明此示例应用程序的每个部分。
包括AngularJS路由模块
在上面的示例应用程序中要注意的第一件事是" head"部分中包含的额外JavaScript：
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular-route.min.js"></script>
AngularJS Route模块包含在其自己的JavaScript文件中。要使用它，我们必须将其包含在AngularJS应用程序中。
声明对AngularJS路由模块的依赖
注意的第二件事是应用程序的AngularJS模块(称为" sampleApp")声明了对AngularJS路由模块的依赖关系：
var module = angular.module("sampleApp", ['ngRoute']);
为了使用ngRoute模块，应用程序的模块需要声明此依赖关系。这在我的模块化和依赖注入教程中有关模块之间的依赖的部分中有更详细的说明。
ngView指令
上面的示例中要注意的第三件事是使用ngView指令：
<div ng-view></div>
在带有ngView指令的div内部(也可以写为ng-view)，将显示特定于给定路由的HTML模板。
配置$ routeProvider
在本文开头显示的示例中要注意的第四件事是$ routeProvider的配置。 $ routeProvider是创建$ route服务的原因。通过在创建$ route服务之前配置$ routeProvider，我们可以设置应该显示哪些HTML模板的路由。
这是示例中的代码：
<script>
module.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/route1', {
templateUrl: 'angular-route-template-1.jsp',
controller: 'RouteController'
}).
when('/route2', {
templateUrl: 'angular-route-template-2.jsp',
controller: 'RouteController'
}).
otherwise({
redirectTo: '/'
});
}]);
</script>
$ routeProvider在模块的config()函数中配置。我们将配置函数传递给模块的config()函数，该函数以$ routeProvider为参数。在此函数内，我们现在可以配置$ routeProvider。
$ routeProvider是通过调用when()和otherwise()函数来配置的。
" when()"函数采用路由路径和JavaScript对象作为参数。
加载应用程序后，路由路径将与URL的一部分匹配。如我们所见，在同一示例中，传递给两个when()函数调用的两个路由路径与链接的'href'属性中的两个路由路径匹配。
JavaScript对象包含两个名为templateUrl和controller的属性。 templateUrl属性通过ngView指令指示应在div内部加载和显示哪个HTML模板AngularJS。 " controller"属性告诉我们应该使用HTML模板的哪些控制器功能。
" otherwise()"函数接受一个JavaScript对象。此JavaScript对象告诉AngularJS，如果没有路由路径与给定的URL匹配，应该怎么做。在上面的示例中，浏览器被重定向到以#/作为路由路径的相同URL。
路由链接
在此示例中要注意的最后一件事是HTML页面中的两个链接：
<a href="#/route1">Route 1</a><br/> <a href="#/route2">Route 2</a><br/>
注意，#之后的URL部分如何与$ routeProvider上配置的路由匹配。
当单击这些链接之一时，浏览器窗口中的URL会更改，带有ngView指令的div将显示与路由路径匹配的HTML模板。
路由参数
我们可以将参数嵌入到路由路径中。这是一个AngularJS路由路径参数示例：
#/books/12345
这是一个带有路由路径的URL。实际上，它几乎仅由路由路径组成。参数部分是" 12345"，它是URL指向的书的特定ID。
如果我们在配置$ routeProvider时在路由路径中定义了参数，AngularJS可以从路由路径中提取值。这是前面的示例$ routeProvider，但是在路由路径中插入了参数：
<script>
module.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/route1/:param', {
templateUrl: 'angular-route-template-1.jsp',
controller: 'RouteController'
}).
when('/route2/:param', {
templateUrl: 'angular-route-template-2.jsp',
controller: 'RouteController'
}).
otherwise({
redirectTo: '/'
});
}]);
</script>
现在，" when()"调用中的两个URL都定义了一个参数。这是从冒号开始的部分(：param)
现在，AngularJS将从URL(路由路径)中提取"#/ route1 /"部分之后的内容。因此，从该URL：
#/route1/12345
值" 12345"将被提取为参数。
控制器函数可以通过AngularJS$ routeParams服务访问路由参数，如下所示：
module.controller("RouteController", function($scope, $routeParams) {
$scope.param = $routeParams.param;
})
注意控制器函数如何将$ routeParams服务作为参数，然后将名为param的参数复制到$ scope.param属性中。现在，AngularJS视图可以访问它，或者可以在AJAX调用等中使用它。
这是完整的AngularJS路由参数示例：
<!DOCTYPE html>
<html lang="en">
<head>
<title>AngularJS Routes example</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular-route.min.js"></script>
</head>
<body ng-app="sampleApp">
<a href="#/route1/abcd">Route 1 + param</a><br/>
<a href="#/route2/1234">Route 2 + param</a><br/>
<div ng-view></div>
<script>
var module = angular.module("sampleApp", ['ngRoute']);
module.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/route1/:param', {
templateUrl: 'angular-route-template-1.jsp',
controller: 'RouteController'
}).
when('/route2/:param', {
templateUrl: 'angular-route-template-2.jsp',
controller: 'RouteController'
}).
otherwise({
redirectTo: '/'
});
}]);
module.controller("RouteController", function($scope, $routeParams) {
$scope.param = $routeParams.param;
})
</script>
</body>
</html>
