Problem with multiple definition of 'starter.controllers'

Hello, I have a problem when I try to separate my controllers in different files.

Here’s my includes in the index.html:

<script src="js/app.js"></script>
<script src="js/services.js"></script>
<script src="js/controller1.js"></script>
<script src="js/controller2.js"></script>

My app.js:

  angular.module('starter', ['ionic', 'starter.services', 'starter.controllers'])
    
  .config(function($stateProvider, $urlRouterProvider) {
      $stateProvider
      .state('tab', {
          url: "/tab"...
           ...
           ...
      and so on with the other routes...

controller1.js:

angular.module('starter.controllers', [])

.controller('ControllerOne', function($scope, MyService) {
  $scope.foo = MyService.all();
});

controller2.js:

angular.module('starter.controllers', [])

.controller('ControllerTwo', function($scope, MyService) {
  $scope.foo = MyService.all2();
});

And this is the error that I’m getting:

Error: [ng:areq] Argument ‘ControllerOne’ is not a function, got undefined

What I’m doing wrong? Is there a way to separate the controllers of the module ‘starter.controllers’ in multiple files?

app.js

var cortrollerModule = angular.module(‘starter.controllers’, );


controller1.js:

cortrollerModule .controller(‘ControllerOne’, function($scope, MyService) {
$scope.foo = MyService.all();
});


controller2.js:

cortrollerModule .controller(‘ControllerTwo’, function($scope, MyService) {
$scope.foo = MyService.all2();
});

3 Likes

Thank you so much subashselvaraj!