Модуль AngularJS не определен при создании службы с использованием заводского метода

Я изучаю AngularJS в MVC и создал сервис для передачи моей модели в Angular Controller. Но это дает мне ошибку

Ошибка выполнения 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);
}

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

Я не понимаю, где я ошибаюсь.


javascript angularjs asp.net-mvc angularjs-service
person confusedDeveloper    schedule 08.08.2015    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Вам нужно переместить встроенный скрипт сразу после 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>
person Pankaj Parkar    schedule 08.08.2015
comment
Ваша последняя строка Also the variable should be account instead of accountModule решила мою проблему. Спасибо за помощь. Теперь я могу передать модель контроллеру AngularJS. :) - person confusedDeveloper; 08.08.2015
comment
Также я хотел бы отметить, что перенос сервиса на JS не сработает, так как мне нужно передать данные из cshtml в контроллер. - person confusedDeveloper; 08.08.2015

arrow_upward
0
arrow_downward

Порядок рендеринга MVC View — 1. Сначала начинается с View, а затем связанных пакетов (внешний CSS, JS).

2. Чтобы передать данные модели, нам нужно иметь встроенный элемент в файле .cshtml (хотя это и не рекомендуется), но, если это так, используйте инъекцию службы для связанного контроллера.

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

</script>
}

  1. Теперь, когда приведенный выше код является встроенным, он выполняется с самим View, но модуль Angular еще не определен, поскольку его еще предстоит загрузить. Следовательно, он выдаст ошибку undefined.

  2. Чтобы решить эту проблему, мы можем использовать RenderSection в _Layout.cshtml после загрузки всех основных файлов (пакетов), это заставляет даже встроенные разделы загружаться только после загрузки этих файлов (на шаге 2). . Для этой цели использовались скрипты @section). Фрагмент из файла _Layout.cshtml

    @Scripts.Render("~/bundles/angularjs"); @RenderSection («скрипты», ложь);

person Vishal Sridhar    schedule 12.07.2017