|
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>
页面布局
我们需要定义一个类似于母版页的index.html页面，通过ng-app指令定义好我们的Angular应用"app"，我们将在后面实现它。然后通过<div ng-view></div>为视图提供占位符，这样加载视图时就会寻找具有ng-view元素，并将其加载到这里。
<!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",$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中打开。 （编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
|
