ui-router động với ocLazyLoad bằng cách sử dụng nhiều mô-đun trong giải quyết

Question

GIẢI QUYẾT XEM DƯỚI ĐÂY !!!

Làm việc từ câu hỏi này/giải pháp Stackoverflow question .....

Tôi chỉnh sửa các câu hỏi ban đầu tôi được đăng ở đây vì nó không còn đáng đọc.

Vấn đề của tôi là tôi không thể tìm thấy tài liệu về:

1. Sử dụng động góc-ui-router;
2. Điều đó sử dụng ocLazyLoad;
3. Đã có chế độ xem lồng nhau bộ điều khiển chính không cần biết gì về;
4. Và nó tạo điều kiện cho việc theo đuổi xây dựng một ứng dụng góc rộng quy mô lớn bao gồm vô số mô-đun, nhiều mô-đun được yêu cầu đồng thời chỉ trong một chế độ xem và thường không có bộ điều khiển chính của chế độ xem đó cần phải biết bất cứ điều gì về những quan điểm lồng nhau hoặc cách chúng hoạt động;
5. Và! Là một tiền thưởng, cho phép tôi thêm các mô-đun được sử dụng bởi nhiều tiểu bang ở một số trạng thái cơ sở, vì vậy tôi sẽ không bao giờ cần tải lại chúng (điều này không áp dụng cho các dịch vụ).

Một ví dụ:

gì nếu tôi đã có một trang, được gọi là MyDashboard, có thể chứa thông tin tiêu biểu về một cái gì đó MyDashboard sẽ chứa.

Nhưng nếu tôi muốn hiển thị đồ thị trên trang đó, và tôi không muốn MyDashboard khiển biết về những đồ thị?

gì nếu tôi đã có một danh sách To-Do mà tôi sử dụng trong suốt ứng dụng của tôi và không muốn MyDashboard khiển phải biết gì về những công việc cần làm?

Có cách nào tôi có thể thêm phụ thuộc cho quan điểm lồng nhau rằng MyDashboard khiển không cần phải biết làm thế nào họ làm việc, KHI CÙNG LÚC CÓ NHÀ NƯỚC NĂNG ĐỘNG?

Có cách nào tôi có thể, đồng thời tạo --- --- xem NĂNG ĐỘNG nhà nước, chỉ cần thay thế những phụ thuộc tôi cần cho quan điểm đó, thường w/o bộ điều khiển không bao giờ cần phải biết gì về họ ?

Tôi nghĩ rằng đây là giải pháp tốt nhất để tạo ra một quy mô lớn REAL THẾ GIỚI, thuyết bất khả tri, ứng dụng góc, với sự phụ thuộc nạp trên "cần-to-có" cơ sở.

Tôi đã cọ rửa github của ocombe để có giải pháp như vậy. Bạn sẽ không tìm thấy nó.

Tôi cung cấp giải pháp 'Ronco-Automatic' bên dưới cho cộng đồng. Nó lát, nó dices, nó lột vỏ. Tôi hy vọng nó sẽ giúp bạn.

Viết tập lệnh: Đây không phải là ví dụ về 'Hello World' của bố bạn.

Answer 1

Bạn KHÔNG SẼ tìm thấy điều này trong tài liệu:

định dạng

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:

[ { 
"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" 
    ] 
    } 
] } ] 

Nó hoạt động !!!!!! !!!!!

Answer 2

Giải pháp này, nó làm việc cho tôi
Trong 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' 
       ] 
      } 
     ] 
    }); 

Trong 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 sẽ được tải 2 mô-đun ngFileUpload, angularFileUpload và tất cả các file định nghĩa từ config.lazyload.js, ở đây tôi có thể tải 2 mô-đun và nhiều hơn nữa nếu bạn muốn