angularjs ui-router - 如何构建跨应用程序全局的主状态 [英] angularjs ui-router - how to build master state which is global across app
问题描述
<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):
With the given structure of the app (derived from angular-app):
- header:这里有网站导航、登录/退出工具栏等.这是动态的，有自己的控制器
- notification:全局通知容器.
- 容器:这曾经是我的
- footer:全局页脚.
- header: Here the site navigation, login/out toolbar etc comes in. This is dynamic and has it's own Controller
- notification: Global notification container.
- container: This used to be my
<ng-view>. So this is where all other modules loads in. - footer: Global footer.
状态层次结构是什么样的?我已经完成了显示单个模块(联系人)的示例，但通常应用程序将具有全局(根)状态，并且在根状态内呈现其他模块状态.
How do the state hierarchy looks like? I've gone through the example which shows a single module (contacts) but typically an app would have a global (root) state and inside the root state other module states are rendered.
我在想的是我的 app 模块可能有 root 状态，然后每个模块都应该有它自己的状态，我必须继承em> 来自 root 状态.我说得对吗?
What I'm thinking is my app module probably have the root state and then each module should have it's own state and I have to inherit from root state. Am I right?
同样来自 ui-state 示例，他们同时使用了 $routeProvider 和 $urlRouterProvider 以及 $stateProvider 定义了 url.我的理解是 $stateProvide 也处理路由.如果我错了，我应该使用哪个提供商进行路由?
Also from ui-state example, they have used both $routeProvider and $urlRouterProvider as well as $stateProvider has url defined. My understand was $stateProvide also handles routing. If I'm wrong, which provider should I use for routing?
编辑:http://plnkr.co/edit/wqKsKwFq1nxRQ3H667LU?p=预览
谢谢！
推荐答案
您在 plunker 中采用的方法很接近.@ben-schwartz 的解决方案演示了如何在根状态中为三个基本静态视图设置默认值.您的 plunker 中缺少的是您的子状态仍然需要引用顶部容器视图.
The approach you took in your plunker is close. @ben-schwartz's solution demonstrates how you'd set defaults in your root state for the three essentially-static views. The thing missing in your plunker is that your child states still need to reference the top container view.
.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'>
Note views: { 'container@': ...} instead of just templateUrl: ... in 'root.about'
您可能还会问的是，您是否可以让模块定义自己的状态集，然后将其附加到应用程序的状态层次结构中.每个模块提供的路由/状态的一种即插即用.
What you may also be asking about is whether you can have modules define their own state-sets, which you then attach to your app's state hierarchy. A sort of plug-and-play for the routes/states each module provides.
要实现这一点，您需要将模块与主应用紧密耦合.
To achieve this you'll have tightly couple your modules to your main app.
在模块中:
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);
})
}]);
这意味着您的所有模块都需要与您的应用中设置的这种模式兼容.但是如果你接受这个限制，你就可以选择包含你的模块的任意组合，并且它们的状态神奇被添加到你的应用程序中.如果你想变得更有趣，你可以在你的 statesModuleName 循环中修改 state.options.url ，例如，为你的模块的 url 结构添加前缀.
This means all your modules will need to be compatible with this pattern set out in your app. But if you accept this constraint you can then choose include any combination of your modules, and their states magically get added to your app. If you want to get even fancier, you can modify state.options.url in your statesModuleName loop to, for example, prefix your module's url structure.
另请注意，模块 ui.compat 仅在您转换从 $routeProvider 到 $stateProvider.您通常应该使用 ui.state 代替.
Also note that the module ui.compat is only necessary when you are transitioning from $routeProvider to $stateProvider. You should normally use ui.state instead.
另外别忘了在 header.html 中调整 $state.includes('root.contact'))
Also don't forget to adjust in header.html $state.includes('root.contact'))
这篇关于angularjs ui-router - 如何构建跨应用程序全局的主状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
