AngularJS + ASP控制器未定义

AngularJS + ASP.NET MVC - Controller undefined

本文关键字:未定义 控制器 ASP AngularJS      更新时间:2023-09-26

大家好,我遇到了一个问题,AngularJs不识别我的控制器,我总结了我在下面所做的。

起点:AngularJs tutorial http://www.thinkster.io/angularjs/ZPCQtVfGba/angularjs-controllers

问题:在文件中定义了控制器(访问页面时可以正确检索),在相关div中添加了ng-controller指令,得到javascript运行时错误(

)

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

)

在发布之前,我检查了我是否在包含Angular之前包含了我的控制器实现,但事实并非如此。

我错过了什么?我怀疑它可能与在全局范围内声明控制器有关(例如控制器不是函数,未定义,而全局定义控制器),但我不确定是否确实如此。

提前感谢!

_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!" };
}

正如你所怀疑的,因为你使用的是angular 1.3 beta版,它没有隐式支持全局控制器构造函数的发现,所以你需要在模块中注册你的控制器。

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

,而且因为你是在定义一个模块,所以你需要在你的ng-app中指定模块名。

  <html ng-app="yourApp">