Problem Splitting Controller / Services / Constants into Separate Files

ionic-v1
1

My app only works when I have all the JS code in the app.js file. When I try to separate, I get an error saying it can’t find a controller. Same issue with service and constant files. I tried several options from this forum and the net, but nothing has worked.

The first page is basic sorta splash page. From there when the user clicks the Sign In button, a side menu is displayed.

This is basically the setup. Code was abbreviated to protect the innocent (there could be typos).

– index.html

  <head>
    <script src="js/controllers.js"></script>
    <script src="js/app.js"></script>        
  </head>

  <body ng-app="starter">
    <ion-nav-view animation="slide-left-right"></ion-nav-view>
  </body>

– menu.html

  <ion-side-menu side="left">
    <header class="bar bar-header bar-stable">
    </header>
    <ion-content class="has-header">
        <ion-list>
            <ion-item nav-clear menu-close href="#/home">
                Home
            </ion-item>
            <ion-item nav-clear menu-close href="#/app/signin">
                Sign In
            </ion-item>
        </ion-list>
    </ion-content>
  </ion-side-menu>
</ion-side-menus>

– home.html

<ion-view title="Home">
    <div class="bar bar-header bar-stable">
    </div>

    <ion-content>
    </ion-content>

    <div class="bar bar-footer bar-stable">
    </div>    
</ion-view>

– app.js

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

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

    .state('app', {
      url: "/app",
      abstract: true,
      templateUrl: "menu.html",
      controller: 'AppCtrl'
    })

  .state('home', {
      url: '/home',
      templateUrl: 'home.html',
      controller: 'HomeCtrl'
    })

– controllers.js

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

.controller('AppCtrl', function($scope) {
});

.controller('HomeCtrl', function($scope) {
});

– error

Error: [ng:areq] Argument 'HomeCtrl' is not a function, got undefined
http://errors.angularjs.org/1.5.3/ng/areq?p0=HomeCtrl&p1=not%20a%20function%2C%20got%20undefined
    at ionic.bundle.js:13438
    at assertArg (ionic.bundle.js:15214)
    at assertArgFn (ionic.bundle.js:15224)
    at $controller (ionic.bundle.js:23373)
    at self.appendViewElement (ionic.bundle.js:59900)
    at Object.render (ionic.bundle.js:57893)
    at Object.init (ionic.bundle.js:57813)
    at self.render (ionic.bundle.js:59759)
    at self.register (ionic.bundle.js:59717)
    at updateView (ionic.bundle.js:65398)
2

Try

– index.html

<!-- Setting up angularJS -->
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/routes.js"></script>
<script src="js/services.js"></script>
<script src="js/directives.js"></script>

– app.js

angular.module('app', ['ionic', 'app.controllers', 'app.routes', 'app.services', 'app.directives', ...

– controllers.js

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

.controller('AppCtrl',..

then do the same for the other files

3

Thanks. I’ll give it a shot.

4

Split the controllers out and so far it works exactly like it should. Nice. And from your changes I see what I did wrong. Thanks again.

1 Like
5

Its (your) Angular error. You app.js is OK
angular.module('starter', ['ionic']) // master module with [dependecies]
but in controllers.js you should use just a reference not the full definition.
angular.module('starter') // look ma no dependecies .controller('AppCtrl', function($scope) { .... })
Your code doesn’t know where to initiate the starter module

1 Like
6

you are welcome. Glad to help :smile: