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.

Answer 1

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.