AngularJS controller is not a function, got undefined (data from factory)

Question

I'm refactoring an old AngularJS project so it's less dumb and bad, separating controllers and exporting data with a factory rather than having all the data inside of one giant controller. I can't get very far, unfortunately, because my main controller isn't working. I've searched SO extensively and none of the issues I've seen matched mine. I also ran it by a senior dev and he couldn't find the issue. Any help is much appreciated. The app did work before my refactoring efforts.

My index.html:

<!DOCTYPE html>
<html ng-app="campSpots">
<head>
<meta charset="utf-8">
<title>Camp Spots</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body ng-controller="mainCtrl">

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="components/main.ctrl.js"></script>
</body>
</html>

My factory:

(function(){
"use strict";
  angular
   .module("campSpots")
   .factory("postFactory", function($http){
    function getPosts(){
    return $http.get('data/posts.json');
  };
  return {
    getPosts: getPosts
  };
 })
})

And my controller, main.ctrl.js:

(function(){
"use strict";
angular
   .module("campSpots")
      .controller("mainCtrl", mainCtrl);

      mainCtrl.$inject = ['$scope', '$http', 'postFactory'];

      function mainCtrl($scope, $http, postFactory){
    postFactory.getPosts().then(function(posts){
      $scope.posts = posts.data;
    })
  }
})

This error means angular can't find the controller. For starters check that your index.html includes the script that contains the controller Also check that you used the exact controller name in your routes config and/or ng-controller definition. — Ladmerc
– Ladmerc, Commented Mar 9, 2017 at 15:13

Community · Accepted Answer · 2017-05-23 11:53:57Z

1

You neglected to invoke the function in your IIFE for both the controller and factory.

They should go like this:

(function(){
    ///code
}());

That last () is missing in your code, so it's not actually running the code blocks.

edited May 23, 2017 at 11:53

CommunityBot

11 silver badge

answered Mar 9, 2017 at 15:14

lealceldeiro

15.1k7 gold badges55 silver badges85 bronze badges

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

3 Comments

Harris Over a year ago

FYI, both (function(){ })() and (function(){ }()) work equally. There was no need to edit that.

lealceldeiro Over a year ago

@HarrisWeinstein, yes! I noticed that just after I edited it :) :) I'm so used to use this style (Douglas Crockford's style) that I came to believe the other way was incorrect. Thanks for your clarification. Here there are other options too. Cheers!

Harris Over a year ago

Neat, I didn't know about those other ways.

Collectives™ on Stack Overflow

AngularJS controller is not a function, got undefined (data from factory)

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related