すべてのページの変更/要求時にインスタンス化される角度サービス

Question

私はAngularJS (1.5)で私の最初のステップを踏んでおり、私はルートに基づいて私のレイアウトでいくつかのものを変更する機能を構築しようとしています。

私が理解する限り、私はこれのためにサービスが必要でした。基本的に私が持っている設定は次のとおりです。

'use strict'; 

/* App Module */ 

var app = angular.module('app', [ 
    'ngRoute', 
    'appControllers', 
    'AppServices' 
]); 

app.config(['$routeProvider', function($routeProvider) { 
    $routeProvider.when('/', { 
    template: '<h1>Home page</h1>', 
    controller: 'MainController' 
    }).when('/page', { 
    template: '<h1>Page</h1>', 
    controller: 'PagesController' 
    }).otherwise({ 
    redirectTo: '/' 
    }); 
}]); 
var appControllers = angular.module('appControllers', []); 

appControllers.controller('MainController', ['$rootScope', 'AppSetup', function($scope, AppSetup) { 
    $scope.app = AppSetup.build(); 
    console.log('home'); 
}]); 

appControllers.controller('PagesController', ['$rootScope', 'AppSetup', function($scope, AppSetup) { 
    AppSetup.setProperties({ 
    meta: { 
     title: 'My Second Page' 
    } 
    }); 
    console.log('page'); 
    $scope.app = AppSetup.build(); 
}]); 

var AppServices = angular.module('AppServices', []); 

AppServices.service('AppSetup', [function() { 
    var properties = { 
     meta: { 
     title: 'My App &bull; Best of the best' 
     } 
    }, 
    styles; 
    this.setProperties = function(input) { 
    this.properties = angular.extend(properties, input); 
    }; 
    //TODO: This will override app-wide styles. 
    this.setStyles = function(input) { 
    this.styles = angular.extend({}, input); 

    }; 
    this.build = function() { 
    return { 
     properties: properties, 
     styles: styles 
    }; 
    }; 
}]); 

Plunkr here

だから、私は1つの定義されpropertiesオブジェクトを持っていると私はページを訪問したときに、それを上書きしたいです。問題は、私が帰宅したときにデフォルト値を設定しないということです。明らかに、ページがロードされた後にインスタンス化され、変更されるまでは同じままになります。 これを行うにはどのような方法が最適ですか？

@Raul A.が提案したように、リスナーをルートに追加しようとしましたが、動作しません。コンソールからの出力：あなたがルーティングを使用している場合は$ routeChangeSuccessイベントを使用して、それを監視機能に変更を加えることができ

Plunkr here

Answer 1

：

$rootScope.$on("$routeChangeSuccess", function(currentRoute, previousRoute){ 
    //Do you changes here 
});