Separate AngularJS Controllers Into Separate Files

Question

I am using Ui-Router with my AngularJS application, and am wondering how I split my angular controllers into different files to make them much more clean.

For example:

var app = angular.module('myApp', ["xeditable", 'ngRoute','ngSanitize',
 'ngAnimate', 'ngAria', 'ngMaterial','ngFileUpload','ui.router']);

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

// For any unmatched url, send to /route1
$urlRouterProvider.otherwise("/my_requisitions/list");

$stateProvider
    .state('my_requisitions', {
        url: "/my_requisitions",
        templateUrl: "../../../partials/requisitions/my_requisitions.ctp",
        //controller: 'my_controller'
    })
    .state('my_requisitions.list', {
        url: "/list",
        templateUrl: "../../../partials/requisitions/my_requisitions.list.ctp",
        //controller: 'my_controller'

    })
    .state('my_requisitions.add', {
        url: "/add/:type",
        templateUrl: "../../../partials/requisitions/my_requisitions.add.ctp",
        controller: 'my_controller'

    })
    .state('manage_requisitions', {
        url: "/manage_requisitions",
        templateUrl: "../../../partials/requisitions/manage_requisitions.ctp"
    })
    .state('manage_requisitions.list', {
        url: "/list",
        templateUrl: "../../../partials/requisitions/manage_requisitions.list.ctp",
        controller: 'manage_controller'
    })
})

In this code, how would I make it so that my_controller could be declared in an outside file rather than declaring it at the bottom like so:

app.controller('my_controller', function($scope, $filter, $http, $timeout,$mdDialog, $stateParams) {
etc....

simply referencing the javascript file in the main HTML file and then declaring the controller with app.controller... does not seem to work.

Thanks in advance!

there should be no reason that including controller definitions in different files wouldn't work, as long as your javascript files are loaded in the correct order. — Claies, Aug 07 '15 at 13:38
You also need to specify the module in that single file.. not just `app.controller`. So before `app.controller` you should have `var app = angular.module('myApp')` — Razvan B., Aug 07 '15 at 13:52

score 3 · Answer 1 · answered Aug 07 '15 at 13:42

3

You need to load the files containing your controllers in your HTML before you load the file that declares your application.

<script src="/path/to/angular.js"></script>
<script src="/path/to/controller1.js"></script>
<script src="/path/to/controller2.js"></script>
<script src="/path/to/yourapp.js"></script>

Inside each controller file, you would declare a controller like this:

var Controller = function ($scope) {

}

Controller.$inject = ['$scope'];

Inside your main file after you declare the app variable:

app.controller('Controller', Controller);

answered Aug 07 '15 at 13:42

Sam

4,994
4
30
37

2

@HirenSavaliya this could be one possible solution to avoid file loading dependency. You should understand the answer before marking it negative. – dhavalcengg Aug 07 '15 at 13:48
1

but this way is not proper way – Aug 07 '15 at 13:50
1

you using this way then not need to use route. – Aug 07 '15 at 13:50
1

Can you make your own answer with the proper way, then? I'm relatively new to angularjs and this is the way I got it to work. If there is a better way I would be interested to see. – Sam Aug 07 '15 at 13:52
Thank you. I would like to see if there is a proper way as well, otherwise this will do nicely. – Dave McGregor Aug 07 '15 at 14:05
This is certainly not against 'the angular way'. It is dependant on the project requirements. You can have role based applications and in those cases there is absolutely no use to send code to regular user that contains controllers that handle admin functionality.... best to seperate your controllers and lazy load them. – skubski Aug 07 '15 at 14:23

score 0 · Accepted Answer · answered Aug 07 '15 at 14:15

you can write your controller in separate file and just include it in your HTML file after you include your app file

<!DOCTYPE html>

<html>
<head>
<meta name="viewport" content="width=device-width" />
<script src="~/Scripts/angular.js"></script>
<script src="~/Scripts/Demo.js"></script>
<script src="~/Scripts/DemoController.js"></script>
<title>Demo</title>
</head>
<body>
<div ng-app="demoApp">
    <div ng-controller="demoController">
        <span>{{dummyData}}</span>
    </div> 
</div>
</body>
</html>

code of Demo.js

var demoApp = angular.module('demoApp',[]);

code of DemoController.js

demoApp.controller('demoController', function($scope) {
     $scope.dummyData = "hello from demo app";
});

You are right. Thank you. Upon reviewing, it looks like I had included my controller file before the actual application file.... Oops. — Dave McGregor, Aug 07 '15 at 14:26
This is backwards. You're loading the file that depends on the controllers before the files that declare them. @DaveMcGregor, the way you had it originally was right. — Sam, Aug 07 '15 at 15:08

Separate AngularJS Controllers Into Separate Files

2 Answers2

Linked