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.
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.