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 badges54 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

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

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

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>

Collectives™ on Stack Overflow

Angular controller in separated files does not work

3 Answers 3

7 Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

Comments

Comments

Linked

Related