AngularJS错误:$injector:modulerr我的浏览器窗口中出现模块错误

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

本文关键字：错误 模块 窗口 我的 injector modulerr AngularJS 浏览器      更新时间：2023-10-23

我是angularjs的新手。我的cshtml文件是：

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

我的控制器方法如下：

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);
        }
    }

我在F12控制台窗口中得到这个错误：

angular.min.js:6未捕获错误：[$injector:modulerr]http://errors.angularjs.org/1.2.21/$injector/modulerr？p0=myApp&p1=错误%3A%…%20c%20（http%3A%2F%2Flocalhost%3A5760%2FScripts%2Angular.min.js%3A18%3A60）

我认为您缺少ngGrid的脚本src。错误是一个链接，您可以单击它来查看您缺少的确切模块。

在主模块中，u注入了ngGrid模块的依赖项。因此，您需要包含具有ngGrid模块的js文件。在标题部分包括以下文件

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

还包括样式的css文件

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

有关ngGrid模块的更多信息，请访问此链接

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

您在body上使用了"MyCtrl"，但您的"MyCtrl"在"#DisplayListObj"元素的点击功能中被安装，这就是问题所在。

定义您的"MyCtrl"外部点击功能

相关文章：