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

Question

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)

Hello , i have defined it in html tag and in script tag below var app = angular.module('myApp', ['ngGrid']);. what else i have to do? — Adeel Saleem
– Adeel Saleem, Commented Mar 31, 2016 at 7:50
Have you checked that on body you should have "DemoController" or "MyCtrl"? — Amit Sirohiya
– Amit Sirohiya, Commented Mar 31, 2016 at 8:37
why using jquery click if you are making an AngularJs app you should use ng-click instead. code will be easy to understand then — Amit Sirohiya
– Amit Sirohiya, Commented Mar 31, 2016 at 9:23

John Chang · Accepted Answer · 2016-03-31 05:59:50Z

0

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.

answered Mar 31, 2016 at 5:59

John Chang

1312 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Adeel Saleem Over a year ago

Thanks for a quick reply . if i click on the link it redirects me to this link "docs.angularjs.org/error/$injector/…". it has something to do with ngRoute.

panwar · Accepted Answer · 2016-03-31 06:04:16Z

0

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

answered Mar 31, 2016 at 6:04

panwar

1,19710 silver badges13 bronze badges

4 Comments

Adeel Saleem Over a year ago

Hi , I have done what you have proposed but i am getting the same error. its something to do with ngroute.

panwar Over a year ago

Sorry.. Now ngGrid is deprecated.. u should use ui.grid module of angularJs

Adeel Saleem Over a year ago

ui.grid has replaced ngGrid, and ngGrid has been deprecated. Your answer DID help me figure out my problem though, thanks. please recommend any beginners video tutorials for ui.grid if you know of any.

panwar Over a year ago

I have no idea about the live tutorials but u can check the ui-grid live demo at this link: jsfiddle.net/relly/ysmg1qkt

Amit Sirohiya · Accepted Answer · 2016-03-31 09:01:15Z

0

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

answered Mar 31, 2016 at 9:01

Amit Sirohiya

3331 silver badge13 bronze badges

1 Comment

Adeel Saleem Over a year ago

Hi there ! thank you for your time. i moved my code

app.controller('MyCtrl', function ($scope) {                                 $scope.Data = Product;                                 $scope.gridOptions = { data: 'Data' };                             });

from click event and placed it under this line var app = angular.module('myApp', ['ngGrid']); but still i am getting the same error.Also i tried moving it into seperate script tag in header but , again , same error

Collectives™ on Stack Overflow

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

3 Answers 3

1 Comment

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related