模块' MyApp'不可用

时间:2016-03-31 06:36:45

标签: angularjs asp.net-mvc-4

我在我的mvc项目中使用angular。

我添加了以下js文件并将其命名为MyApp.js

GridReader

在我的_Layout.cshtml上,我已将ng-app添加到正文标记

 (function () {
//Create a Module 
var MyApp = angular.module('MyApp', ['ngRoute']);  // Will use ['ng-Route'] when we will implement routing

 })();

在视图上我想显示我添加的角度对象:

<body ng-app="MyApp">
        .....
        Code
        .....
</body>

在我的捆绑包中,我添加了以下代码:

  @Scripts.Render("~/bundles/angular")

  <script src="../../Scripts/MyApp.js" type="text/javascript"></script>
  <script src="~/Scripts/AngularController/BudgetAndDetails.js" type="text/javascript"></script>

  <script type="text/javascript">
  $(function () {
      $('body').on('click', '.CX span', function () {
          //When Click On + sign
          if ($(this).text() == '+') {
              $(this).text('-');
          }
          else {
              $(this).text('+');
          }
          $(this).closest('tr') // row of + sign
            .next('tr') // next row of + sign
            .toggle(); // if show then hide else show

      });
    });
  </script>
 <div ng-controller="BudgetAndDetails">
  <table class="tableData" border="0" cellspacing="0" cellpadding="0">
     <thead>
         <tr>
           <th></th>
           <th>Budget Name</th>
           <th>Year</th>
           <th>Month</th>

       </tr>
   </thead>
    <tbody ng-repeat="O in budgetdetails">
        <tr ng-class-even="'even'" ng-class-odd="'odd'">
            <td class="CX"><span>+</span></td>
            <td>{{O.budget.BudgetName}}</td>
            <td>{{O.budget.Year}}</td>
            <td>{{O.budget.monthname.MonthName1}}</td>

        </tr>
        <tr class="sub">
            <td></td>
            <td colspan="5">
                <table class="tableData" border="0" cellspacing="0" cellpadding="0">
                    <tr>
                        <th>Category</th>
                        <th>Subcateogry</th>
                        <th>Amount</th>

                    </tr>
                    <tr ng-repeat="a in O.budgetdetails" ng-class-even="'even'" ng-class-odd="'odd'">
                        <td>{{a.category.CategoryName}}</td>
                        <td>{{a.subcategory.SubCategoryName}}</td>
                        <td>{{a.Amount}</td>

                    </tr>
                </table>
            </td>
        </tr>
    </tbody>
</table>
</div>

然而每次我运行程序时都会收到错误

  

错误:[$ injector:nomod]模块&#39; MyApp&#39;不可用!您要么错误拼写了模块名称,要么忘记加载它。如果注册模块,请确保将依赖项指定为第二个参数。   http://errors.angularjs.org/1.5.3/ $注射器/ NOMOD?P0 = MyApp的

我知道我没有拼错它我读到它可能是我的脚本顺序的问题。我尝试了几种替代方案,但无法找到问题。

有人可以帮助我吗?

2 个答案:

答案 0 :(得分:1)

您在视图中包含MyApp.js,而不是my_Layout.cshtml。 尝试将其包含在与<body>相同的级别。 Angular尝试在应用程序包含之前加载您,这会导致错误。当然,部分@Scripts.Render("~/bundles/angular")也应该在my_Layout.cshtml中。

我记得如果您包含两次相同的模块,则可能会出现此错误,请确保您没有将MyApp模块包含两次。

答案 1 :(得分:0)

我也面临同样的问题,在我的情况下,它只是在控制器中

我发现我的JSON存在编码问题。如果您遇到同样的问题,请尝试清空控制器并查看是否存在语法或编码错误