無法模塊化AngularJS應用程序

我是AngularJS路由的新手，所以這可能聽起來像一個noob問題。無法模塊化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>

劇本我寫ng-app='adminpanel'在身上我的html代碼的標籤。

當我運行我的應用程序時，我得到$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

來源

2016-04-20 Shuaib

請提供完整的錯誤網址。 – strelok2010

你的'CustomersModule'聲明瞭使用'$ routeProvider'的路由，除了'ngRoute'模塊沒有被注入到這個模塊。 – SuperVeetz

當我將$ routeProvider注入到CustomersModule @SuperVeetz – Shuaib

在主應用程序的config，這一點兒也不知道你的控制器還CustomersCtrl。

您可以使用控制器名稱來定義路線。

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

來源

2016-04-20 11:02:26 Hereblur

問題解決了！謝謝！ – Shuaib

角是有點討厭調試，但一旦你找出如何這不是一個大問題。

在Chrome中，開放式開發工具，刷新頁面，你會得到直接從角的源來的錯誤信息（在來源選項卡）。

把一個破發點出現，再次刷新，然後你就會有正確的完整調用堆棧。現在，你就可以在調用堆棧點擊前面的步驟來檢查變量值等

來源

2016-04-20 10:49:04 DrinkBird

中時，會出現完全相同的錯誤此外，您還定義了兩次相同的路由。通常，我將所有的路由配置保存到主模塊中，如果需要在子模塊中配置任何內容，我會爲子模塊創建一個提供者並從主模塊的配置步驟調用它。 – DrinkBird

更改您的代碼像波紋管。 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) { 
});

在角其更好地使用所有路線嚮應用根module.So添加路由在angularmodoule.js

我沒有調試這個答案，只得到和理念，並就做你自己的風格！

來源

2016-04-20 10:53:05

您需要更改從controller: CustomersCtrl到controller: 'CustomersCtrl'。當心JavaScript語法！

來源

2016-04-20 11:05:05

無法模塊化AngularJS應用程序

回答

相關問題