我已经完成了这个工作,尽管我对代码不太满意,我会在最后解释。首先,我从中找到了解决方案的路径Stackoverflow 之前的问题 https://stackoverflow.com/questions/26630586/angularjs-dynamic-stateprovider-with-ui-router-views-and-oclazyload-resolves
1.app.js
我对上面所做的唯一更改是添加 ShellCtrl 位置:
define(
[
'angular', 'angular-ui-router', 'ocLazyLoad', 'config/common',
'layout/services/menuService', 'layout/controllers/ShellCtrl'],
.....
2.应用程序配置:
上面没有任何改变。
3. 应用程序运行
define(['app'],function(app) {
app.run(function ($q, $rootScope, $state, $window, menuSvc) {
menuSvc.all().success(function(states) {
angular.forEach(states, function (state) {>
try{
/// for the Header
state.views.header.resolve[state.views.header.data.controllerAlias] =
function($ocLazyLoad){
return $ocLazyLoad.load({
"name": state.views.header.data.controllerAlias,
"files": state.views.header.data.controllerFiles})};
/// for the Footer
state.views.footer.resolve[state.views.footer.data.controllerAlias] =
function($ocLazyLoad){
return $ocLazyLoad.load({
"name": state.views.footer.data.controllerAlias,
"files": state.views.footer.data.controllerFiles})};
}catch(e){
}
console.log(state);
$stateProviderRef.state(state.name, state);
})
$state.go('app.dashboard');
})
}); });
4.以此作为我的 JSON:
[ { "name": "app", "abstract": true, "url": "", "templateUrl": "app/layout/views/tpl.shell.html", "controller": "ShellCtrl" }, {
"name": "app.dashboard",
"views": {
"header": {
"templateUrl": "app/layout/views/tpl.header.html",
"controller": "HeaderCtrl as header",
"resolve": {},
"data": {
"controllerAlias": "app.layout",
"controllerFiles": [
"app/layout/layout.module.js",
"app/layout/controllers/HeaderCtrl.js"
]
}
},
"footer": {
"templateUrl": "app/layout/views/tpl.footer.html",
"controller": "FooterCtrl as footer",
"resolve": {},
"data": {
"controllerAlias": "app.layout",
"controllerFiles": [
"app/layout/layout.module.js",
"app/layout/controllers/FooterCtrl.js"
]
}
}
} }]
5.Shell.html
<div data-ng-controller="ShellCtrl">{{shell.pageTitle}}
<div data-ui-view="header"></div>
<div data-ui-view="footer"></div>
</div>
6 样品控制器:
angular.module('app.layout').controller('HeaderCtrl', HeaderCtrl);
/* @ngInject */
function HeaderCtrl($scope) {
var header = this;
header.pageTitle = 'Response coming from HeaderCtrl';
}
7. 以此作为输出:
我不喜欢什么:
我的仪表板的所有组件都是可以互换的。没有什么是静态的。根据“整体”视图,页眉、页脚、侧边菜单和内容都会发生变化。我上面提到的链接只有 1 个可互换的部分,即“功能”,我认为这是主要内容。
我不喜欢这样的事实:相对于将解析绑定到每个视图,我必须对 app.run 中的每个视图进行硬编码。
如果有人知道我如何才能使其更加不可知,我将不胜感激。