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
– lealceldeiro, Commented Jan 19, 2017 at 13:24

lealceldeiro · Accepted Answer · 2017-01-19 13:18:57Z

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, 2017 at 13:18

answered Jan 18, 2017 at 20:41

lealceldeiro

15.1k7 gold badges55 silver badges85 bronze badges

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

7 Comments

lealceldeiro Over a year ago

@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.

user7437694 Over a year ago

Uncaught Error: [$injector:nomod] 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 Over a year ago

Error: [ng:areq] errors.angularjs.org/1.5.7/ng/…

lealceldeiro Over a year ago

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 stackoverflow.com/questions/18287482/…, stackoverflow.com/questions/21045416/…, stackoverflow.com/questions/34144661/…, stackoverflow.com/questions/21673404/…).

lealceldeiro Over a year ago

@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?

|

Vivek Jha · Accepted Answer · 2017-01-18 20:40:18Z

0

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.
}]

answered Jan 18, 2017 at 20:40

Vivek Jha

1,6163 gold badges17 silver badges28 bronze badges

Comments

zishone · Accepted Answer · 2017-01-19 04:09:02Z

0

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>

answered Jan 19, 2017 at 4:09

zishone

1,2441 gold badge10 silver badges11 bronze badges

Collectives™ on Stack Overflow

Angular controller in separated files does not work

3 Answers 3

7 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related