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中打开。