AngularJS + ASP.NET MVC - Controller undefined

Question

Hullo everyone, I am having a problem with AngularJs not reconizing my controller, I have summarised what I have done below.

Starting point: AngularJs tutorial http://www.thinkster.io/angularjs/ZPCQtVfGba/angularjs-controllers

Problem: defined controller in file (gets retrieved correctly when visiting page), added ng-controller directive to relevant div, got javascript runtime error (

Error: [ng:areq] http://errors.angularjs.org/1.3.0-beta.18/ng/areq?p0=FirstCtrl&p1=not%20a%20function%2C%20got%20undefined

)

Before posting I checked whether I had included my controller implementation before including Angular but it is not the case.

What am I missing? I suspect it might have something to do with declaring controllers in the global scope (e.g. Controller not a function, got undefined, while defining controllers globally) but I am not really sure whether this is indeed the case.

Thanks in advance!

_Layout .cshtml

<!DOCTYPE html>
<html ng-app>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - My ASP.NET Application</title>
    @RenderSection("PageSpecificStyles",required:false)
</head>
<body>

    @RenderBody()


    @RenderSection("BodyScripts", required: false)
</body>
</html>

Index.cshtml:

@{
    ViewBag.Title = "Home Page";
}

@section PageSpecificStyles{
    <style>
        div {
            margin-left: 20%;
        }
    </style>
}

@section BodyScripts{
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.18/angular.min.js"></script>
    <script src="~/Scripts/FirstCtrl.js"></script>
}
<div ng-controller="FirstCtrl">

    <div>
        <h1>Hello {{data.message}}</h1>
    </div>
</div>

FirstCtrl.js (in ~/scripts)

function FirstCtrl($scope) {
    $scope.data = { message: "Cat!" };
}

try swapping @RenderBody() & @RenderSection("BodyScripts", required: false) around — Rohan Büchner, Aug 15 '14 at 16:25
@RohanBüchner: thank you for your suggestion but this only affects the relative order of
and the two script tags, not sure whether it will work but trying it anyway. — Andrea Scarcella, Aug 15 '14 at 16:29
possible duplicate of [Controller not a function, got undefined, while defining controllers globally](http://stackoverflow.com/questions/25111831/controller-not-a-function-got-undefined-while-defining-controllers-globally) — PSL, Aug 15 '14 at 16:30
@AndreaScarcella You are using 1.3 beta, do you have controller registered with the module? If not you should. — PSL, Aug 15 '14 at 16:32
@PSL: I have tried registering my controller with the module as follows but apparently I am still misssing somethig (got same error) function FirstCtrl($scope) { $scope.data = { message: "Cat!" }; }; angular.module('app', []).controller('FirstCtrl', FirstCtrl); — Andrea Scarcella, Aug 15 '14 at 16:39
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/59421/discussion-between-andrea-scarcella-and-psl). — Andrea Scarcella, Aug 15 '14 at 16:42
@AndreaScarcella unforturnately i cannot access chat in here... :( — PSL, Aug 15 '14 at 16:43
No probl, just provide an answer (including the last bit about ng-app) and I will accept it. — Andrea Scarcella, Aug 15 '14 at 16:44

score 2 · Accepted Answer · edited May 23 '17 at 10:24

As you suspected, since you are using angular 1.3 beta which has no implicit support for Global controller constructor function discovery, you need to register your controller with the module.

   angular.module('yourApp').controller('FirstCtrl',['$scope', FirstCtrl]);

and also since you are defining an module you need to specify the module name in your ng-app.

  <html ng-app="yourApp">

AngularJS + ASP.NET MVC - Controller undefined

Thanks in advance!

1 Answers1

Linked