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-view

controller: '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来绑定事件