Javascript 如何重构controllers.js，使每个控制器都位于一个单独的文件中？

我正在使用Ionic框架和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

我有一个包含所有控制器的controllers.js文件。然而，我的应用程序已经变得复杂，controllers.js文件现在大约有900行。我想将控制器分离到它们自己的文件中，例如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....

  });
})

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

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

})

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

})

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

});

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

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

controllers.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....

  });
})

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

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

})

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

})

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

});

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

angular.module('app.controllers')
.controller('secondCtrl', 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>

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

---

如何为每个控制器将控制器分离为单独的.js文件？

firstCtrl.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....

  });
})

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

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

})

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

})

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

});

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

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

secondCtrl.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....

  });
})

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

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

})

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

})

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

});

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

angular.module('app.controllers')
.controller('secondCtrl', 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>

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

---

firstCtrl.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....

  });
})

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

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

})

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

})

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

});

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

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

secondCtrl.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....

  });
})

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

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

})

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

})

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

});

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

angular.module('app.controllers')
.controller('secondCtrl', 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>

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

---

就像@Weedoze所说的那样，或者从有角度的物体中引用

var-app=angular.module（'app.controllers'）

并开始在下面连接控制器

app.controller('XCtrl', function($scope) {

})

---

就像@Weedoze所说的，或者从有角度的对象中引用

var-app=angular.module（'app.controllers'）

并开始在下面连接控制器

app.controller('XCtrl', function($scope) {

})

---

我建议看一看关于如何构造角度代码的一些指南。这里有两个：我建议大家看一看关于如何构造角度代码的指南。这里有几个：并且。它不起作用，我得到一个错误，说：“ionic.bundle.js:25642错误：[ng:areq]参数'firstCtrl'不是函数，在你的

app.js

add

angular.module（'app.controllers'，[]）中未定义“@chmod777”广告在哪里？我将其添加到app.js的底部，但仍然收到错误消息，因为上面的错误消息不起作用，我收到一条错误消息：“ionic.bundle.js:25642错误：[ng:areq]参数'firstCtrl'不是函数，在
app.js
add
angular.module（'app.controllers'，[]）中未定义“@chmod777”广告在哪里？我将其添加到app.js的底部，但仍然会收到上面的错误消息