0

I've the same issues as in how-to-create-separate-angularjs-controller-files, but it seems to be a little bit more complicated: I want to separate my module declaration and the "MAIN-Controller" into separate files, say app.js and appCtrl.js.

app.js contains:

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

appCtrl.js contains:

angular.module('app').controller('appCtrl', function($scope){
    $scope.model = { MyValue : "coucou" };
}]);

Following code is ok:

<html>
<head>
    <script src="bower_components/angular/angular.js"></script>
    <script src="scripts/app.js"/>
    <script src="scripts/ctrl/appCtrl.js"/>
</head>
<body ng-app="app" ng-controller="appCtrl">
    My value = {{model.MyValue}}

</body>
</html>

but following code is NOT OK:

<html>
<head>
</head>
<body ng-app="app" ng-controller="appCtrl">
    My value = {{model.MyValue}}

    <script src="bower_components/angular/angular.js"></script>
    <script src="scripts/app.js"/>
    <script src="scripts/ctrl/appCtrl.js"/>
</body>
</html>

Angular throws the Error: "[ng:areq] Argument 'appCtrl' is not a function, got undefined" Unfortunately, the latter is the recommanded way to include angular and the modules...

Is there a solution to this issue? Thank you in advance!

Community
  • 1
  • 1
jeromerg
  • 2,997
  • 2
  • 26
  • 36

2 Answers2

0

Try this:

app.js

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

appCtrl.js:

app.controller('appCtrl', function($scope){
$scope.model = { MyValue : "coucou" };

}]);

Martin
  • 1,283
  • 2
  • 14
  • 28
  • this is exactly what I do! But it fails if the – jeromerg Mar 20 '14 at 12:31
  • Thank you, the issue was actually the self-closing Script-Tag `` which is buggy in Chrome, as stated in [this other stackoverflow question][1]. [1]: http://stackoverflow.com/questions/69913/why-dont-self-closing-script-tags-work – jeromerg Mar 20 '14 at 13:43
0

I would use angular modules/injection functionalities :

app.js contains:

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

appCtrl.js contains :

angular.module('app.controllers', [])
    .controller('appCtrl', function($scope){
        $scope.model = { MyValue : "coucou" };
}]);
Jscti
  • 14,096
  • 4
  • 62
  • 87
  • Thank you, the issue was actually the self-closing Script-Tag `` which is buggy in Chrome, as stated in [this other stackoverflow question][1]. [1]: http://stackoverflow.com/questions/69913/why-dont-self-closing-script-tags-work – jeromerg Mar 20 '14 at 13:42