Separating out the controllers into different js files

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?
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

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.

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 which is how I think your app large or small should be organised.

@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

@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

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/’))
});

3 Likes

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

index.html (Works :heavy_check_mark:)

<!-- 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! :x: )

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

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

Code demo: https://github.com/mymai91/mymaiApp