angularjs ui-router-如何建立跨应用程序全局的主状态

贺子昂

2023-03-14

问题内容：

<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）：

标头：这里是网站导航，登录/退出工具栏等。它是动态的，具有自己的控制器
notification：全局通知容器。
容器：这曾经是我的<ng-view>。这就是所有其他模块的加载位置。
页脚：全局页脚。

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

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

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

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

谢谢！

问题答案：

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

   .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')）

更新的插头

angularjs ui-router-如何建立跨应用程序全局的主状态

相关阅读

相关文章

相关问答

相关工具

相关文档