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>

使用给定的应用程序结构（源自 angular-app）：

  • header：这里是站点导航、登录/退出工具栏等。这是动态的并且有它自己的控制器
  • 通知：全局通知容器。
  • 容器：这曾经是我的<ng-view>. 所以这是所有其他模块加载的地方。
  • 页脚：全局页脚。

状态层次结构如何？我已经浏览了显示单个模块（联系人）的示例，但通常应用程序将具有全局（根）状态，并且在根状态内呈现其他模块状态。

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

同样来自ui-state示例，他们既使用了url$routeProvider也$urlRouterProvider定义$stateProvider了 url。我的理解$stateProvide也是处理路由。如果我错了，我应该使用哪个提供商进行路由？

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

谢谢！

4

3 回答 3

53

您在 plunker 中采用的方法很接近。@ben-schwartz 的解决方案演示了如何在根状态下为三个基本静态视图设置默认值。您的 plunker 中缺少的东西是您的子状态仍然需要引用顶部容器视图。

   .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@': ...}而不是仅仅templateUrl: ...在'root.about'

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

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

在模块中：

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 结构添加前缀。

另请注意，该模块ui.compat仅在您从过渡$routeProvider到时才需要$stateProvider。您通常应该ui.state改用。

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

更新plunker

于 2013-05-15T07:18:33.203 回答
5

虽然令人困惑，但 ui-router wiki 中的常见问题解答似乎说这是不可能的：ui-router/wiki/faq

一种方法是允许每个特性定义它自己的根状态（如本例中：AngularJS State Management with ui-router）

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

于 2013-05-12T16:21:43.930 回答
0

这取决于您喜欢如何处理它。

所有范围都从rootScope继承，因此您可以在那里放置全局状态。NG文献特别提到你应该只把全局状态放在那里，而不是功能。整个系统所需的功能属于服务，特别是您不应该实现其唯一目的是保留状态的服务。所有建议似乎都隐含在它如何促进或阻碍您轻松进行端到端测试的能力的上下文中。

于 2013-05-11T12:56:32.627 回答