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>