如何：

Question

我需要能够为不同的路由指定不同的布局，最好我希望能够在路由配置中的对象中定义布局和其他参数，并让它们在路由更改时传播。

Answer 1

这是我在当前项目中解决它的方式。

找到工作演示here

如果您可以在$routeProvider.when(...)块中定义对象，如下所示：

路线定义：

  $routeProvider

    .when('/', {
      templateUrl: 'main.html',
      controller: 'MainCtrl',
      resolve: {
        interceptor: interceptWith('routeChangeInterceptor', {

          stateClass: {
            fullWidthLayout: true
          }

        })
      }
    });

让它们传播并使用它来添加类似于ng-class类接口的类，使用像这样的stateClass对象？

<强> HTML：

<body state-class="{'full-width-layout': fullWidthLayout}"> ... </body>

<div class="some-class" state-class="{'some-class': someValue}"> ... </div>

如何：

这是使用一个interceptWith(...)帮助器，它只是注入一个服务并用给定的参数调用它，但它也可以使用这样的数组符号实现

interceptor: ['serviceToInject', function(injectedService) { .. }];

只有这样才是干嘛。有关详细信息，请参阅演示。

用于从路由定义广播对象的服务：

//This interceptor is responsible for emiting an event on rootScope
  .factory('routeChangeInterceptor', ['$rootScope', function($rootScope) {

    var _prepare = function(state) {
      $rootScope.$broadcast('data:broadcast-state', state);  
    };

    return {
      prepare: _prepare
    };
  }]);

用于根据广播状态事件对象添加/删除类的指令如下所示：

//This directive receives and $parses object/classname mappings, 
//and it will add or remove the defined class for every mapping that is defined.

angular.module('broadcastState')
  .directive('stateClass', ['$parse', function ($parse) {

    var _linkFn = function link(scope, element, attrs) {

        scope.$on('data:broadcast-state', function(e, state) {

          //Set defaults
          state = state || {};
          state.stateClass = state.stateClass || {};

          var classes = $parse(attrs.stateClass)(state.stateClass);

          angular.forEach(classes,function(value,className) {
            if(value && typeof value === 'boolean')
            {
              element.addClass(className);
            }
            else
            {
              element.removeClass(className);
            }

          });

        });
    }

    return {
      restrict: 'A',
      link: _linkFn
    };
  }]);

查看plnkr以了解更多信息。

Answer 2

看起来Angular团队的https://github.com/angular-ui/ui-router是最好的方法。

Answer 3

试试这个http://angular-route-segment.com/（AngularJS $ route服务的轻量级扩展，支持树状嵌套视图和路由，以及高级流处理）

如何在Angular JS中轻松实现多个布局？

3 个答案:

如何：

用于从路由定义广播对象的服务：

用于根据广播状态事件对象添加/删除类的指令如下所示：