AngularJS - 如何在多个目录中自动加载js控制器以在主模块中注册？

Posted 2021-03-26

脚本

我想自动加载我的AngularJS控制器，而不必手动将它们包含在主html文件中，这样当我在路由配置文件中引用它们时，它们将成功注册。

如何在不增加太多复杂性的情况下以最简单的方式自动加载控制器？

目录结构/代码

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

答案

这是许多大型项目的共同需求，其中为了清晰和可读性，将正确设计的项目分解为许多文件。

为了实现这一点，许多人（包括我）使用gulp或grunt将文件编译成一个文件。

https://gulpjs.com/

可以将这些技术配置为递归地查看文件夹（如果需要，可以使用异常），并在文件更改时重新编译。在您的应用程序中，您只需要包含已编译的文件，该文件将在您添加文件时更新并对原始代码文件进行更改。

另一答案

使用以下目录结构和代码，我修改为在ActionController中使用ocLazyLoad.js。但这导致控制器（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>