angularjs ui路由器 – 如何建立主机状态,这是全球应用程序

发布时间：2020-12-17 09:05:39 所属栏目：安全来源：网络整理

导读：html ng-app="app"head.../headbody div id="header"/div div id="notification"/div div id="container"/div div id="footer"/div/body/html 使用应用程序的给定结构(从角度应用程序派生)： header：这里的网站导航，登录/输出工具栏等。这是动态的，并有自

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

使用应用程序的给定结构(从角度应用程序派生)：

> header：这里的网站导航，登录/输出工具栏等。这是动态的，并有自己的控制器
> notification：全局通知容器。
> container：以前是我的< ng-view>。所以这是所有其他模块加载。
> footer：Global footer。

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

我想的是我的应用程序模块可能有根状态，然后每个模块应该有自己的状态，我必须从根状态继承。我对吗？

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

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

谢谢！

你在你的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'
        }
      }
    });

注意视图：{‘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);
    })      
}]);

这意味着所有的模块将需要与您的应用程序中设置的模式兼容。但如果你接受这个约束，你可以选择包括你的模块的任何组合，他们的状态神奇地添加到你的应用程序。如果你想获得更多的功能，你可以在stateModuleName循环中修改state.options.url，例如，在模块的url结构前面加上。

还要注意，模块ui.compat只有当你从$ routeProvider转换到$ stateProvider时才需要。你通常应该使用ui.state。

也不要忘记调整header.html $ state.includes(‘root.contact’))

updated plunker

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!