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

我正在学习MVC中的AngularJS并创建了将模型传递给Angular Controller的服务。但它给我的错误使用工厂方法创建服务时AngularJS模块未定义

JavaScript runtime error: '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(); 
    } 
]);

我不明白我出错的地方。

来源

2015-08-08 user2988458

您需要在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>

来源

2015-08-08 06:36:32

您的最后一行'此外变量应该是帐户，而不是accountModule'解决了我的问题。谢谢您的帮助。现在我可以将Model传递给AngularJS控制器。 :) – user2988458

另外我想提一提的是，将服务移动到JS将不起作用，因为我必须将数据从'cshtml'传递到控制器。 – user2988458

MVC视图渲染命令 - 1.开始与视图第一然后相关束（外部CSS， JS）。

2.In为了打发我们必须.cshtml文件中的内联元素（虽然不推荐），但是，如果这是去那么方式，使用服务注入到相关的控制器 -

模型数据

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

</script> 
}

现在，如上面的代码是内联它获取与视图本身执行，但角模块尚未定义为它尚未被下载。因此它会抛出未定义的错误。

为了解决这一点，我们可以将所有的核心文件（包）后使用RenderSection在_Layout.cshtml被加载，这股势力甚至内嵌部分只加载后，这些文件被加载（步骤2 。@section脚本用于此目的）.Snippet from _Layout.cshtml文件

@ Scripts.Render（“〜/ bundles/angularjs”）; @RenderSection（“scripts”，false）;

来源

2017-07-12 16:20:47

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

回答

相关问题