2016-03-31 8 views
1

私はmvcプロジェクトで角度を使用しています。モジュール 'MyApp'が利用できません

私は私がビューにbodyタグ

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

にNG-アプリを追加したjsの次のファイルを追加し、それは私の_Layout.cshtmlオン

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

})(); 

をMyApp.js呼ばれています私が追加した角度オブジェクトを表示したい:

@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> 

私のバンドルで私は次のコードを追加しました:

bundles.Add(new ScriptBundle("~/bundles/angular").Include(
        "~/Scripts/angular.js", 
        "~/Scripts/angular-route.js")); 

しかし、私はエラーに

Error: [$injector:nomod] Module 'MyApp' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument. http://errors.angularjs.org/1.5.3/ $injector/nomod?p0=MyApp

を取得するプログラムを実行するたびに、私は私は私はそれが私のスクリプトの順序の問題である可能性があり読んで、それを誤った綴りではない知っています。私はいくつかの選択肢を試しましたが、問題を見つけることはできません。

誰かが私を助けることができますか?

答えて

1

を表示すると、my_Layout.cshtmlではなく、表示されます。 <body>と同じレベルに含めるようにしてください。 Angularは、それがインクルードされる前にアプリをロードしようとしますが、エラーにつながります。もちろん、部分@Scripts.Render("~/bundles/angular")my_Layout.cshtmlにあるはずです。

同じモジュールを2回含む場合は、このエラーが発生する可能性があることを覚えておいてください。MyAppモジュールを2回インソールしていないことを確認してください。

+0

変更を加えましたが、まだエラーがあります。 MyApp.jsファイルを削除してもう一度作成しましたが、エラーはなくなりました。ありがとうございました。 – mdiaz

0

私も同じ問題に直面していましたが、私のケースではコントローラにはのものしかありませんでした。

JSONにエンコードの問題があることが判明しました。同じ問題が発生した場合は、コントローラを空にしての構文またはエンコーディングエラーがあるかどうかを確認してください。