我如何重构我的controllers.js所以我将每个控制器放在一个单独的文件中?

时间:2016-11-07 14:03:15

标签: javascript angularjs ionic-framework

我正在使用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

我有一个包含所有控制器的controllers.js文件。但是我的应用程序变得复杂,controllers.js文件现在是~900行。我想将控制器分成他们自己的文件,例如firstCtrl.js secondCtrl.js等。我已经google了一段时间但是找不到任何东西。我能找到的唯一重构示例是教程包含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>

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

2 个答案:

答案 0 :(得分:4)

<强> firstCtrl.js

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

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

答案 1 :(得分:1)

就像@Weedoze所说的那样,或者采用角度对象的形式

var app =angular.module('app.controllers')并开始将控制器附在

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

})