AngularJS，ocLazyLoad＆安培;加载动态国 [英] AngularJS, ocLazyLoad & loading dynamic States

问题描述

应用

 定义（['角'，'角UI路由器，ocLazyLoad，配置/通用，
        布局/服务/ menuService']，功能（角）{
    使用严格的;
    变量$ stateProviderRef = NULL;
    变量$ urlRouterProviderRef = NULL;
    返回angular.module（'应用'，['ui.router'，'oc.lazyLoad'，'app.common'，'app.layout']）;
}）;
 

的app.config

 定义（['应用']，功能（应用程序）{
的app.config（函数（$ locationProvider，$ stateProvider，$ urlRouterProvider，$ ocLazyLoadProvider）{
    $ urlRouterProviderRef = $ urlRouterProvider;
    $ stateProviderRef = $ stateProvider;    $ urlRouterProviderRef.otherwise（'/'）;
    $ locationProvider.html5Mode（{启用：真，requireBase：假}）; //散列preFIX（！）;
    $ ocLazyLoadProvider.config（{
        事件：真实，
        调试：假的
    }）; }）; }）;
 

app.run

 定义（['应用']，功能（应用程序）{
app.run（函数（$ Q $ rootScope，$状态，$窗口，menuSvc）{
    menuSvc.all（）。成功（功能（viewStates）{
        VAR启动=不确定;
        angular.forEach（viewStates，功能（视图状态，键）{
            VAR viewStateUrl =不确定;
            如果（viewState.isStartUp ==真＆放大器;＆功放;启动==未定义）{
                启动= viewState.name;
            }            VAR状态= {
                URL：viewState.url，
                名：viewState.name，
                意见：[]
            }            angular.forEach（viewState.views，（功能（视图）{
                VAR MyView的= {
                    控制器：view.controller，
                    templateUrl：view.templateUrl，
                    解决：{}
                };                myView.resolve.loadController =功能（$ ocLazyLoad）
                {
                    返回$ ocLazyLoad.load（
                        {
                            名：view.moduleName，
                            文件：view.controllerFiles
                        }）
                };                state.views [view.viewName] = MyView的;
            }））;            $ stateProviderRef.state（viewState.name，状态）;
        }）
        $ state.go（启动）;
    }）
}）; }）;
 

解决：

在区域组合的错误。完整的解决方案如下。我不像下面提到和欢迎的想法感到高兴的解决了这一结果。基本上，我将有preferred更不可知的app.run文件到我的国家的决心方法的结合。

解决方案

我有这方面的工作，虽然我没有与code很高兴，我会在最后解释。首先，我发现了一个路径，从这个<一个我的解决方案href=\"http://stackoverflow.com/questions/26630586/angularjs-dynamic-stateprovider-with-ui-router-views-and-oclazyload-resolves\">Stackoverflow在此之前的问题

1。 app.js

我从上面所做的唯一的变化是增加了ShellCtrl位置：

 定义（
[
    角，角UI路由器，ocLazyLoad，配置/通用，
    布局/服务/ menuService，布局/控制器/ ShellCtrl']，    .....
 

2。的app.config：

没有从上面的变化。

3。 app.run

 定义（['应用']，功能（应用程序）{
app.run（函数（$ Q $ rootScope，$状态，$窗口，menuSvc）{
    menuSvc.all（）。成功（功能（州）{
        angular.forEach（州，函数（州）{＆GT;
            尝试{
               ///的头
                state.views.header.resolve [state.views.header.data.controllerAlias​​] =
                 功能（$ ocLazyLoad）{
                    返回$ ocLazyLoad.load（{
                        名：state.views.header.data.controllerAlias​​，
                        文件：state.views.header.data.controllerFiles}）};               ///页脚
                state.views.footer.resolve [state.views.footer.data.controllerAlias​​] =                 功能（$ ocLazyLoad）{
                    返回$ ocLazyLoad.load（{
                        名：state.views.footer.data.controllerAlias​​，
                        文件：state.views.footer.data.controllerFiles}）};
            }赶上（E）{            }
            的console.log（州）;
            $ stateProviderRef.state（state.name，状态）;
        }）
      $ state.go（'app.dashboard'）;
    }）
}）; }）;
 

4。有了这个作为我的JSON：

  [{名：应用程序，抽象：真实的，URL：，templateUrl：应用程序/布局/视图/ tpl.shell。 HTML，控制器：ShellCtrl}，{
名：app.dashboard
意见：{
  头：{
    templateUrl：应用程序/布局/视图/ tpl.header.html
    控制器：HeaderCtrl的头，
    解决：{}，
    数据：{
      controllerAlias​​：app.layout，
      controllerFiles：[
        应用程序/布局/ layout.module.js
        应用程序/布局/控制器/ HeaderCtrl.js
      ]
    }
  }，
  页脚：{
    templateUrl：应用程序/布局/视图/ tpl.footer.html
    控制器：FooterCtrl为躯
    解决：{}，
    数据：{
      controllerAlias​​：app.layout，
      controllerFiles：[
        应用程序/布局/ layout.module.js
        应用程序/布局/控制器/ FooterCtrl.js
      ]
    }
  }
}}]
 

5。 Shell.html

 ＆LT; D​​IV数据-NG-控制器=ShellCtrl＆GT; {{shell.pageTitle}}
   ＆LT; D​​IV数据的用户界面视图=头＆GT;＆LT; / DIV＆GT;
   ＆LT; D​​IV数据的用户界面视图=页脚＆GT;＆LT; / DIV＆GT;
   ＆LT; / DIV＆GT;
 

6样品控制器：

  angular.module（'app.layout'）控制器（'HeaderCtrl'，HeaderCtrl）;/ * * @ngInject /
功能HeaderCtrl（$范围）{
    VAR头=这一点;
    header.pageTitle ='响应来自HeaderCtrl未来';
}
 

7。以此为输出：

我不喜欢的：

我的仪表板的所有组件是可以互换的。没有什么是一成不变的。根据整体的观点，页眉，页脚，SideMenu和内容都在改变。我上面提到的链接只有1更换的零件，特征，我认为是主要内容。

我不喜欢的事实，我在我的app.run相对于每个视图只好硬code的决心绑定到每个

如果有人知道我怎么能做出这种更不可知，我将不胜AP preciate输入。

app

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);
    })
}); });

Solved:

The error was in a combination of areas. The complete solution is below. I am not happy about the solution to this outcome as mentioned below and welcome ideas. Basically I would have preferred a more agnostic binding of the resolve method to my states in the app.run file.

解决方案

I have this working, although I am not quite happy with the code and I will explain at the end. First off, I found a path to my solution from this Stackoverflow Prior Question

1. app.js

The only change I made from above was to add the ShellCtrl location:

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

    .....

2. app.config:

Nothing changed from above.

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. With this as my 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 Sample Controller:

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

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

7. With this as the output:

What I do not like:

All components of my dashboard are interchangeable. Nothing is static. Depending on the "overall" view, the Header, Footer, SideMenu and Content all change. The link I mentioned above had only 1 interchangeable part, "the Feature" which I assume was main content.

I do not like the fact that I had to hard code each view in the my app.run relative to binding the resolve to each.

If someone knows how I can make this more agnostic, I would greatly appreciate input.

这篇关于AngularJS，ocLazyLoad＆安培;加载动态国的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！