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

StackOverflow https://stackoverflow.com/questions/22528140

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!

Was it helpful?

Solution

Try this:

app.js

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

appCtrl.js:

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

}]);

OTHER TIPS

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" };
}]);
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top