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

Javascript AngularJS错误:$injector:modulerr模块错误在我的浏览器窗口中,javascript,angularjs,asp.net-mvc,Javascript,Angularjs,Asp.net Mvc,我是angularjs新手。我的cshtml文件是: @{ //Layout = "~/Views/Shared/_Layout.cshtml"; Layout = null; } <!DOCTYPE html> <html ng-app="myApp"> <head> <meta name="viewport" content="width=device-width" /> <title>Inde

我是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>
我在F12控制台窗口中遇到此错误:

angular.min.js:6未捕获错误:[$injector:moduler] $injector/modulerr?p0=myApp&p1=Error%3A%…%20c%20(http%3A%2F%2localhost%3A5760%2FScripts%2fagnal.min.js%3A18%3A60)


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

在主模块中,您已经注入了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”元素的click函数中被实例化,这就是问题所在


在单击函数外定义“MyCtrl”

您尚未定义模块myApp首先定义它。您好,我已在html标记和下面的脚本标记中定义了它
var app=angular.module('myApp',['ngGrid')。我还需要做什么?你检查过身体上应该有“DemoController”或“MyCtrl”吗?我的身体标签是
为什么要使用jquery click如果你正在制作AngularJs应用程序,你应该使用ng click。代码将很容易理解,谢谢您的快速回复。如果我点击该链接,它会将我重定向到该链接“”。这与ngRoute有关。嗨,我已经按照你的建议做了,但是我得到了同样的错误。这和我们的路线有关。对不起。。现在ngGrid已被弃用。。u应该使用angularJsui的ui.grid模块。grid已经取代了ngGrid,ngGrid已经被弃用。不过你的回答确实帮我解决了问题,谢谢。如果您知道ui.grid的视频教程,请推荐任何初学者视频教程。我不知道实时教程,但您可以通过以下链接查看ui.grid实时演示:您好!谢谢你抽出时间。我移动了我的代码
app.controller('MyCtrl',function($scope){$scope.Data=Product;$scope.gridOptions={Data:'Data'};})来自单击事件,并将其放置在此行下
var-app=angular.module('myApp',['ngGrid'])但我还是遇到了同样的错误。我还尝试将它移动到标题中单独的脚本标记中,但同样的错误
https://github.com/angular-ui/ui-grid