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.