AngularJS、ocLazyLoad与加载动态状态

Question

应用程序

定义(“角”、“角-ui-路由器”、“ocLazyLoad”、“config/公用”、“布局/服务/menuService”、函数(角){“使用严格”；var $stateProviderRef =空；var $urlRouterProviderRef =空；返回angular.module('app‘、’ui.roub‘、'oc.lazyLoad’、‘app.public’、'app.layout')；}；

app.config

定义(‘app’，function(app){ app.config(函数($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

定义(‘app’，函数(App){app.run(函数($q，$rootScope，$state，$window，menuSvc) ){menuSvc.all().success(函数(ViewStates)){ var startUp =未定义；} var state ={ "url"：viewState.url，"name"：viewState.name，“view”：[] } angular.forEach(viewState.views，(函数(视图)){ var myView ={“myView”：view.controller，"templateUrl“：view.templateUrl，”解决“：{ }；myView.resolve.loadController =函数($ocLazyLoad){返回$ocLazyLoad.load( {“名称”：view.moduleName，“文件”：view.controllerFiles }) }；( state.viewsview.viewName = myView；})；$stateProviderRef.state(viewState.name，state)；}) $state.go(startUp；})；})；

解决：

这一错误发生在多个领域。完整的解决方案如下。我对下面提到的解决这一结果的办法感到不高兴，并欢迎各种想法。基本上，与app.run文件中的状态相比，我更倾向于对解决方法进行不可知的绑定。

Answer 1

我有这方面的工作，虽然我对代码不太满意，我将在最后解释。首先，我从这个Stackoverflow Prior Question找到了一条通往我的解决方案的途径

1. app.js

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

定义(“角”、“角-ui-路由器”、“ocLazyLoad”、“config/公用”、“布局/服务/menuService”、“布局/控制器/ShellCtrl”，.

2. app.config:

从上面什么都没有改变。

3. app.run

定义(‘app’，函数(App){app.run(函数($q，$rootScope，$state，$window，menuSvc) ){menuSvc.all().success(函数(状态)){angular.forEach(状态)，函数(状态) {>尝试{/用于头state.views.header.resolvestate.views.header.data.controllerAlias =函数($ocLazyLoad){返回$ocLazyLoad.load({“名称”：state.views.header.data.controllerAlias )，“档案”：state.views.header.data.controllerFiles}}；/用于页脚state.views.footer.resolvestate.views.footer.data.controllerAlias =函数($ocLazyLoad){返回$ocLazyLoad.load({“名称”：state.views.footer.data.controllerAlias，“file”：state.views.footer.data.controllerFiles})}；}catch(e){ } console.log(state)；$stateProviderRef.state(state.name，state)；}) $state.go(‘app.dashboard’；})；}；}；

4.将此作为JSON:

[{“名称”：“应用”、“摘要”：真、"url"："templateUrl"：“app/layout/views/tpl.shell.name”、“控制器”："ShellCtrl“}、{”名称“："app.dashboard”、“视图”：{“app.dashboard”：{ "templateUrl"：“app/templateUrl/视图/tpl.head er.html”、“控制器”："HeaderCtrl as header"，“解析”：{}，“数据”：{ "controllerAlias"："app.layout"，"controllerFiles"：“app/Layout.module.js”，“app/layout/controller/HeaderCtrl.js”}，"templateUrl"：{“templateUrl”："app/layout/views/tpl.footer.html"，“控制器”："FooterCtrl作为页脚“，“解析”：{}，“数据”：{ "controllerAlias"："app.layout"，"controllerFiles"：“app/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.将此作为输出：

​

​

我不喜欢的：

我的仪表板的所有组件都是可互换的。没有什么是静止的。根据“总体”视图，页眉、页脚、SideMenu和内容都会发生变化。我上面提到的链接只有一个可互换的部分，“特性”，我认为这是主要内容。

我不喜欢这样一个事实:我不得不硬编码我的app.run中的每个视图，而不是将决心绑定到每个视图。

如果有人知道我如何使这个更加不可知论，我将非常感谢投入。

Answer 2

我的仪表板的所有组件都是可互换的。没有什么是静止的。根据“总体”视图，页眉、页脚、SideMenu和内容都会发生变化。我上面提到的链接只有一个可互换的部分，“特性”，我认为这是主要内容。 我不喜欢这样一个事实:我不得不硬编码我的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');
     })
 }); });