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