angularjs - How can i refactor my angular code for my laravel app so i have the controllers in separate files? -

i have code structured possible , right controllers , routes kept in same file. using laravel 4.2 end , templating , angular front end part of app.

this how angular script looks now:

var application = angular.module('reporterapplication', ['ngroute', 'ui.select', 'ngsanitize'], function($interpolateprovider) {     $interpolateprovider.startsymbol('<%');     $interpolateprovider.endsymbol('%>'); });  application.config(function($routeprovider) {      $routeprovider         .when('/packing/scan.html', {             templateurl: 'packing/scan.html',             controller: 'packingscancontroller'         })          [ .... ]  });  application.controller('bootstrapcontroller', ['$scope', function($scope) {     [ ... ]  }]);   application.controller('orderstrackercontroller', ['$scope', '$http', function($scope, $http) {      [ ... ]  }]); 

in bootstrap.blade.php have base of app , use n angular view generate content. tried use blade include needed js file containing module's controller breaks angular

like :

scan.blade.php

@head {{ html::script('/src/packing/scan.js') }} @stop  php , angular html code here 

you create module, like:

angular.module('reporterapp.controllers', [ /* dependencies here */]) 

then can .controller( ...etc...). inject module in 'main' module. way can have different files containing different controllers, in reporterapp.controllers module.

a simple example:

file 1:

angular.module('reporterapp.controllers')     .controller('myctrl', ['$scope', function($scope) {        /* code here */     }]); 

file 2:

angular.module('reporterapp.controllers')     .controller('mysecondctrl', ['$scope', function($scope) {          /* code here */     }]); 

then module file (for bit of structure, example if have other files services want in separate module aswell) modules.js:

angular.module('reporterapp.controllers', [ /*dependencies here */ ]); angular.module('reporterapp.services', [ /* dependencies here */]); 

and lastly main app.js:

var myapp = angular.module('reporterapplication',      ['reporterapp.controllers', 'reporterapp.services']); 

in order work properly, order of including matters lot though. make sure include module.js file first, modules created, files containing controllers, services , lastly app.js!