# Separating out the controllers into different js files

**URL:** <https://forum.ionicframework.com/t/separating-out-the-controllers-into-different-js-files/2554>\
**Category:** ionic-v1\
**Created:** [April 2, 2014, 1:00pm UTC](https://forum.ionicframework.com/t/separating-out-the-controllers-into-different-js-files/2554 "2014-04-02T13:00:31Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![shreerangp](https://avatars.discourse-cdn.com/v4/letter/s/dec6dc/32.png) [@shreerangp](https://forum.ionicframework.com/u/shreerangp)\
**Post date:** [April 2, 2014, 1:00pm UTC](https://forum.ionicframework.com/t/separating-out-the-controllers-into-different-js-files/2554/1 "2014-04-02T13:00:32Z")

</div>

Hello.

I have the following code for the ionic app that I am building. Currently I have all the code below in a single js file. I want to separate out the controller code into each individual js file and somehow am not able to get this to work.

I have tried out the solution mentioned @ [How can I have one file per controller?](http://forum.ionicframework.com/t/how-can-i-have-one-file-per-controller/1269)  
However this did not work for me. Could you’ll please help me with this one?

angular.module(‘ionicApp’, [‘ionic’])

.config(function($stateProvider, $urlRouterProvider) {

```
$stateProvider
.state('eventmenu.login', {
	url: "/login",
	views: {
		'menuContent' :{
			templateUrl: "login.html",
			controller: "LoginCtrl"
		}
	}
})
.state('eventmenu', {
	url: "/event",
	abstract: true,
	templateUrl: "event-menu.html"
})
.state('eventmenu.home', {
	url: "/home",
	views: {
		'menuContent' :{
			templateUrl: "home.html",
			controller: "HomeCtrl"
		}
	}
})
$urlRouterProvider.otherwise("/event/login");

```

})

.controller(‘MainCtrl’, function($scope, $ionicSideMenuDelegate) {  
})

.controller(‘HomeCtrl’, function($scope, $http) {  
})

.controller(‘LoginCtrl’, function($scope, $http, $location) {  
});

Regards.  
Shreerang  
[Spatial Unlimited](http://shreerangpatwardhan.blogspot.com)

---

<div class="post-metadata">

**Author:** ![gnomeontherun](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/gnomeontherun/32/64484_2.png) [@gnomeontherun](https://forum.ionicframework.com/u/gnomeontherun)\
**Post date:** [April 2, 2014, 7:18pm UTC](https://forum.ionicframework.com/t/separating-out-the-controllers-into-different-js-files/2554/2 "2014-04-02T19:18:29Z")

</div>

Each of your controllers can be in its own file and you declare it like this.

`angular.module('ionicApp').controller('MainCtrl', function ($scope) { ... });`

The Angular documentation is helpful for questions more about Angular than Ionic.

---

<div class="post-metadata">

**Author:** ![gregorypratt](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/gregorypratt/32/64031_2.png) [@gregorypratt](https://forum.ionicframework.com/u/gregorypratt)\
**Post date:** [April 2, 2014, 9:00pm UTC](https://forum.ionicframework.com/t/separating-out-the-controllers-into-different-js-files/2554/3 "2014-04-02T21:00:09Z")

</div>

> **[Plunker - Untitled](http://plnkr.co/edit/CiLpMQqd1s2HJN1mzl1b?p=preview)**
>
> Created on https://plnkr.co: Helping you build the web.

You are right to want to split your controllers and features up into separate JS files etc. This example will hopefully make sense. I have my top level app module (app.js), and it requires my `demo.features.controllers` module (features.mod.js).

`demo.features.controllers` contains both my controllers.

From this simple example you should be able to see that the benefits of the modularity of AngularJS.

Take a look at this [https://github.com/GrumpyWizards/ngTemplate](https://github.com/GrumpyWizards/ngTemplate) which is how I think your app large or small should be organised.

---

<div class="post-metadata">

**Author:** ![shreerangp](https://avatars.discourse-cdn.com/v4/letter/s/dec6dc/32.png) [@shreerangp](https://forum.ionicframework.com/u/shreerangp)\
**Post date:** [April 3, 2014, 5:55am UTC](https://forum.ionicframework.com/t/separating-out-the-controllers-into-different-js-files/2554/4 "2014-04-03T05:55:18Z")

</div>

@gnomeontherun I have tried this and somehow it doesn’t work out for me. That is why I posted a query here. Apart from seperating out the module controller into separate files, I have referenced each JS file (seperate controllers) in the head section of the HTML. Is that right?

```
<script src="js/app.js"></script>
<script src="js/Controllers/HomeCtrl.js"></script>
<script src="js/Controllers/LoginCtrl.js"></script>

```

Does anything change in the ng-controller reference that we give in the HTML?

```
<div ng-controller="MainCtrl">

```

I am relatively new to both angular and Ionic and hence was looking for some help here!

Regards.  
Shreerang  
[Spatial Unlimited](http://shreerangpatwardhan.blogspot.com)

---

<div class="post-metadata">

**Author:** ![shreerangp](https://avatars.discourse-cdn.com/v4/letter/s/dec6dc/32.png) [@shreerangp](https://forum.ionicframework.com/u/shreerangp)\
**Post date:** [April 3, 2014, 6:36am UTC](https://forum.ionicframework.com/t/separating-out-the-controllers-into-different-js-files/2554/5 "2014-04-03T06:36:28Z")

</div>

@gnomeontherun I implemented what you have suggested and it worked! I had tried the same thing before and it hadn’t worked. Wondering what mistake had I done! But well, your solution worked…

Thanks for your inputs and help!

Regards.  
Shreerang  
[Spatial Unlimited](http://shreerangpatwardhan.blogspot.com)

---

<div class="post-metadata">

**Author:** ![vitorventurin](https://avatars.discourse-cdn.com/v4/letter/v/ce73a5/32.png) [@vitorventurin](https://forum.ionicframework.com/u/vitorventurin)\
**Post date:** [January 7, 2015, 4:47pm UTC](https://forum.ionicframework.com/t/separating-out-the-controllers-into-different-js-files/2554/6 "2015-01-07T16:47:37Z")

</div>

I did a gulp task for concatenate the controllers:

gulp.task(‘controllers’, function() {  
gulp.src(paths.controllers)  
.pipe(concat(‘controllers.js’))  
.pipe(gulp.dest(’./www/js/’))  
});

---

<div class="post-metadata">

**Author:** ![Paedy](https://avatars.discourse-cdn.com/v4/letter/p/54ee81/32.png) [@Paedy](https://forum.ionicframework.com/u/Paedy)\
**Post date:** [May 15, 2015, 11:10am UTC](https://forum.ionicframework.com/t/separating-out-the-controllers-into-different-js-files/2554/7 "2015-05-15T11:10:42Z")

</div>

@gnomeontherun and @shreerangp: Is it possible to use a wildcard in the build “annotation” / “comment”?

**index.html (_Works_ ✔)**

```
<!-- build:js dist_js/app.js -->
<script src="dist/dist_js/app/app.js"></script>
<script src="dist/dist_js/app/controllers.js"></script>
<script src="dist/dist_js/app/controllers/AppCtrl.js"></script>
<!-- endbuild -->

```

**index.html (_Not working!_ ❌ )**

```
<!-- build:js dist_js/app.js -->
<script src="dist/dist_js/app/app.js"></script>
<script src="dist/dist_js/app/controllers.js"></script>
<script src="dist/dist_js/app/controllers/*.js"></script>
<!-- endbuild -->

```

I wouldn’t add each controller to the index.html.

---

<div class="post-metadata">

**Author:** ![MyMai](https://avatars.discourse-cdn.com/v4/letter/m/d07c76/32.png) [@MyMai](https://forum.ionicframework.com/u/MyMai)\
**Post date:** [July 1, 2016, 9:18am UTC](https://forum.ionicframework.com/t/separating-out-the-controllers-into-different-js-files/2554/9 "2016-07-01T09:18:36Z")

</div>

My suggest we will organize code by split to the module, and inject it in the app.js file

This is detail my way: [https://mymai91.github.io/ionic/2016/07/01/ionic-structure-code-for-project.html](https://mymai91.github.io/ionic/2016/07/01/ionic-structure-code-for-project.html)

Code demo: [https://github.com/mymai91/mymaiApp](https://github.com/mymai91/mymaiApp)