rikket rikket - 6 months ago 57
Javascript Question

Error: [ng:areq] Argument 'MyCtrl' is not a function, got undefined

I am new to Angularjs and I was following a tutorial but I got the error in the title.

HTML code:

<div data-ng-app="myApp">
<div data-ng-controller="MyCtrl">
<form>
<table>
<tr style="font-weight: bold">
<td>ID</td>
<td>Name</td>
<td>Surname</td>
<td>House</td>
<td>Address</td>
<td>Locality</td>
<td>Contact</td>
<td>Contact 2</td>
<td>Contact 3</td>
<td>Reply</td>
<td>Edit</td>
</tr>
<tr data-ng-repeat="person in persons">
<td>{{person.ID}}</td>
<td>{{person.Name}}</td>
<td>{{person.Surname}}</td>
<td>{{person.House}}</td>
<td>{{person.Address}}</td>
</tr>


</table>
</form>
</div>
</div>

<script type="text/javascript">
//Defining a Angular module
var myApp = angular.module('myApp', []);
//Defining a Angular Controller
myApp.controller('MyCtrl', ['$scope', '$http', function ($scope, $http) {

//Retrieving the List of people
GetPersons();
//Displaying the Save button
$scope.DisplaySave = true;

function GetPersons() {
//Defining the $http service for getting the people
$http({
method: 'GET', url: '/api/data'
}).
success(function (data) {
if (data != null || data != 'undefined') {
//Assigning people data to the $scope variable
$scope.persons = data;
//Clearing the Person object in create context and Showing default Gender(Male) Checked
$scope.newperson = {
Id: ''
};
}
})
.error(function (error) {
//Showing error message
$scope.status = 'Unable to retrieve people' + error.message;
});
}
} ]);
</script>


API COntroller:

public class DataController : ApiController
{
//GET api/data

public IEnumerable<CommonLayer.Telesales> GetPeople()
{
return new BusinessLayer.Telesales().getUserSession(User.Identity.Name).AsEnumerable();
}


More error details:

magicplayer:init: set version: 1.0.1
adme: onDOMStart: got code: user_key=f52009a2292c2b524ac9af2801caef4c443d7cdc7697dff171f77b3c81cd26fa gender=1 age=4
Error: [ng:areq] Argument 'MyCtrl' is not a function, got undefined
http://errors.angularjs.org/1.2.18/ng/areq?p0=MyCtrl&p1=not%20a%20function%2C%20got%20undefined
at http://localhost:12570/Scripts/angular.js:78:12
at assertArg (http://localhost:12570/Scripts/angular.js:1475:11)
at assertArgFn (http://localhost:12570/Scripts/angular.js:1485:3)
at http://localhost:12570/Scripts/angular.js:7198:9
at http://localhost:12570/Scripts/angular.js:6592:34
at forEach (http://localhost:12570/Scripts/angular.js:327:20)
at nodeLinkFn (http://localhost:12570/Scripts/angular.js:6579:11)
at compositeLinkFn (http://localhost:12570/Scripts/angular.js:6028:13)
at compositeLinkFn (http://localhost:12570/Scripts/angular.js:6031:13)
at compositeLinkFn (http://localhost:12570/Scripts/angular.js:6031:13)
Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:12570/Images/accent.png
onMessageFromBackground: method=statPixel


what am I doing wrong? I search other solutions but it seems like my problem is a bit different.

Answer

Turns out I had and the following html tag in the layout page which was returning this error

<html lang="en ng-app">

Removed the ng-app from the tag and code works perfectly