AngularJS modules and submodules instantiation

Question

I'm trying to create sub-modules within my angular app. I would like to have one module for each file I have (services.js, controllers.js, ...). The problem I have is that when I create one for each, the bootstrapping stops working. I have the following:

app.js

angular.module('myApp', [
    'appSrv',
    'appCtrl'
]);

controllers.js

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


appCtrl.controller('TodoCtrl', ['$scope', 'listener', 'pouchWrapper', function($scope, listener, pouchWrapper) {
    $scope.orderProp = 'text';

...
);

services.js

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

appSrv.value('version', '0.1');

appSrv.factory('myPouch', [function() {

...

);

index.jade

doctype html
html(ng-app='myApp')
  head
    title=title
    link(rel='stylesheet' href='stylesheets/style.css')
    link(rel='stylesheet' href='bower_components/bootstrap/dist/css/bootstrap.css')
    script(type='text/javascript' src='javascripts/angular-1.3.0b7.min.js')
    script(type='text/javascript' src='javascripts/pouchdb-2.1.0.min.js')

    script(type="application/javascript" src="app/app.js")
    script(type="application/javascript" src="app/controllers.js")
    script(type="application/javascript" src="app/services.js")

But when I try a simple operation such as 1 + 2 = {{ 1 + 2 }} in my index, I don't get the expected result.

Am I doing something wrong?

Thanks!

Answer 1

If i'm nor mistaken, the problem is that you are loading the app module before the controller and services, try changing the order in the HTML and put app.js at the end:

script(type="application/javascript" src="app/controllers.js")
script(type="application/javascript" src="app/services.js")
script(type="application/javascript" src="app/app.js")

Answer 2

I think the controller don't need inject to myApp module.

var TestCtrl = ['$scope', function ($scope, $) {
  $scope.orderProp = 'text';
}};

In your html code, you can using ng-controller="TestCtrl" to register it.