Angularjs Argument is not a function got string

Question

I am a newbie to angularjs. I am building an application where my home page will have a list of posts. I thought of using angularjs for two way binding for that page alone. I started with a sample page but ran into issues here itself.

My sample page. I am using ng-app for this div alone as i dont want angularjs to interact with any other aspects of the page.

<div ng-app="posts">
  <ul class="post_list" ng-controller="PostController">
    <li ng-repeat="post in posts">
    {{post.title}}
    {{post.description}}
    </li>
  </ul>
</div>

i have a app.js file which has

var app = angular.module('posts', []);

and a postcontroller.js file with

(function(angular, app) {
  // Define the Controller as the constructor function.
  console.log(app);
  console.log(angular);
  app.controller("PostController",["$scope"], function($scope) {
    $scope.posts = [
      {"title":"asdf", "description":"describe"},
      {"title":"second one", "description":"second describe"},
    ];
  });
})(angular, app);

When i load my home page. I am getting

Error: argument "PostController" is not a function. got string [googlecdn path]angular.min.js:16

What am i missing here. Please help me as i am totally confused. I am new to angularjs and also to javascript.

score 48 · Accepted Answer · answered Jun 20 '13 at 17:11

48

The problem is in the way you are declaring your controller. You should do it like shown below:

app.controller("PostController",["$scope", function($scope) {
    $scope.posts = [
      {"title":"asdf", "description":"describe"},
      {"title":"second one", "description":"second describe"},
    ];
  }]);

Please notice that the second argument is an array with both a $scope string and a function as array's elements. This is a proper syntax to be used to write minification-safe code.

answered Jun 20 '13 at 17:11

pkozlowski.opensource

117,202
60
326
286

worked fine after these changes. Can you point me to some resource which explains why this syntax works with minimification? Thanks for your help. – Anirudhan J Jun 20 '13 at 17:13
1

@R.A.J have a look at the "Dependency Annotation" section in http://docs.angularjs.org/guide/di – pkozlowski.opensource Jun 20 '13 at 17:14
Minification mangles function and argument names but not String literals. – Pascal Mar 19 '14 at 14:43
This answer helped me, but my issue was the closing "]" wasn't at the end of the controller instead at the end of the injections. Ooops. :) – Steven Rogers May 22 '14 at 20:06

Angularjs Argument is not a function got string

1 Answers1