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私HTMLページでファイル

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) { 


}); 

で第二のモジュールですが、私は私が書いたこの

<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では、あなたのコントローラーはまだCustomersCtrlではありません。

代わりにコントローラ名を使用してルートを定義できます。

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

Answer 2

角度は、デバッグに少し迷惑ですが、あなたは見つけるたら、それは問題の大ではありませんか。

Chromeでは、開発者ツールを開いてページを更新すると、Angelsのソース（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'}); 
    ; 

}) 

スクリプトの注文はこちらにしてください。あなたのcustomers.jsファイルが内のすべてのルートを使用するアンギュラその中

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

よりよいが好き必要がありますので

<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を拡張コントローラを作成することができますアプリケーションのルートモジュールです.Andermodoule.jsのルートを追加

私はこの答えをデバッグしていない、ちょうど取得し、アイデアをして、あなた自身のスタイルをしてください！

Answer 4

あなたはcontroller: 'CustomersCtrl'にcontroller: CustomersCtrlから変更する必要があります。javascriptの構文に注意してください！