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

AngularJS Module is undefined while creating service using Factory method

本文关键字：AngularJS 模块未定义服务工厂方法创建更新时间：2023-09-26

我在MVC中学习AngularJS，并创建了服务来将我的模型传递给Angular控制器。但是它给了我错误

JavaScript运行时错误:'accountModule' is undefined

这就是我正在做的:

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);
}

Index.cshtml

<script type="text/javascript" src="../../Scripts/Modules/Account/Account.js"></script>
<div ng-app="accountModule">
    <div ng-controller="accountController">
        <h1>{{message}}</h1>
        <div class="container" ng-init="employees in {{employees}}">
            <h2>Employee Details</h2>
            <div class="row">
                <table class="table table-condensed table-hover">
                    <tr>
                        <td>
                            ID
                        </td>
                        <td>
                            Name
                        </td>
                        <td>
                            Designation
                        </td>
                    </tr>
                    <tr ng-repeat="emp in employees">
                        <td>
                            {{emp.id}}
                        </td>
                        <td>
                            {{emp.name}}
                        </td>
                        <td>
                            {{emp.designation}}
                        </td>
                    </tr>
                </table>
            </div>
        </div>
        <div>
            @*{{emps}}*@
        </div>
    </div>
</div>
<script type="text/javascript">
    accountModule.factory('accountService', function() {
            var factory = {};
            factory.employees = @Html.Raw(Model);
            return factory;
        });
</script>

Account.js

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>

MVC视图呈现顺序-1. 从View开始，然后是相关的bundle(外部CSS,JS)。

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

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

现在，由于上面的代码是内联的，它会与View本身一起执行，但是Angular模块还没有定义，因为它还没有被下载。因此，它将抛出undefined错误。

为了解决这个问题，我们可以使用RenderSection在_Layout。在加载了所有的核心文件(bundle)之后，这就强制即使是内联部分也只能在这些文件加载之后才加载(在步骤2中)。@section scripts用于此目的)。_Layout中的片段。cshtml文件

@Scripts.Render("~/包/angularjs");@RenderSection("脚本",假);