AngularJSコードを別々のファイルに分割する方法は？

Question

すべて動作していますが、スクリプトを外部のjsファイルに分割しようとすると、AngularJSは実行されていません。ここで

は私のスクリプトです：

<script> 
angular.module('MyApp', ['ngMaterial', 'ngMessages', 'material.svgAssetsCache']) 
.controller('AppCtrl', function ($scope) { 
    $scope.isDisabled = true; 
    $scope.UnitReport = function(){ 
     alert("aa"); 
    } 
}) 
//this is just a part of script 
; 
</script> 

は、私のような分離：

.controller('AppCtrl', function ($scope) { 
    $scope.UnitReport = function(){ 
     alert("aa"); 
    } 
}) 

が、うまくいきませんでした。

また、私は次のように区切ら：

angular.module('MyApp', ['ngMaterial', 'ngMessages', 'material.svgAssetsCache']) 
.controller('AppCtrl', function ($scope) { 
    $scope.UnitReport = function(){ 
     alert("aa"); 
    } 
}) 

が、再び動作しませんでした。

このAngularJSをどのように分けることができますか？

P.: .:外部ファイルのリンクと機能に間違いはありません。

Answer 1

このラインは理由[...]一部から、モジュールMyAppを作成します。

angular.module('MyApp', ['ngMaterial', 'ngMessages', 'material.svgAssetsCache']); 

あなたはこのモジュールのコントローラを作成すると、あなたがにする必要があります、それをを参照してください。あなたのアプリでは、モジュール宣言の後にそれを直接実行します。

angular.module('MyApp', [...]).controller(...); 

ですから、モジュールと1行のコントローラを作成します。

angular.module('MyApp').controller(...); /* There are no [] anymore -> not a mod creation */ 

：以下synthaxで、このモジュール上のコントローラを作成し、別のファイルでは

angular.module('MyApp', ['ngMaterial', 'ngMessages', 'material.svgAssetsCache']); 

：

---

は今、何が必要まず、あなたのモジュールを作成し、それを分離し、そうすることです

Answer 2

はい、別のjでファイルを区切ることは可能です。次のコードで

既存のモジュールをつかむと、あなたはモジュールの名前である引数を1つしか使用する必要があり、それへの新しいコントローラを追加するためにモジュール

angular.module('MyApp', ['ngMaterial', 'ngMessages', 'material.svgAssetsCache']) 

をインスタンス化します。

angular.module('myApp').controller(/*.. Controller code ..*/)