<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
谢谢！
.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’))
