AngularJS路由功能是一个纯前端的解决方案，与我们熟悉的后台路由不太一样。 后台路由：通过不同的 URL 会路由到不同的控制器上(controller)，再渲染(render)到页面(HTML)。AngularJS 的前端路由：需要提前对指定的(ng-app)，定义路由规则(routeProvider)，然后通过不同的 URL，告诉(ng-app)加载哪个页面(HTML)，再渲染到视图(ng-view)中。
AngularJS 的前端路由虽然 URL 输入不一样，页面展示不一样，其实完成的就是单页视图(ng-view)的局部刷新。
AngularJS路由的实现主要设计几个方面：
ng-view指令决定数据显示的位置使用$routeProvider供应商设置路由的配置$routeParams用于接受路由的参数路由的事件：$routeChangeStart,$routeChangeSuccess,$routeChangeError接下来我们就来看一下上面说的几个方面
关于页面的跳转主要介绍两个方面：
第一种类型的跳转（主页面加载页面1，然后主页面重新加载页面2） 第二种类型的跳转（主页面加载页面1，然后页面1中跳转到页面2）接下来我们看一下，代码是如何实现的。
引入AngularJS函数库（略）引入路由插件（略）设置AngularJS作用域（略）配置路由供应商 var app = angular.module('myApp',['ngRoute']); app.config(['$routeProvider',function($routeProvider){ $routeProvider .when('/div1',{ templateUrl : "div1.html", controller : 'div1Controller' }) .when('/div2',{ templateUrl : "div2.html", controller : 'div2Controller' }) .otherwise({ redirectTo : '/index.html' }); }]); 设置我们的控制器 app.controller('div1Controller', function($scope,$location) { $scope.changUrl= function () { $location.path("/div2"); } }); app.controller('div2Controller', function($scope) { $scope.name="第二个页面"; }); app.controller('MainCtrl', function($scope,$location) { $scope.changUrl= function () { $location.path("/div1"); } }); 设置我们主页面（路由会自动查找ng-view指令）（主页面的部分内容） <div ng-controller="MainCtrl"> <button ng-click="changUrl()">跳转到第一个页面</button> </div> <div ng-view></div> div1页面（下面是div1页面全部内容） <button ng-click="changUrl();">改变页面</button> 第一个页面 div2页面（仅仅只有一个表达式） {{name}}在页面跳转的时候如果我们想要传递参数应该如何传递呢？在这里我们就来实现一下。
定义我们的路由（注意：路由中有一个参数id） var app = angular.module('myApp',['ngRoute']); app.config(['$routeProvider',function($routeProvider){ $routeProvider .when('/div1/:id',{ templateUrl : "./div1.html", controller : 'div1Controller' }) .otherwise({ redirectTo : '/index.html' }); }]); 当我们跳转的时候，传递参数，比如下面的代码 app.controller('MainCtrl', function($scope,$location) { $scope.changUrl= function () { //在这里传递参数id=10 $location.path("/div1/10") } }); 在div1Controller获取到参数（通过$routeParams参数） app.controller('div1Controller', function($routeParams) { alert($routeParams.id) }); 运行结果 上面我们只是传递一个参数。如果传递多个参数原理也是一样的，我们看下面的代码 app.config(['$routeProvider',function($routeProvider){ $routeProvider .when('/div1/:content/:id',{ templateUrl : "./div1.html", controller : 'div1Controller' }) .otherwise({ redirectTo : '/index.html' }); }]); 跳转页面 app.controller('MainCtrl', function($scope,$location) { $scope.changUrl= function () { //在这里传递参数content=10,id=20 $location.path("/div1/10/20") } }); 接受参数 app.controller('div1Controller', function($routeParams) { alert($routeParams.id+":"+$routeParams.content) }); 运行结果在我们路由跳转时是有事件的，分别为：$routeChangeStart,$routeChangeSuccess,$routeChangeError，我们可以给$rootScope绑定全局的路由事件的处理函数，全局的事件绑定我们可以通过run方法来绑定，接下来我们就来看一下代码的实现。
通过上面的运行结果，我们可以知道：
事件和控制器的运行熟悉：$routeChangeStart，然后$routeChangeSuccess，最后运行div1Controller。当我们触发路由的回调函数时，回调函数中有三个参数，这三个参数带有我们的路由信息。