Question

应用

define(['angular', 'angular-ui-router', 'ocLazyLoad', 'config/common', 
        'layout/services/menuService'],

function(angular) {
    'use strict';
    var $stateProviderRef = null;
    var $urlRouterProviderRef = null;
    return  angular.module('app', ['ui.router', 'oc.lazyLoad', 'app.common', 'app.layout']);
});

的app.config

define(['app'],function(app){
app.config(function($locationProvider, $stateProvider, $urlRouterProvider, $ocLazyLoadProvider) {
    $urlRouterProviderRef = $urlRouterProvider;
    $stateProviderRef = $stateProvider;

    $urlRouterProviderRef.otherwise('/');
    $locationProvider.html5Mode({enable: true, requireBase: false}); //.hashPrefix('!');
    $ocLazyLoadProvider.config({
        events: true,
        debug: false
    });   }); });

app.run

define(['app'],function(app) {
app.run(function ($q, $rootScope, $state, $window, menuSvc) {
    menuSvc.all().success(function(viewStates) {
        var startUp = undefined;
        angular.forEach(viewStates, function(viewState, key){
            var viewStateUrl = undefined;
            if (viewState.isStartUp == true && startUp == undefined) {
                startUp = viewState.name;
            }

            var state = {
                "url": viewState.url,
                "name": viewState.name,
                "views": []
            }

            angular.forEach(viewState.views, (function(view) {
                var myView = {
                    "controller" : view.controller,
                    "templateUrl" : view.templateUrl,
                    "resolve" : { }
                };

                myView.resolve.loadController = function($ocLazyLoad)
                {
                    return $ocLazyLoad.load(
                        {
                            "name": view.moduleName,
                            "files": view.controllerFiles
                        })
                };

                state.views[view.viewName] = myView ;
            }));

            $stateProviderRef.state(viewState.name, state);
        })
        $state.go(startUp);
    })
}); });

解决：

错误是在各个方面的组合。完整的解决方案如下。我对下面提到的这个结果的解决方案并不满意并欢迎提出想法。基本上我会更喜欢将解决方法与app.run文件中的状态更加不可知的绑定。

Answer 1

我有这个工作，虽然我对代码不太满意，我会在最后解释。首先，我从Stackoverflow Prior Question

找到了解决方案的路径

<强> 1。 app.js

我从上面做的唯一更改是添加ShellCtrl位置：

define(
[
    'angular', 'angular-ui-router', 'ocLazyLoad', 'config/common',
    'layout/services/menuService', 'layout/controllers/ShellCtrl'],

    .....

<强> 2。的app.config：

上面没有任何改变。

第3。 app.run

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。以此为输出：

enter image description here

我不喜欢的内容：

我的信息中心的所有组件都是可互换的。没有什么是静态的。根据“整体”视图，页眉，页脚，侧面菜单和内容都会更改。我上面提到的链接只有一个可互换的部分，我认为这个特征是主要内容。

我不喜欢这样一个事实：我必须对app.run中的每个视图进行硬编码，而不是将解析绑定到每个视图。

如果有人知道如何让这更加不可知，我会非常感谢你的投入。

Answer 2

我的信息中心的所有组件都是可互换的。没有什么是静态的。取决于＆＃34;整体＆＃34;视图，页眉，页脚，SideMenu和内容都发生了变化。我上面提到的链接只有一个可互换的部分，＆＃34;功能＆＃34;我认为这是主要内容。

我不喜欢这样一个事实：我必须对app.run中的每个视图进行硬编码，而不是将解析绑定到每个视图。

如果有人知道如何让这更加不可知，我会非常感谢你的投入。

为了使这个更加不可知，你可以实现更多的内容。使用对象属性迭代每个属性并尝试加载到相应的解析中。添加更多错误处理和检查也有助于稳定性。

第3。 app.run

define(['app'],function(app) { app.run(function ($q, $rootScope, $state, $window, menuSvc) { menuSvc.all().success(function(states) { angular.forEach(states, function (state) {> try{ /// try to load for each each view for (var view in state.views) { if (state.views[view]['data']){ state.views[view].resolve[state.views[view].data.controllerAlias] = function($ocLazyLoad){ return $ocLazyLoad.load({ "name": state.views[view].data.controllerAlias, "files": state.views[view].data.controllerFiles } )}; } } }catch(e){ } console.log(state); $stateProviderRef.state(state.name, state); }) $state.go('app.dashboard'); }) }); });

AngularJS，ocLazyLoad＆amp;加载动态状态

2 个答案: