CODEWITHSUNDEEP
angularjsasp.net-mvc-4
mdiaz
mdiaz

Reputation: 27

Module 'MyApp' is not available

I am using angular in my mvc project.

I have added the following js file and called it MyApp.js

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

 })();

On my _Layout.cshtml I have added ng-app to the body tag

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

On the view I want to display the angular object I have added:

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

In my bundles I added the following code:

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

However every time i run the program I get the error

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

I know I an not misspelling it I read it could be an issue with the order of my scripts. I have tried several alternatives but can't find the problem.

Could someone help me?

Upvotes: 1

Views: 1052

Answers (2)

Serdar D.
Serdar D.

Reputation: 3391

I have also faced same issue and in my case it was just something in controller.

I have found that there is a encoding problem with my JSON. If you face the same issue try to empty your controllers and and see if there is a syntax or encoding error.

Upvotes: 0

Cyril Gandon
Cyril Gandon

Reputation: 17058

You include MyApp.js in your view, not in my_Layout.cshtml. Try to include it at the same level as your <body>. Angular try to load you app before it is included, which leads to the error. Of course, the part @Scripts.Render("~/bundles/angular") should be in the my_Layout.cshtml too.

I remember that you can have this error if you include twice the same module, make sure you are not inculding twice your MyApp module.

Upvotes: 1

Related Questions