Javascript 使用工厂方法创建服务时，AngularJS模块未定义

我正在MVC中学习AngularJS，并创建了将我的模型传递给AngularController的服务。但它给了我错误

JavaScript运行时错误：“accountModule”未定义

这就是我正在做的：

AccountController.cs

public ViewResult Index()
{
    var accounts = new List<Accounts>
                        {
                            new Accounts
                                {
                                    Id = 111,
                                    Designation = "Tech Lead",
                                    Name = "AAA"
                                },
                            new Accounts
                                {
                                    Id = 222,
                                    Designation = "Softwre Engineer",
                                    Name = "BBB"
                                },
                            new Accounts
                                {
                                    Id = 111,
                                    Designation = "Project Manager",
                                    Name = "CCC"
                                }
                        };

    var settings = new JsonSerializerSettings
                        {
                            ContractResolver = new CamelCasePropertyNamesContractResolver()
                        };

    var accountJson = JsonConvert.SerializeObject(accounts, Formatting.None, settings);

    return this.View("Index", (object)accountJson);
}

var account = angular.module('accountModule',[]);

account.controller('accountController', [
    '$scope', 'accountService', function ($scope, accountService) {


        $scope.employees = accountService.employees;

        $scope.message = "Hi on " + (new Date()).toDateString();
    }
]);

---

我不明白我错在哪里

您需要将内联脚本移动到account.js之后

此外，变量应为

account

，而不是

accountModule

代码

<script src="angular.js"></script>
<script src="app.js"></script>
<script src="account.js"></script>
<script type="text/javascript">
//account.factory('accountService', function() { //this is alternative use below one
angular.module('accountModule').factory('accountService', function() {
    var factory = {};

    factory.employees = @Html.Raw(Model);

    return factory;
});
</script>

//account.factory（'accountService'，function（）{//这是下面的替代用法
角度。模块（'accountModule'）。工厂（'accountService'，函数（）{
变量工厂={}；
factory.employees=@Html.Raw（模型）；
返回工厂；
});

MVC视图呈现顺序- 1.首先从视图开始，然后是相关包（外部CSS、JS）

2.为了传递模型数据，我们需要在.cshtml文件中有一个内联元素（尽管不推荐），但是，如果这是一种方法，那么使用服务注入到相关控制器-

@section scripts
    {
    <script>
    (function (undefined) {
        window.app.factory('searchBinding', function () {
            return @Html.Raw(Json.Encode(Model))
        })
    })(undefined);

</script>
}

@节脚本
{
（功能（未定义）{
window.app.factory（'searchBinding'，函数（）{
return@Html.Raw（Json.Encode（Model））
})
})（未定义）；
}

现在，由于上面的代码是内联的，它将与视图本身一起执行，但Angular模块尚未定义为其尚未下载的模块。因此，它将抛出未定义的错误

为了解决这个问题，我们可以在加载所有核心文件（bundle）后在_Layout.cshtml中使用RenderSection，这将强制即使是内联节也只能在加载这些文件后加载（在步骤2中。@节脚本用于此目的）。来自_Layout.cshtml文件的代码段

@Scripts.Render（“~/bundles/angularjs”）； @渲染部分（“脚本”，false）

---

您的最后一行

变量应该是account而不是accountModule

解决了我的问题。谢谢您的帮助。现在我可以将模型传递给AngularJS控制器了。：）我还想指出，将服务移动到JS将不起作用，因为我必须将数据从

cshtml

传递给控制器。

@section scripts
    {
    <script>
    (function (undefined) {
        window.app.factory('searchBinding', function () {
            return @Html.Raw(Json.Encode(Model))
        })
    })(undefined);

</script>
}