AngularJS - Как автоматически загружать контроллеры JS через несколько каталогов для регистрации в основном модуле?

Question

Sceneraio

Я хочу загрузить свои контроллеры AngularJS автоматически, без необходимости вручную включать их в основной html-файл, чтобы, когда я ссылаюсь на них в файле конфигурации маршрута, они успешно регистрировались.

Как автоматически загрузить контроллеры самым простым способом, не добавляя слишком много сложности?

Структура каталогов / Код

Bottom Содержимое index.html (точнее, index.php)

...
<script src="app/app.js"></script>
<script src="app/route-config.js"></script> 
</body>
</html>

app.js

angular.module('Main', ['ui.router', 'datatables', 'ngResource'])
    .controller('MainController', function(){
});  


angular.module('Action', ['Main']); 

маршрутный config.js

angular.module('Main').config(config);

function config($stateProvider, $urlRouterProvider)
{
    $urlRouterProvider
        .when('action', 'action')
        .when('issue',  'issue')
        .when('lesson', 'lesson')
        .when('opportunity', 'opporutnity')
        .when('risk', 'risk')
        .otherwise('main');


    $stateProvider
        .state('main', {
            url: "/main",
            //templateUrl: '/app/tool/home/home.html',
            controller: 'MainController'    
        });

     $stateProvider
        .state('action', {
            url: "/actionitems",
            templateUrl: '/app/tool/action/ActionItems.html',    
            controller: 'ActionController'  
        })

     $stateProvider
        .state('action.summary', {
            url: "/actionitems/all",
            templateUrl: '/app/tool/action/ActionItems.html',
            controller: 'ActionController'    
        })     
}

ActionController.js

angular.module('Action')
    .controller('ActionController', ActionController);

function ActionController($resource)
{
    $resource('actionitems.json').query().$promise.then(function(actionitems){
        this.all = actionitems;
    });
}

Answer 1

Это общая потребность для многих крупных проектов, где правильно разработанный проект будет разбит на множество файлов для ясности и читабельности.

Для этого многие (включая меня) используют gulp или grunt для компиляции файлов в один файл.

https://gulpjs.com/

Эти технологии можно настроить для просмотрапапку рекурсивно (за исключением при желании) и перекомпилировать при изменении файла.В вашем приложении вам нужно только включить скомпилированный файл, который будет обновляться по мере добавления файлов и внесения изменений в исходные файлы кода.

Answer 2

Используя следующую структуру каталогов и код, я изменил использование ocLazyLoad.js в своем ActionController. Но это привело к тому, что у контроллера (ActionController) в коде были голые функции.

Структура каталогов

Хотя желаемый результат достигнут, мне интересно, можно ли внести какие-либо улучшения или исправления.

ActionController.js

function GetActionItems($resource)
{
    return $resource('actionitems.json').query().$promise;
}

маршрутный config.js

function config($stateProvider, $urlRouterProvider)
{
    $urlRouterProvider
        .when('action', 'action')
        .when('issue',  'issue')
        .when('lesson', 'lesson')
        .when('opportunity', 'opporutnity')
        .when('risk', 'risk')
        .otherwise('main');


    $stateProvider
        .state('main', {
            url: "/main",
            //templateUrl: '/app/tool/home/home.html',
            controller: 'MainController'    
        });

     $stateProvider
        .state('action', {
            url: "/actionitems",
            templateUrl: '/app/tool/action/ActionItems.html',    
            controller: 'ActionController'  
        })

     $stateProvider
        .state('action.summary', {
            url: "/actionitems/all",
            templateUrl: '/app/tool/action/ActionItems.html',
            controller: 'ActionController'    
        })     
}

app.js

angular.module('Action', ['datatables', 'ngResource']);                               

var app = angular.module('Main', ['ui.router', 'oc.lazyLoad', 'datatables', 'ngResource', 'Action']);

app.config(['$ocLazyLoadProvider', '$stateProvider', '$urlRouterProvider', function($ocLazyLoadProvider, $stateProvider, $urlRouterProvider){
            config($stateProvider, $urlRouterProvider);
            $ocLazyLoadProvider.config({
                modules: [{
                    name: 'action',
                    files: ['app/tool/action/ActionController.js']
                }]
            });
}]).controller('MainController', function($ocLazyLoad){

}).controller('ActionController', function($ocLazyLoad, $resource, $scope){
      $ocLazyLoad.load(['action']).then(
        function(){
            GetActionItems($resource).then(function(results){
                  $scope.actionitems = results;    
            }); 
        });
});

ActionItems.html

<div ng-controller="ActionController">
   ActionItems
    <table datatables="ng">
         <thead>
            <tr>
                <th>
                    ID
                </th>
                <th>
                    ActionItemTitle
                </th>
                 <th>
                    Criticality
                </th>
                <th>
                    Assignor
                </th>
                <th>
                    Owner
                </th>
                <th>
                    AltOwner
                </th>
                <th>
                    Approver
                </th>
                <th>
                    AssignedDate
                </th>
                <th>
                    DueDate
                </th>
                <th>
                    ECD
                </th>
                <th>
                    CompletionDate
                </th>
                <th>
                    ClosedDate
                </th>
                <th>
                    Team
                </th>
                  <th>
                    Meeting
                </th>
                  <th>
                    Phase
                </th>
                  <th>
                    Source
                </th>
            </tr>
         </thead> 
         <tbody>
            <tr ng-repeat="actionitem in actionitems">
               <td>{{actionitem.id}}</td> 
               <td>{{actionitem.title}}</td> 
               <td>{{actionitem.criticality}}</td>
               <td>{{actionitem.assignor}}</td> 
               <td>{{actionitem.altowner}}</td> 
               <td>{{actionitem.approver}}</td> 
               <td>{{actionitem.assigneddate}}</td> 
               <td>{{actionitem.duedate}}</td> 
               <td>{{actionitem.ecd}}</td> 
               <td>{{actionitem.completiondate}}</td> 
               <td>{{actionitem.closeddate}}</td> 
               <td>{{actionitem.team}}</td> 
               <td>{{actionitem.meeting}}</td> 
               <td>{{actionitem.phase}}</td> 
               <td>{{actionitem.source}}</td> 
            </tr>
         </tbody>     
    </table>
</div>