Niranjan Godbole Niranjan Godbole - 28 days ago 16
AngularJS Question

Error message Argument 'angularCrud' is not a function, got undefined in MVC4 with AngularJS

Hi I am developing small Crud operation application in MVC4 with angularJS. I am getting error message as below.

Argument 'angularCrud' is not a function, got undefined


I am refering below article.

http://www.codeproject.com/Articles/1032226/CRUD-Operation-in-ASP-NET-MVC-and-AngularJS


This is my controller code.

public ActionResult Index()
{
return View();
}
public JsonResult GetAllGroups()
{
using (C3KYCEntities db = new C3KYCEntities())
{

var groupList = db.tm_grp_group.ToList();
return Json(groupList, JsonRequestBehavior.AllowGet);
}
}


This is my view code.

<div ng-controller="angularCrud">
<div ng-app="angularCrud">
<div class="divList">
<p><b><i>Group List</i></b></p>
<table class="table table-hover">
<tr>
<td><b>ID</b></td>
<td><b>Name</b></td>
<td><b>Desc</b></td>
<td><b>IsActive</b></td>
</tr>
<tr ng-repeat="group in groups">
<td>
{{group.grp_id}}
</td>
<td>
{{group.grp_name}}
</td>
<td>
{{group.grp_description}}
</td>
<td>
{{group.grp_isactive}}
</td>
<td>
<span ng-click="editgroup(group)" class="btn btn-primary">Edit</span>
<span ng-click="deletegroup(group)" class="btn btn-danger">Delete</span>
</td>

</tr>
</table>
</div>
</div>
</div>


This is my Module.js

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


This is my Service.js

app.service("crudAJService", function ($http) {
alert("Hi");
this.getGroups = function () {
return $http.get("Home/GetAllGroups");
};


Here my alert is not firng.
This is my controller code.

app.controller("angularCrud", function ($scope, crudAJService) {
$scope.divGroup = false;
alert("Hi");
GetAllGroups();
function GetAllGroups() {
var getGroupData = crudAJService.getGroups();
getGroupData.then(function (group) {
alert("Hi");
$scope.groups = group.data;
}, function () {
alert('Error in getting group records');
}
);
}

});


I stuck in Module.js. Execution will not go further and I am getting error as Argument 'angularCrud' is not a function, got undefined. Can someone tell me Where I am going wrong in the above code? Thank you all.

Answer

Try to change your module name rather than having same name for controller and module,

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

Also ng-controller should come after ng-app

<div ng-app="Crud">
  <div ng-controller="angularCrud">