AngularJS initialize controller module

Question

I want to seperate my WebApp in different modules for directives, services, controllers etc. just like angular-seed. Somehow the controllers defined in controllers.js don't seem to work.

<ul class="menu" ng-controller="MenuController">
    <li>{{hello}}</li>
</ul>

In app.js I defined the global App module with it's submodules.

// Declare app level module which depends on filters, and services
angular.module('myApp', [
    'myApp.filters',
    'myApp.services',
    'myApp.directives',
    'myApp.controllers'
]);

And in controllers.js I tried to define a controller, that does not load. When the page get rendered I just see {{hello}}.

angular.module('myApp.controllers', []).
  controller('MenuController', function($scope) {
     $scope.hello = "world"; 
  });

How do I attach the controllers to their template counterparts?

@stefchri Yes, I did. I'm sure it's loaded (Angular aswell). Because when I create the controller globally in controllers.js: function MenuController($scope){ $scope.hello = "world"; } it works.. — sluijs
– sluijs, Commented Dec 25, 2013 at 14:19
@KhanhTO Thanks, that did the trick. If you'd make it an answers, I'd accept it. — sluijs
– sluijs, Commented Dec 25, 2013 at 14:26

Mike Cheel · Accepted Answer · 2013-12-25 14:18:21Z

1

The problem is because the other modules aren't defined. Modifying the myApp module like below works:

angular.module('myApp', [

    'myApp.controllers'
]);

http://jsbin.com/osOQOYag/2/edit?html,js,output

answered Dec 25, 2013 at 14:18

Mike Cheel

13.3k10 gold badges79 silver badges107 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

sluijs · Accepted Answer · 2013-12-25 15:04:55Z

0

It seems like angular-seed has the following order of scripts in their /app/index.html:

<script src="lib/angular/angular.js"></script>
<script src="lib/angular/angular-route.js"></script>
<script src="js/app.js"></script>
<script src="js/services.js"></script>
<script src="js/controllers.js"></script>
<script src="js/filters.js"></script>
<script src="js/directives.js"></script>

As @KhanhTO pointed out in the comments, app.js should be called last.

answered Dec 25, 2013 at 15:04

sluijs

4,2674 gold badges34 silver badges37 bronze badges

Collectives™ on Stack Overflow

AngularJS initialize controller module

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related