社区首页 >问答首页 >angularjs用户界面路由器-如何构建跨应用程序的全局主状态

问angularjs用户界面路由器-如何构建跨应用程序的全局主状态
EN

Stack Overflow用户

提问于 2013-05-09 17:50:29

回答 3查看 47K关注 0票数 58

<html ng-app="app">
<head>
...
</head>
<body>
  <div id="header"></div>
  <div id="notification"></div>
  <div id="container"></div>
  <div id="footer"></div>
</body>
</html>

与app的给定结构(派生自角-app)：

标题:在这里，站点导航，登录/退出工具栏等进来。这是动态的，有自己的控制器
通知:全局通知容器。
容器:这曾经是我的<ng-view>。因此，这是所有其他模块加载的地方。
全球页脚。

州层次结构是什么样的？我已经看过这个例子，它显示了一个模块(联系人)，但是通常一个应用程序会有一个全局(根)状态，而在根状态内，其他模块状态会呈现出来。

我想的是，我的app模块可能有root状态，然后每个模块都应该有自己的状态，我必须继承root状态。我说的对吗？

另外，从ui-state示例中，他们使用了$routeProvider和$urlRouterProvider，以及$stateProvider定义的url。我的理解是$stateProvide也处理路由。如果我错了，我应该使用哪个提供者进行路由？

编辑：http://plnkr.co/edit/wqKsKwFq1nxRQ3H667LU?p=preview

谢谢!

angularjs

angular-ui

回答 3

Stack Overflow用户

回答已采纳

发布于 2013-05-14 23:18:33

你在你的柱塞里所采取的方法是接近的。@ben的解决方案演示了如何为三个本质上是静态的视图在根状态设置默认值。柱塞中缺少的是您的子状态仍然需要引用顶部容器视图。

   .state('root',{
      url: '',
      views: {
        'header': {
          templateUrl: 'header.html',
          controller: 'HeaderCtrl'
        },
        'footer':{
          templateUrl: 'footer.html'
        }
      }
    })
    .state('root.about', {
      url: '/about',
      views: {
        'container@': {
          templateUrl: 'about.html'
        }
      }
    });

注意views: { 'container@': ...}而不是'root.about'中的templateUrl: ...

您可能还会问的是，您是否可以让模块定义自己的状态集，然后将其附加到应用程序的状态层次结构中。每一个模块提供的路由/状态的一种即插即用。

为了实现这一点，您将需要将模块紧密地耦合到您的主应用程序中。

在模块中：

angular.module('contact', ['ui.router'])
  .constant('statesContact', [
      { name: 'root.contact',
        options: {
          url: 'contact',
          views: {
            'container@': {
              templateUrl: 'contacts.html'
            }
          },
          controller:'ContactController'
      }}
    ])
  .config(['$stateProvider', function($stateProvider){    
  }])

然后，在应用程序中：

var app = angular.module('plunker', ['ui.router', 'contact']);
app.config(       ['$stateProvider', 'statesContact', 
           function($stateProvider,   statesContact){
    $stateProvider
    .state('root',{ ... })
    .state('root.home', { ... })
    .state('root.about', { ... })
    angular.forEach(statesContact, function(state) {
      $stateProvider.state(state.name, state.options);
    })      
}]);

这意味着您的所有模块将需要兼容这个模式在您的应用程序。但是如果你接受这个约束，你可以选择包含模块的任意组合，它们的状态神奇地被添加到你的应用程序中。如果您想获得更好的效果，可以在您的state.options.url循环中修改statesModuleName，例如，将模块的url结构作为前缀。

还请注意，只有当您从$routeProvider过渡到$stateProvider时，模块$stateProvider才是必需的。您通常应该使用ui.state代替。

也不要忘记在header.html $state.includes('root.contact')中进行调整)

更新柱塞

票数 53

Stack Overflow用户

发布于 2013-05-12 08:21:43

虽然令人困惑，但ui路由器wiki中的常见问题似乎表明这是不可能的：ui-路由器/wiki/常见问题解答。

一种方法是允许每个特性定义自己的根状态(如本例中的基于ui路由器的AngularJS状态管理)。

另一种方法是在"myApp“模块中定义整个状态层次结构，并仅利用依赖模块中的控制器等。当您维护一个移动和桌面站点时，这一点尤其有效；在mobileApp和desktopApp模块中定义每个站点的状态层次结构，并具有相应的功能(例如控制器、服务等)。共享在单独的模块中。

票数 5

Stack Overflow用户

发布于 2013-05-11 04:56:32

这取决于你喜欢如何接近它。

所有作用域都是从rootScope继承的，因此您可以将全局状态放在那里。NG 文学作品特别提到，您只应该将全局状态放在那里，而不应该放在功能上。跨系统所需的功能属于服务，具体而言，您不应该实现其唯一目的是保留状态的服务。所有的建议似乎都被隐式地分享了，因为它如何方便或妨碍您轻松地进行端到端测试的能力。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/16473952

复制

如何构建全局用户价值视角

mvp

二战时期，美国空军为了加强战斗机的保护措施，对参战飞机中弹区域进行了详细统计，结果显示如下图所示。机翼部位中弹最密集，而机舱部位最少中弹。军方决定对飞机机翼进行加固，但一名统计学家站出来反对。他表示真正需要加固的是机舱，因为机舱中弹的飞机大概率无法返航，才导致了这样的统计结果。最终军方采纳了他的意见，战斗机坠毁率果然降低。

TestOps

2022/04/07

3630