ng-route模块

ng-route模块

由于angular把ngRoute模块从核心代码中抽离出来形成一个独立的模块，所以使用的时候要另外添加ng-route模块

//引入angular-route.min.js<script type="text/javascript" src="../angular.min.js"></script><script type="text/javascript" src="../angular-route.min.js"></script>//在angular应用中引用ngRoute模块angular.module('app', ['ngRoute'])

布局模板

ng-view是ngRoute模块提供的一个特殊指令，只要作用是替换路由指定的模板

<header>    <h2>这是头部</h2></header><div class="content">    <div ng-view></div></div><footer>    <h3>这是页脚</h3></footer>

配置路由

在config函数中通过$routeProvider服务配置路由

angular.module('app', ['ngRoute']).config(['$routeProvider', function($routeProvider){    $routeProvider.when('/', {        templateUrl: 'route/welcome.html',        controller: 'route1'    })    .when('/login',{        templateUrl: 'route/login.html',        controller: 'login'    })    .otherwise({        redirectTo: '/'    })}])

配置路由参数

template: '<h1>Hello</h1>' //直接把html渲染到ng-view中templateUrl: 'view/login.html' //页面模板，渲染ng-viewcontroller: 'loginController' 或controller: function($scope, ...){}//作用：初始化数据。如果设置了resolve属性，Angular会将列表中的元素都注入到控制器中//如果这些依赖是promise对象，它们在控制器加以及￥routeChangeSuccess触发之前，//会被resolve并设置成一个值。resolve: {    'data': ['$http', function($http){        return $http.get('some url').then(            function success(data){return data},            function error(){return false}        )    }]}//如果redirectTo的值是字符串，路径会被直接替换，如果是函数，路径会被替换成函数的返回值redirectTo: '/login'或redirectTo: function(route, path, search)reloadOnSearch: Boolean    如果被设置成true（默认）， 当$location.search()发生变化时会重新加载路由，如果是false则不会重新加载路由

传递参数

$routeParams

//设置路由参数：在路由前面加上":"，angular会把它当作参数处理.when('/login/:name',{    templateUrl: 'route/login.html',    controller: 'login'})请求： /login/Tom//获取参数，在controller中.controller('login', ['$scope', '$routeParams', function($scope, $routeParams){    $scope.name = $routeParams.name}])

路由事件

• $routeChangeStart: 路由变化之前广播事件
• $routeChangeSuccess: 路由成功之后广播事件
• $routeChangeError: 路由失败时广播事件
• routeUpdate:reloadOnSearch设置为false，当location.search()改变后，重新使用控制器时广播事件

咱们可以用rootScope.on来绑定事件