Dynamic ui-router with ocLazyLoad using multiple m

问题:

SOLVED SEE BELOW!!!

Working from this question/solution Stackoverflow question .....

I edited the original question I posted here because it is no longer worth reading.

My problem was I could not find documentation on:

1. Using dynamic angular-ui-router;
2. That makes use of ocLazyLoad;
3. Had nested views the main controller did not need to know anything about;
4. And it facilitates the pursuit of building a REAL WORLD large-scale angular application comprising of a myriad of modules, many of which are simultaneously required in just one view, and again, often without the main controller of that view never needing to know anything about those nested views or how they work;
5. And! As a bonus, allow me to add those modules used by many states in some base state, so I would never need to load them again (this does not apply to services).

As example:

What if I had a page, called MyDashboard, that may contain typical info on something that MyDashboard would contain.

But what if I wanted to show graphs on that page, and I did not want MyDashboard controller to know about those graphs?

What if I had a To-Do list that I used throughout my app and did not want MyDashboard controller to know anything about those to-dos?

Is there a way I can add dependencies for nested views that MyDashboard controller need not know how they work, WHILE AT THE SAME TIME HAVE DYNAMIC STATE?

Is there a way I could, while creating ---DYNAMIC--- state views, just supplant those dependencies I needed for that view, often w/o the controller never needing to know anything about them?

I think the below is the best solution to creating a large scale REAL WORLD, agnostic, angular app, with dependencies loaded on a "need-to-have" basis.

I scoured ocombe's github for such a solution. You won't find it.

I offer the below 'Ronco-Automatic' solution to the community. It slices, it dices, it peels. I hope it helps you.

Post Script: This is not your father's 'Hello World' sappy example.

回答1:

You WILL NOT find this in the documentation:

define(['app'], function (app) {
 'use strict';

app.run(function ($q, $rootScope, $state, $window, MenuSvc) {
     // Typical call to my factory, of course does not have to be json
     MenuSvc.all().success(function (states) {
         angular.forEach(states, function (state) {
             try {
                 // This is where the magic occurs, so simple, but so hard
                 // to find documentation. :(
                 var result = [];
                 angular.forEach(state.dependencies, function (dependency) {
                     result.push({
                         "name" : dependency.module,
                         "files": dependency.files,
                        // this means to load the dependencies in order & not parellel
                        // especially important when you are loading css files dynamically
                         "serie" : true,
                         // cache in memory please
                         "cache" : true
                     })
                 });
                     // state.resolve is a function call of state ($stateProvider)
                     // [state.resolve] is the property 'resolve' of object 'state' in my json
                     state.resolve[state.resolve] = function ($ocLazyLoad) {
                         return $ocLazyLoad.load(result)
                     };
             } catch (e) {
                 console.log('Error: ' + e.message);
             }
             //$stateProviderRef is a global variable I declared in app.config, eg:
             //$urlRouterProviderRef = $urlRouterProvider;
             //$stateProviderRef = $stateProvider;
             //Remember: providers must be instantiated in config
             $stateProviderRef.state(state.name, state);
         })
         // You must designate default state in a dynamic ui-router in the app.run. Must!!
         // but this does not have to be hard-coded. You can do an if statement on a property
         // called, eg 'startUp" above and pass that state name below as a variable
         // eg. $state.go(startUp) which is designated above in the for each
         $state.go('app.MyDashboard');
     });
 }) });

My Json format:

[   {
"name": "app",
"abstract": true,
"url": "",
"views": {
  "root": {
    "templateUrl": "app/layout/views/tpl.layout.html",
    "controller": "LayoutCtrl as layout",
    "requiresAuthorization": true
  },
  "base@app": {
                "templateUrl": "app/layout/views/partials/tpl.base.html"
              // You can go wild and add controllers here and add them to
              // your dependencies below. Eg, My base has own modules different from root.
   },
  "header@app": {"templateUrl": "app/layout/views/partials/tpl.header.html"},
  "nav@app": {"templateUrl": "app/layout/views/partials/tpl.navigation.html"},
  "ribbon@app": {"templateUrl": "app/layout/views/partials/tpl.ribbon.html"}
},
"resolve": {},
"dependencies": [
  {
    "module": "app.Layout",
    "files": [
      "app/layout/controllers/LayoutCtrl.js",
      // Don't put comments like this in your json, but I discovered that you
      // can list controllers/directives once in a base module and all children modules will
      // inherit. HOWEVER, that isn't the case for svcs; they must be loaded where/when needed
      (all the needed controllers and directives for layout),
      (all the css files needed for layout)
    ]
  },
  {
    "module": "app.Graphs",
    "files": [
      //Don't put comments like this in your json, but I loaded these graphs
      //in layout as they will be used in various modules, so don't need to load again in app
      "app/dashboards/graphs/directives/inline/sparklineContainer.js",
      "app/dashboards/graphs/directives/inline/easyPieChartContainer.js"
    ]
  }
]   },   {
"name": "app.MyDashboard",
"views": {
  "content@app": {
    "templateUrl": "app/dashboards/_mydashboard/myDb/views/tpl.my.html",
    "controller": "MyDashboardCtrl as myDb",
    "requiresAuthorization": true
  }
},
"resolve": {},
"dependencies": [
  {
    "module": "app.MyDashboard",
    "files": ["app/dashboards/_mydashboard/myDb/controllers/MyDashboardCtrl.js"]
  },
  {
    "module": "app.ToDo",
    "files": [
      "app/dashboards/todo/controllers/TodoCtrl.js",
      "app/dashboards/todo/directives/todoList.js",
      // This svc needs to be loaded every where it is needed
      "app/dashboards/todo/services/ToDoSvc.js"
    ]
  }
]   } ]

It works !!!!!!!!!!!

回答2:

This solution , it's work for me
In config.lazyload.js

$ocLazyLoadProvider.config({
      debug:  false,
      events: true,
      modules: [
          {
              name:'angularFileUpload',
              files: [
                  baseUrl+'vendor/modules/angular-file-upload/2.3.4/angular-file-upload.min.js'
              ]
          },
          {
              name:'ngFileUpload',
              files: [
                  baseUrl+'vendor/modules/ng-file-upload/12.0.4/common.css',
                  baseUrl+'vendor/modules/ng-file-upload/12.0.4/ng-file-upload-shim.js',
                  baseUrl+'vendor/modules/ng-file-upload/12.0.4/ng-file-upload.js'
              ]
          }
      ]
  });

In config.router.js

.state('root.app.catalog.product', {
              url: '/product',
              templateUrl: adBaseUrl+'catalog_product.html',
              resolve: {
                  deps: ['$ocLazyLoad',
                    function( $ocLazyLoad ){
                      return $ocLazyLoad.load(['ngFileUpload','angularFileUpload']).then(
                        function(){
                          return $ocLazyLoad.load( [baseUrl+'js/controllers/product.js', 
                            baseUrl+'js/controllers/upload.js',
                            baseUrl+'js/controllers/file-upload.js'
                          ]);
                        }
                      )
                  }]
              }
          })

config.router.js will load 2 module ngFileUpload , angularFileUpload and all files defined from config.lazyload.js ,at here I can load 2 module and more if you want