AngularJS、ocLazyLoad 和加载动态状态

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 文件中的状态进行更加不可知的绑定(bind)。

Answer 1

我已经完成了这个工作，尽管我对代码不太满意，我会在最后解释。首先，我从这个Stackoverflow Prior Question找到了解决方案的路径。

<强>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 示例 Controller :

   angular.module('app.layout').controller('HeaderCtrl', HeaderCtrl);

/* @ngInject */
function HeaderCtrl($scope) {
    var header = this;
    header.pageTitle = 'Response coming from HeaderCtrl';
}

7.以此作为输出:

我不喜欢什么:

我的仪表板的所有组件都是可以互换的。没有什么是静态的。根据“整体” View ，页眉、页脚、侧边菜单和内容都会发生变化。我上面提到的链接只有 1 个可互换的部分，即“功能”，我认为它是主要内容。

我不喜欢这样的事实:相对于将解析绑定(bind)到每个 View ，我必须对 app.run 中的每个 View 进行硬编码。

如果有人知道我如何才能使其更加不可知，我将不胜感激。