Question

我是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

Answer 1

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

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

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

Answer 2

Angular有点讨厌调试，但一旦你发现它不是一个大问题。

在Chrome中，打开开发人员工具，刷新页面，您将收到来自角色来源的错误消息（在“来源”标签中）。

在那里放置一个断点，再次刷新，然后你将在右边有一个完整的调用堆栈。现在，您将能够单击调用堆栈中的先前步骤来检查变量值等。

Answer 3

像下面一样更改你的代码。 angularmodule.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，因此您的customers.js文件应该像

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

在Angular中最好在App根模块中使用所有路由。所以在angularmodoule.js中添加路由

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

Answer 4

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

无法模块化AngularJS应用程序

4 个答案: