angularJS监听路由变化改变页面内容

在使用angularJS开发单页面应用时，点击导航的标题切换路由往往需要改变改变页面的标题，以及改变导航栏相关标题的样式，此时监听路由变化作出相应的操作即可。

示例：监听路由变化改变页面标题：

app.js:

var app = angular.module("myModule", ['ui.router']);
app.run(['$rootScope', '$log', function($rootScope, $log){
        $rootScope.$on('$stateChangeSuccess', function(event, toState, toParams, fromState, fromParams){
            $rootScope.title = toState.title;//在相关的路由中添加title
        });
    }]); 

相关路由配置：

$stateProvider
    .state("index",{
        url:"/index",
        views: {
                '': {
                    templateUrl: 'views/home/index.html'
                },
                'main@index': {
                    templateUrl: 'views/home/navigation.html'
                }
            },
        title: '科普·羊城微网站'
    })
    // 资讯动态
    .state("index.news",{
        url:"/news",       
        views: {
                'main@index': {
                    templateUrl: 'views/modules/news/news.html',
                    controller: 'newsCtrl',
                    resolve: {
                        loadCtrl: ["$q", function($q) { 
                            var deferred = $q.defer();
                            //异步加载controller／directive/filter/service
                            require([
                                'directives/myDirective',
                                'filters/sexFilter',
                                'controller/newsCtrl'
                                ], function() { deferred.resolve(); });
                             return deferred.promise;
                        }]
                    },
                }
            },
        title: '资讯动态'
    })

index.html:

<!--给页面title绑定数据，实现动态改变页面title-->
<title ng-bind="title"></title>