Невозможно модулировать приложение AngularJS

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> 

я написал 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 

Answer 1

В главном приложении config он не знает вашего контроллера, а ClientCtrl.

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

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

Answer 2

Угловое немного раздражает отлаживать, но как только вы узнаете, как это не большая проблема.

В Chrome откройте Developer Tools, обновите страницу, и вы получите сообщение об ошибке, поступающее непосредственно из источника углов (на вкладке Sources).

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

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> 

И Вам не нужно определить модуль, просто вы можете создать контроллер расширения админпанели, поэтому файл customers.js хотел

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

В Угловом его лучше использовать весь маршрут модуль корневого приложения. Добавьте маршрут в angularmodoule.js

Я не отлаживал этот ответ, просто получите и Идею и сделайте это у вас есть стиль!

Answer 4

Вам необходимо перейти от controller: CustomersCtrl к controller: 'CustomersCtrl'.Остерегайтесь синтаксиса javascript!