angularjs ui-router – 如何构build跨应用程序的全局主状态
<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度应用程序派生）：
- 标题：这里的网站导航，login/外出工具栏等进来。这是dynamic的，并有它自己的控制器
- 通知：全局通知容器。
- 容器：这曾经是我的
<ng-view>。 所以这是所有其他模块加载的地方。 - 页脚：全球页脚。
状态层次如何？ 我已经通过显示单个模块（联系人）的示例，但通常应用程序将具有全局（根）状态，并在根状态内呈现其他模块状态。
我在想什么是我的app模块可能有root状态，然后每个模块应该有它自己的状态，我必须从root状态inheritance 。 我对吗？
另外从ui-state例子，他们已经使用$routeProvider和$urlRouterProvider以及$stateProvider具有URL定义。 我的理解是$stateProvide也处理路由。 如果我错了，我应该使用哪个提供程序进行路由？
编辑 ： http : //plnkr.co/edit/wqKsKwFq1nxRQ3H667LU?p=preview
谢谢！
你在重击者身上的方法非常接近。 @ ben-schwartz的解决scheme演示了如何为三个基本静态视图设置默认的根状态。 你的plunker中缺less的东西是你的孩子状态仍然需要引用顶部的容器视图。
.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); }) }]);
这意味着您的所有模块都需要与您的应用中设置的这种模式兼容。 但是，如果你接受这个约束，你可以select包含你的模块的任何组合，他们的状态魔术般地被添加到你的应用程序。 如果你想更state.options.url ，你可以在你的statesModuleName循环中修改state.options.url ，例如，在模块的url结构前statesModuleName 。
另外请注意，只有当您从$routeProvider 转换到$routeProvider时，模块ui.compat才是必需的。 你通常应该使用ui.state来代替。
另外不要忘记调整在header.html $state.includes('root.contact') ）
更新的重击
虽然令人困惑，但ui-router wiki中的FAQ似乎是说这是不可能的： ui-router / wiki / faq
一种方法是允许每个function定义它自己的根状态（如在这个例子中： 使用ui路由器的AngularJS状态pipe理 ）
另一种方法是在“myApp”模块中定义整个状态层次结构，并利用从属模块中的控制器等。 当您维护移动和桌面版网站时，这种方法尤其有效; 在mobileApp和desktopApp模块中定义每个站点的状态层次结构，并将function（例如控制器，服务等）在单独的模块中共享。
这取决于你更喜欢接近它。
所有作用域都从rootScopeinheritance，因此您可以在其中放置全局状态。 NG 文献特别提到，你应该只把全球化放在那里，而不是function。 整个系统所需要的function属于服务，具体来说就是你不应该实现其唯一目的就是保留状态的服务。 所有的build议似乎都隐含地分享了它如何促进或阻碍你轻松进行端到端testing的能力。
- 如何防止angular-ui模式closures？
- 有缺陷的angular度ui bootstrap指令模板
- 如何将AngularUI集成到AngularJS？
- ui-bootstrap-tpls.min.js和ui-bootstrap.min.js有什么区别？
- 在AngularJS中使用AngularUI Bootstrap Modal的范围问题
- 如何通过$ http将angular-ui的typeahead与服务器绑定以进行服务器端优化？
- 无法在angularjs中获得textarea值
- 我应该使用Angular UI Bootstrap还是纯Bootstrap 3？
- ui.bootstrap.datepicker is-open无法在模态中工作
