AngularJSコントローラを複数のファイルに分割する

Question

私は、Onsen UIとAngularJSを使用して構築されたクロスプラットフォームのエンタープライズアプリケーションを使用しています。しかし、アプリのサイズは急速に拡大しており、管理が難しくなってきています。今まで私は1つのapp.jsファイル内のすべてのアプリケーションコントローラを管理することができ、アプリケーションは完全に動作しています。しかし、私はコントローラを異なる.jsファイルに分割したいと思っています。 login.js、registration.js。アプリの成長に合わせて管理しやすくしています。

私はTHISのSO（顕著な答え）を見つけましたが、実装には問題があります。同様に、@ jason328の回答は非常にエレガントに見えますが、私は自分のコードでそれを実装しています。例えば中

angular.module('myApp.controllers', ['onsen']); 

そして、次のように私は、モジュールを持っている私の主な新app.jsファイルで

login.js以下のように I・セットアップ私のモジュール：ページのどれもが表示されないよう

angular.module('myApp.controllers').controller('LoginController', ['$scope', '$http', function($scope, $http) 
{ 
    // All the login logic goes here 
}]); 

これは動作しません。私がこの設定を元のapp.jsファイルに設定しても、アプリケーションは完全に動作します（下の元のコード）。私の問題は、である

var app = angular.module("myApp", ['onsen']); 
// Manages the state of the login.html screen 
app.controller("LoginController", function($scope, $http) 
{ 
    // All the login logic goes here 
}); 

[ '温泉']私は仮定新しいapp.jsで？しかし、私は実装しようとしているSOソリューションにどのように含めるべきですか？

Answer 1

これを行うには別の方法があります。あなたはファイルごとにモジュールを作成し、て、myAppモジュールに追加し、このようなことができます。

app.js

var app = angular.module("myApp", ['onsen', 'loginControllers', 'otherController']); 

login.js

var login = angular.module("loginControllers", []); 
login.controller("LoginController", function($scope, $http) 
{ 
    // All the login logic goes here 
}); 

other.js

var other = angular.module('otherControllers', []); 
other("OtherController", function($scope, $http) 
{ 
    // All the other logic goes here 
}); 

すべてのスクリプトがindex.htmlに追加されていることを確認してください。