Keeping controllers in different files not working in Angular

Question

I am currently defining my global module in my routes.js, but for some reason the other controllers are not being created and I keep getting errors that say that my main app module 'LiveAPP' is not available. Here is my code:

routes.js

angular.module('LiveAPP', ['ngRoute']) .config(function($routeProvider, $httpProvider) { $routeProvider .when('/', { templateUrl : '/home.html', controller : 'mainCtrl' }) .when('/signup',{ templateUrl : '/signup.html', controller : 'signUpCtrl' }) .when('/artist',{ templateUrl : '/artistpage.html', controller : 'artistCtrl' }) })

mainCtrl.js

angular.module('LiveAPP') .controller('mainCtrl', ['$scope','$http', '$location',mainCtrl]); function mainCtrl($scope,$http,$location){ $scope.somefunc = function(artistname){ dataFactory.ArtistfromSpotify() .success(function(data, status, headers, config){ console.log(data) }) } };

signUpCtrl

angular.module('LiveAPP') .controller('signUpCtrl', ['$scope','$http',signUpCtrl]); function signUpCtrl($scope,$http){ $scope.user = { email:'', password:'' } $scope.postreq = function(user){ $http({ method: "post", url: "/signup", data:{ user_username:user.email, user_password:user.password } }).success(function(data){ console.log("User posted to the database") }); }; }

artistCtrl

angular.module('LiveAPP') .controller('artistCtrl', ['$scope',function($scope){ $scope.myRating = {number:3} }]) .directive("rateYo", function() { return { restrict: "A", scope: { rating: "=" }, template: "<div id='rateYo'></div>", link: function( scope, ele, attrs ) { console.log(scope.rating.number) $(ele).rateYo({ rating: scope.rating.number }); } }; });

I was under the impression that I could retrieve the main liveAPP module and add controllers in other files by using angular.model('liveAPP').controller(...) For some reason it's not working. Anyone have any idea?

are you loading routes.js before any of the controller files? — kachhalimbu
– kachhalimbu, Commented May 21, 2015 at 5:10
This is why I always advocate one module per file. You can load the files in any order and not run into these issues. — Phil
– Phil, Commented May 21, 2015 at 5:11

Phil · Accepted Answer · 2015-05-21 05:17:00Z

To elaborate on my comment above, when you re-use the same module across files, you need to load the files in the right order to satisfy dependencies as well as ensure the module is created before being used.

An easy way to avoid this problem is to specify one module per file. For example

mainCtrl.js

(function() { angular.module('LiveAPP.main', []) .controller('mainCtrl', ...); })();

and in your routes.js

(function() { angular.module('LiveAPP', [ 'ngRoute', 'LiveAPP.main' ]) .config(function($routeProvider, $httpProvider) { $routeProvider.when('/', { templateUrl: '/home.html', controller: 'mainCtrl' })... }); })();

So is it a best practice to define new modules for each controller? That's what I had initially and then just injected all them into routes.js, but then I wanted to create a factory in routes.js and I wanted to be able to use the functions from this factory in the controller modules and ran into trouble there too. Should I create new file for a factory? If so, how would I go about making sure that I could use these functions in the various controllers? Would that just be like this angular.module('LiveAPP.main', ['factory'])?
I don't know if I'd call it best practice but it's certainly how the angular-seed project is structured. I would say define new modules for each file at least. It's probably neater to only do one thing in each file but that's up to you. And yes, you would simply include the module with whatever you need in it in the list of dependencies wherever required.

Andrew Eisenberg · Accepted Answer · 2015-05-21 05:12:39Z

It's likely that your html file is including the js files in the wrong order. You need to make sure that routes.js appears first in the html.

Sivailango · Accepted Answer · 2015-05-21 05:19:18Z

You need to change signUpCtrl.js to

angular.module('LiveAPP.controller', []) .controller('signUpCtrl', ['$scope','$http',signUpCtrl]);

and inject LiveAPP.controller to your global module

angular.module('LiveAPP', ['ngRoute', 'LiveAPP.controller'])

You cannot have LiveAPP in more than one module. Make the same updates on all of your controllers and inject that module names in routes.js

That's incorrect. angular.module(moduleName) is the getter. Passing a second array argument of dependencies makes it the setter.

Collectives™ on Stack Overflow

Keeping controllers in different files not working in Angular

3 Answers 3

2 Comments

Comments

1 Comment

Linked

Hot Network Questions