Angular controller in separated files does not work

Question

Why a controller does not work in separated files?

Application structure:

store.html:

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
    </head>
    <body>
        <div ng-controller="userController">
            <h1>{{user.firstname}}</h1>
        </div>
        <script src="/static/app/user/userController.js"></script>
        <script src="/static/app/app.js"></script>
    </body>
</html>

app.js:

var app = angular.module("myApp",[]);
   app.controller("myContoller",["$scope",function ($scope) {
}]);

userController.js

app.controller("userController",["$scope",function ($scope) {
    $scope.hello= "john doe";
    $scope.user = {
        id:1,
        firstname:"Wojciech"
    }
}]);

if you haven't solved the problem yet, check out my answer (updated ). that should work now — lealceldeiro, Jan 19 '17 at 13:24

lealceldeiro · Answer 1 · 2017-01-19T13:18:57.653

1

Edit: Based on the comment of @Claies, I updated the answer for future reference.

You have to change the order of your script tags in the store.html like this:

store.html

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
    </head>
    <body>
        <div ng-controller="userController">
            <h1>{{user.firstname}}</h1>
        </div>
        <script src="/static/app/app.js"></script>
        <script src="/static/app/user/userController.js"></script>
    </body>
</html>

And you need to declare app in userController.js as well, the same way you did in app.js.

userController.js

var app = angular.module("myApp"); //locate the module first   
app.controller("userController",["$scope",function ($scope) {
        $scope.hello= "john doe";
        $scope.user = {
            id:1,
            firstname:"Wojciech"
        }
    }]);

edited Jan 19 '17 at 13:18

answered Jan 18 '17 at 20:41

lealceldeiro

14,342
6
49
80

@user7437694, Are you getting any errors in console? If it doesn't work there must be some traces somewhere. Please take a look at the dev tools in your web browser and share it with us. – lealceldeiro Jan 18 '17 at 21:19
Uncaught Error: [$injector:nomod] http://errors.angularjs.org/1.5.7/$injector/nomod?p0=myApp at angular.js:38 at angular.js:2075 at b (angular.js:1999) at Object.module (angular.js:2073) at userController.js:1 (anonymous) @ angular.js:38 (anonymous) @ angular.js:2075 b @ angular.js:1999 (anonymous) @ angular.js:2073 (anonymous) @ userController.js:1 – user7437694 Jan 18 '17 at 21:38
Error: [ng:areq] http://errors.angularjs.org/1.5.7/ng/areq?p0=userController&p1=not%20a%20function%2C%20got%20undefined – user7437694 Jan 18 '17 at 21:39
Well, this can many things. I think, maybe there is a problem with the inclusion/declaration of either your modules/files in your project or some resource (as ngRoute, for instance). (See some questions about this on http://stackoverflow.com/questions/18287482/angularjs-1-2-injectormodulerr, http://stackoverflow.com/questions/21045416/angular-js-uncaught-error-injectormodulerr, http://stackoverflow.com/questions/34144661/angular-uncaught-error-injectornomod-module-controllers-is-not-available, http://stackoverflow.com/questions/21673404/error-ngareq-from-angular-controller). – lealceldeiro Jan 18 '17 at 22:01
@user7437694, also make sure you have all required resources loaded into your project. How are you including the resources (controllers, services, etc) in your project? – lealceldeiro Jan 18 '17 at 22:04
@user7437694 based on the code in the original question, this answer won't work, because you are declaring your `userController.js` script **before** your `app.js` script, so the `userController` can't find `app` since it isn't declared yet. This answer would be correct, if the order of your scripts were changed as well. – Claies Jan 19 '17 at 03:47
@Claies, thanks. You're completely right!. I updated the answer for future reference. – lealceldeiro Jan 19 '17 at 13:22

score 0 · Answer 2 · answered Jan 18 '17 at 20:40

source app.js before userController.js

In case you want to define controller in separate file, you can do so. You just need to get your app reference.

userController.js

/*
   angular.module call without "[]" returns the app object 
   rather than creating a new app.
*/
var app = angular.module("app"); 
app.controller("ControllerName", ["$scope", function($scope){
    // controller code here.
}]

score 0 · Answer 3 · answered Jan 19 '17 at 04:09

app.js should be refered in the html first before the controllers.

Instead of:

<script src="/static/app/user/userController.js"></script>
<script src="/static/app/app.js"></script>

Do this:

<script src="/static/app/app.js"></script>    
<script src="/static/app/user/userController.js"></script>

Angular controller in separated files does not work

3 Answers3