AngularJs路由：ngRoute

来源：互联网发布：天猫淘宝评价采集软件编辑：程序博客网时间：2024/04/29 09:41

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", ["$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中打开。

1 0