在每个页面更改/请求上实例化的角度服务

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

所以我有一个已定义的properties对象，并希望在我访问页面时覆盖它。问题是，当我回到家时，它没有设置默认值。显然，一旦页面加载就会实例化，然后在更改之前保持不变。 这样做的最佳方法是什么？

我试过在路由中添加一个监听器，正如@Raul A.建议的那样，但是它没有用。控制台输出：

Plunkr here

Answer 1

如果你正在使用路由并在观察它的函数中进行更改，你可以使用$ routeChangeSuccess事件：

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