在AngularJS中 - 为真正的SPA管理多个面板

Question

我正在使用AngularJS创建一个真正的SPA应用程序 - 只有一个视图。

对于应用程序的每个主要功能，将显示不同的面板（指令）。此外，还有一些常见的面板将在功能之间共享。下面是一个人为的例子。请注意，视图上有多个面板。

简短的问题是，当用户选择特定功能（航空公司，酒店，汽车）时，如何管理应显示和隐藏的所有不同面板？如果这是一个具有多个视图的应用程序，我将使用AngularJS路由，但不确定这是否适用于只有一个视图的应用程序。

要记住以下几点：

• 我的所有指令和服务应继续可测试
• 如果可能，我宁愿不使用$ broadcast进行沟通
• 应该能够使用URL路由

有没有关于如何解决这个问题的建议？

Answer 1

鉴于您如何使用ui-router标记此问题，表明您肯定是在正确的道路上。您可以使用multiple named views以干净的方式实现您所寻找的目标。

  

简短的问题是，当用户选择特定功能时   （航空公司，酒店，汽车）我如何管理所有不同的面板   应该显示和隐藏吗？

考虑到你将如何拥有3个基本状态，汽车/酒店/航空公司，那么当它处于活动状态时，您将只显示该状态的视图，默认情况下将为该状态显示多个子视图。查看基本的多个命名视图演示：

$stateProvider
  .state('cars',{
    views: {
      'carsFilter': {
        templateUrl: 'car-filters.html',//or a common filters templare shared by all your states
        controller: function($scope){}
      },
      'carsSearch': {
        templateUrl: 'car-search.html',
        controller: function($scope){}
      },
      'carDetails': {
        templateUrl: 'car-details.html',
        controller: function($scope){}
      },
    }
  })

您将拥有航空公司和酒店的州，因此处理状态变更并不值得担心，除非我没有完全理解您的要求;）

  

如果这是一个有多个视图的应用程序，我会使用AngularJS   路由，但不确定这是否适用于只有的应用程序   一种观点。

您的应用程序不是单一视图应用程序。你有那张地图（可能是你孩子各州共享的基本抽象州），你有航空公司/酒店/汽车的意见，以及过滤器/细节/搜索结果视图。