Javascript AngularJS错误:$injector:modulerr模块错误在我的浏览器窗口中
我是angularjs新手。我的cshtml文件是: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
@{
//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