CODEWITHSUNDEEP
javascriptangularjsasp.net-mvc
Adeel Saleem
Adeel Saleem

Reputation: 11

AngularJS Error: $injector:modulerr Module Error in my browser window

I am new to angularjs .my cshtml file is :

@{
    //Layout = "~/Views/Shared/_Layout.cshtml";
    Layout = null;
}


<!DOCTYPE html>

<html ng-app="myApp">
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <style>
        .gridStyle {
            border: 1px solid #d4d4d4;
            /*width: 400px;
            height: 200px;*/
        }
    </style>
    <script src="@Url.Content("~/Scripts/jquery-1.10.2.js")" type="text/javascript"></script>
    <script type="text/javascript" src="~/Scripts/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-resource.min.js"></script>
</head>
<body ng-controller="MyCtrl">
    <div class="container">
        <script type="text/javascript">
            var app = angular.module('myApp', ['ngGrid']);
            $(document).ready(function () {

                ///////////////////////////DISPLAY LIST/////////////////////////
                $('#DisplayListObj').click(function (e) {
                    $.ajax({
                        type: 'GET',
                        dataType: 'json',
                        contentType: 'application/json',
                        url: '@Url.Action("DisplayListObject", "Demo")',
                        success: function (Product) {
                            //var result = '<table>';
                            //for (var i = 0 ; i < Product.length ; i++) {
                            //    result += "<tr>" + "<td>" + Product[i].Id + "\t</td>" + "<td>" + Product[i].Name + "\t</td>" + "<td>" + Product[i].Company + "\t</td>" + "</tr>";
                            //}
                            //$('#IdresultListDisplay').html(result + '</table>');

                            app.controller('MyCtrl', function ($scope) {
                                $scope.Data = Product;
                                $scope.gridOptions = { data: 'Data' };
                            });
                        }
                    });
                });
                ///////////////////////////DISPLAY LIST/////////////////////////
                $('#Add').click(function (event) {


                    var ID = $('#ID').val();
                    var Name = $('#Name').val();
                    var Company = $('#Company').val();
                    $.ajax({
                        type: 'GET',
                        dataType: 'json',
                        data: { ID: ID, Name: Name, Company: Company },
                        contentType: 'application/json',
                        url: '@Url.Action("DisplayObject", "Demo")',
                        success: function (Product) {
                            var result = '<table>';
                            for (var i = 0 ; i < Product.length ; i++) {
                                result += "<tr>" + "<td>" + Product[i].Id + "\t</td>" + "<td>" + Product[i].Name + "\t</td>" + "<td>" + Product[i].Company + "\t</td>" + "</tr>";
                            }
                            $('#IdresultListDisplay').html(result + '</table>');

                        }
                    });
                });
            });

        </script>

        <h3 style="color:white">Display List using JSON @DateTime.Now</h3>
        <a href="#" class="btn btn-default btn-lg" id="DisplayListObj">Display List Object</a>
        <br />
        <br />
        @*<div id="IdresultListDisplay" style="color:white"></div>*@
        <div class="gridStyle" ng-grid="gridOptions"></div>
        <br />
        <br />
        <div id="AddNew">
            <input type="text" id="ID" value="4" name="ID" />
            <br />
            <input type="text" id="Name" value="Name" name="Name" />
            <br />
            <input type="text" id="Company" value="Company" name="Company" />
            <br />
            <a href="#" class="btn btn-default btn-lg" id="Add">Add New</a>
            <br />
        </div>
    </div>
</body>

</html>

and my controller methods are like :

public class DemoController : Controller
    {
        // GET: Demo

        public ActionResult Index()
        {
            return View();
        }
        public ActionResult HelloAjax()
        {
            return Content("Hello Ajax","text/plain");
        }
        public ActionResult Sum(int a , int b)
        {
            return Content((a+b).ToString(), "text/plain");
        }
        public ActionResult DisplayObject(string ID , string Name , string Company)
        {
            mydbEntities ProductEntity = new mydbEntities();
            Product P = new Product();
            P.Id = ID;
            P.Name = Name;
            P.Company = Company;
            ProductEntity.Products.Add(P);
            ProductEntity.SaveChanges();
            return Json(ProductEntity.Products.ToList(), JsonRequestBehavior.AllowGet);
        }
        public ActionResult DisplayListObject()
        {
            mydbEntities ProductEntity = new mydbEntities();
            return Json(ProductEntity.Products.ToList(), JsonRequestBehavior.AllowGet);
        }
    }

i am getting this error in my F12 console window:

angular.min.js:6 Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.2.21/$injector/modulerr?p0=myApp&p1=Error%3A%…%20c%20(http%3A%2F%2Flocalhost%3A5760%2FScripts%2Fangular.min.js%3A18%3A60)

Upvotes: 0

Views: 476

Answers (3)

Amit Sirohiya
Amit Sirohiya

Reputation: 333

You have used "MyCtrl" on body but your "MyCtrl" is instanciated in click function of "#DisplayListObj" element and thats the problem.

Define your "MyCtrl"outside click function

Upvotes: 0

panwar
panwar

Reputation: 1121

In the main module u have injected dependency of ngGrid module. So u need to include the js file which have ngGrid module. Include below files in the head section

https://cdn.rawgit.com/angular-ui/bower-ui-grid/master/ui-grid.min.js

Also include css file for style

https://cdn.rawgit.com/angular-ui/bower-ui-grid/master/ui-grid.min.css

For more information regarding ngGrid Module go through this link

https://github.com/angular-ui/ui-grid

Upvotes: 0

John Chang
John Chang

Reputation: 131

I think you are missing the script src for ngGrid. The error is a link, you can click it to see exactly what module you are missing.

Upvotes: 0

Related Questions