AngularJs路由：ngRoute
AngularJs是单页面应用框架，因此如何从一个视图跳转到另外一个视图是至关重要的。随着应用的扩大，我们希望有专门的视图管理功能。AngularJs有专门的路由模块ngRoute来提供视图的切换，将路由、视图和控制器很好的对应了起来。 简单的说，ngRoute模块中的$route服务会监测$location.url()的变化，并将它映射到预先定义的视图和控制器。
安装ngRoute模块
从1.2开始AngularJs的路由模块已经独立出来成为了一个单独的模块，所以我们需要先安装它。在官网下载angular-route.js存放至项目的js文件夹下，然后在index.html中进行引用。记住要放在angular.js后面。
<script src="js/angular.js"></script> <script src="js/angular-route.js"></script>
页面布局
<!DOCTYPE html> <html > <head> <title>index</title> <script src="js/angular.js"></script> <script src="js/angular-route.js"></script> <script src="js/controllers.js"></script> <script src="js/app.js"></script> </head> <body ng-app="app"> <div ng-view></div> </body> </html>
然后我们有两个视图页面，分别是page1.html和page2.html，内容很简单，他们分别绑定了一个content变量，其中page1视图还有一个按钮，点击后可以跳转到page2页面。
//page1.html <div> {{content}} <br> <input type="button" value="Go to page2" ng-click="direct()"/> </div>
//page2.html
<div>
{{content}}
</div>
配置路由
ngRoute模块有$routeProvider对象，在应用配置阶段通过它进行路由的配置，将路由、视图和控制器一一对应起来。创建app.js文件，在里面创建"app"模块，记住需要添加ngRoute模块依赖。我们将控制器放在了controller.js文件中的controllers模块里面，所以这里还需要添加控制器依赖。
angular.module("app", [ "ngRoute", "controllers" ]).config(["$routeProvider", function($routeProvider) { $routeProvider .when("/index", { templateUrl: "views/page1.html", controller: "Page1Controller" }) .when("/child", { templateUrl: "views/page2.html", controller: "Page2Controller" }) .otherwise({ redirectTo: "/index" }); }])$routeProvider通过when（）和otherwise（）两个方法进行路由配置。when()方法第一个参数是路由，名字由自己指定。第二个参数是映射对象，最重要的映射属性有视图的url和对应的控制器。otherwise（）参数是映射对象，redirectTo属性指定无法匹配时跳转的路由。有关$routeProvider的详细信息请参考：http://www.cnblogs.com/koukabatsugun/p/3445072.html。
至此路由配置就完成了。现在我们来实现相应的控制器，创建controllers.js文件。
angular.module("controllers", []) .controller("Page1Controller", ["$scope", "$location", function($scope, $location) { $scope.content = "This is page 1"; $scope.direct = function(){//跳转到page2 $location.path('/child'); } }]) .controller("Page2Controller", ["$scope", "$location", function($scope, $location) { $scope.content = 'This is page 2'; }]);在direct函数中我们通过$location.path()将路由改为'/child'从而跳转到了page2.html页面。$location是ngRoute模块中的一个服务，通过它可以获取和设置浏览器地址栏中的url。$location包含url()、path()、replace()、search()等方法和 $locationChangeSuccess 等事件。具体内容请参考下面链接：http://docs.angularjs.cn/api/ng/service/$location。
除了$location，ngRoute模块还有$routeParams服务，它可以让你获取当前路由的参数(它实际上是$location.search()和path()的结合体)。例如：
// 假设: // URL: http://server.com/index.html#/Chapter/1/Section/2?search=moby // Route: /Chapter/:chapterId/Section/:sectionId // // 那么: $routeParams ==> {chapterId:'1', sectionId:'2', search:'moby'}
//配置路由参数 .when("/child/:content", { templateUrl: "views/page2.html", controller: "Page2Controller" })
//跳转 $location.path('/child/someThing'); //获取参数 $scope.content = $routeParams.content;//content="someThing"
有关$routeParams详细信息请查看下面链接：http://docs.angularjs.cn/api/ngRoute/service/$routeParams
最后将完整的demo传上来：http://download.csdn.net/detail/gameloft9/9470605，请在webstorm中打开。