CODEWITHSUNDEEP
angularjs
theamateurdataanalyst
theamateurdataanalyst

Reputation: 2834

Keeping controllers in different files not working in Angular

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?

Upvotes: 1

Views: 597

Answers (3)

Sivailango
Sivailango

Reputation: 564

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

Upvotes: 0

Phil
Phil

Reputation: 165062

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'
            })...
        });
})();

Upvotes: 1

Andrew Eisenberg
Andrew Eisenberg

Reputation: 28757

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.

Upvotes: 1

Related Questions