javascript - 如何重构controllers.js，以便将每个 Controller 放在单独的文件中？

Question

我正在使用 Ionic Framework 和 AngularJS 1x 构建一个应用程序。

我的系统信息:

Your system information:

Cordova CLI: 6.3.1
Gulp version:  CLI version 3.9.1
Gulp local:   Local version 3.9.1
Ionic Framework Version: 1.2.4
Ionic CLI Version: 2.1.0
Ionic App Lib Version: 2.1.0-beta.1
OS: Distributor ID: LinuxMint Description:  Linux Mint 18 Sarah 
Node Version: v4.2.6

我有一个包含所有 Controller 的controllers.js 文件。然而我的应用程序变得复杂，controllers.js 文件现在大约有 900 行。我想将 Controller 分离到它们自己的文件中，例如firstCtrl.js、secondCtrl.js等。我已经用谷歌搜索了一段时间，但找不到任何东西。我能找到的唯一重构示例是教程中的所有内容都在 app.js 中，并且它们重构为controllers.js

app.js

angular.module('app', ['ionic', 'ngCordova', 'ngOpenFB', 'firebase', 'angularMoment', 'app.controllers', 'app.routes', 'app.services', 'app.directives', 'app.filters'])

.run(function($ionicPlatform, ngFB, $ionicSideMenuDelegate, $cordovaLocalNotification) {
  $ionicPlatform.ready(function() {

  // code code code....

  });
})

controllers.js

angular.module('app.controllers', ['ngCordova'])

.controller('firstCtrl', function($scope) {
    // awesome code...

})

.controller('secondCtrl', function($scope) {
    // awesome code...

})

.controller('thirdCtrl', function($scope) {
    // awesome code...

});

index.html

<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/routes.js"></script>
<script src="js/services.js"></script>
<script src="js/directives.js"></script>
<script src="js/filters.js"></script>

如何将 Controller 分成每个 Controller 的单独 .js 文件？

Answer 1

firstCtrl.js

angular.module('app.controllers')
.controller('firstCtrl', function($scope) {
    // awesome code...
})

第二个Ctrl.js

angular.module('app.controllers')
.controller('secondCtrl', function($scope) {
    // awesome code...
})

index.html

<script src="js/app.js"></script>
<script src="js/firstCtrl.js"></script>
<script src="js/secondCtrl.js"></script>