无法模块化AngularJS应用程序

Cannot modularize AngularJS application

本文关键字：应用程序 AngularJS 模块化      更新时间：2023-09-26

我是AngularJS路由的新手，所以这听起来可能是个小问题。

我正在开发一个AngularJS应用程序，其中有很多控制器。为了将我的控制器保存在单独的JS文件中，我决定为每个控制器创建单独的模块。

这是我在angularmodule.js文件中的主要模块。

        var app = angular.module('adminpanel', ['ngRoute', 'CustomersModule', 'ngFileUpload', 'wysiwyg.module', 'ui.bootstrap']).config(function ($routeProvider) {

        $routeProvider.
                when('/customers', {controller: CustomersCtrl, templateUrl: '/app/webroot/jakiamun/easybooks_admin/views/customers.html'}).
                otherwise({redirectTo: '/dashboard'});
        ;
    });

这是customers.js文件中的第二个模块

angular.module('CustomersModule',[])
.config(function ($routeProvider) {

        $routeProvider.
                when('/customers', {controller: CustomersCtrl, templateUrl: '/app/webroot/jakiamun/easybooks_admin/views/customers.html'}).
                otherwise({redirectTo: '/dashboard'});
        ;
    })
.controller("CustomersCtrl" ,function($scope, $rootScope, $http) {

});

在我的html页面中，我包含了类似的脚本

    <script src="<?php echo base_url(); ?>/assets/js/angular.min.js"></script>
      <script src="<?php echo base_url(); ?>/assets/js/angular-route.min.js"></script>
      <script src="<?php echo base_url(); ?>/assets/js/ng-file-upload-shim.min.js"></script> <!-- for no html5 browsers support -->
      <script src="<?php echo base_url(); ?>/assets/js/ng-file-upload.min.js"></script>  
        <script src="<?php echo base_url(); ?>/assets/js/bootstrap-colorpicker-module.min.js"></script>           
      <script src="<?php echo base_url(); ?>/assets/js/angular-wysiwyg.min.js"></script>
      <script src="<?php echo base_url(); ?>/assets/js/ui-bootstrap-tpls-1.1.2.min.js"></script>
      <script src="<?php echo base_url(); ?>/assets/js/controllers/customers.js"></script>
      <script src="<?php echo base_url(); ?>/assets/js/angularmodule.js"></script>

我已经在html代码的body标记中编写了ng-app='adminpanel'。

当我运行应用程序时，我会得到$injector:modulerr。

完整错误报告

Failed to instantiate module adminpanel due to:
ReferenceError: CustomersCtrl is not defined
at http://localhost:8088/app/webroot/jakiamun/easybooks_admin//assets/js/angularmodule.js:9:53
at Object.e [as invoke] (http://localhost:8088/app/webroot/jakiamun/easybooks_admin//assets/js/angular.min.js:40:477)
at d (http://localhost:8088/app/webroot/jakiamun/easybooks_admin//assets/js/angular.min.js:39:148)
at http://localhost:8088/app/webroot/jakiamun/easybooks_admin//assets/js/angular.min.js:39:272
at n (http://localhost:8088/app/webroot/jakiamun/easybooks_admin//assets/js/angular.min.js:7:344)
at g (http://localhost:8088/app/webroot/jakiamun/easybooks_admin//assets/js/angular.min.js:39:49)
at fb (http://localhost:8088/app/webroot/jakiamun/easybooks_admin//assets/js/angular.min.js:42:360)
at c (http://localhost:8088/app/webroot/jakiamun/easybooks_admin//assets/js/angular.min.js:19:421)
at zc (http://localhost:8088/app/webroot/jakiamun/easybooks_admin//assets/js/angular.min.js:20:225)
at be (http://localhost:8088/app/webroot/jakiamun/easybooks_admin//assets/js/angular.min.js:19:41

在主应用程序的config中，它还不知道您的控制器CustomersCtrl。

您可以使用控制器名称来定义路由。

$routeProvider. when('/customers', {controller: "CustomersCtrl", templateUrl: '/app/webroot/jakiamun/easybooks_admin/views/customers.html'}). otherwise({redirectTo: '/dashboard'}); ;

Angular调试起来有点烦人，但一旦你发现它并不是什么大问题。

在Chrome中，打开开发人员工具，刷新页面，你会收到一条直接来自angular源代码的错误消息（在"源代码"选项卡中）。

在那里放一个断点，再次刷新，然后你会在右边看到完整的调用堆栈。现在，您可以点击调用堆栈中的前几步来检查变量值等。

如下所示更改代码。angular模块.js文件。

var app = angular.module('adminpanel', ['ngRoute', 'ngFileUpload', 'wysiwyg.module', 'ui.bootstrap'])
.config(function ($routeProvider) {
$routeProvider.
            when('/customers', {controller: CustomersCtrl, templateUrl: '/app/webroot/jakiamun/easybooks_admin/views/customers.html'}).
            otherwise({redirectTo: '/dashboard'});
    ;
})

您的脚本顺序应该是这样的。

<script src="<?php echo base_url(); ?>/assets/js/angular.min.js"></script>
<script src="<?php echo base_url(); ?>/assets/js/angular-route.min.js"></script>
<script src="<?php echo base_url(); ?>/assets/js/ng-file-upload-shim.min.js"></script> <!-- for no html5 browsers support -->
<script src="<?php echo base_url(); ?>/assets/js/ng-file-upload.min.js"></script>  
<script src="<?php echo base_url(); ?>/assets/js/bootstrap-colorpicker-module.min.js"></script>           
<script src="<?php echo base_url(); ?>/assets/js/angular-wysiwyg.min.js"></script>
<script src="<?php echo base_url(); ?>/assets/js/ui-bootstrap-tpls-1.1.2.min.js"></script>
<script src="<?php echo base_url(); ?>/assets/js/angularmodule.js"></script>
<script src="<?php echo base_url(); ?>/assets/js/controllers/customers.js"></script>

而且你不需要定义模块，只需创建控制器扩展adminpanel，所以你的customer.js文件应该像一样

angular.module('adminpanel).controller("CustomersCtrl" ,function($scope, $rootScope, $http) {
});

在Angular中，最好使用应用程序根模块中的所有路由。所以在angularmoule.js 中添加路由

我没有调试这个答案，只是得到和想法，做你自己的风格！

您需要从controller: CustomersCtrl更改为controller: 'CustomersCtrl'。小心javascript语法！

相关文章：