Angularjs: How to create separate files for the main-module and the main-controller

Question

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!

Martin · Accepted Answer · 2014-03-20 09:19:06Z

0

Try this:

app.js

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

appCtrl.js:

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

}]);

answered Mar 20, 2014 at 9:19

Martin

1,3532 gold badges16 silver badges29 bronze badges

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

2 Comments

jeromerg Over a year ago

this is exactly what I do! But it fails if the <Script> statements are at the bottom of the index.html file.

jeromerg Over a year ago

Thank you, the issue was actually the self-closing Script-Tag <SCRIPT src=""/> which is buggy in Chrome, as stated in [this other stackoverflow question][1]. [1]: stackoverflow.com/questions/69913/…

Jscti · Accepted Answer · 2014-03-20 09:28:15Z

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" };
}]);

answered Mar 20, 2014 at 9:28

Jscti

14.5k5 gold badges66 silver badges92 bronze badges

1 Comment

jeromerg Over a year ago

Thank you, the issue was actually the self-closing Script-Tag <SCRIPT src=""/> which is buggy in Chrome, as stated in [this other stackoverflow question][1]. [1]: stackoverflow.com/questions/69913/…

Collectives™ on Stack Overflow

Angularjs: How to create separate files for the main-module and the main-controller

2 Answers 2

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related