【发布时间】：2016-07-19 10:08:17
【问题描述】：
我是 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=Error%3A%…%20c%20(http%3A%2F%2Flocalhost%3A5760%2FScripts%2Fangular.min.js%3A18%3A60)
【问题讨论】：
-
你还没有定义一个模块 myApp 先定义它。
-
你好，我已经在html标签和
var app = angular.module('myApp', ['ngGrid']);下面的脚本标签中定义了它。我还需要做什么？ -
你检查过身体上应该有“DemoController”或“MyCtrl”吗？
-
我的身体标签为
<body ng-controller="MyCtrl"> -
为什么要使用 jquery click 如果您正在制作 AngularJs 应用程序，您应该使用 ng-click 代替。那么代码就很容易理解了
标签： javascript angularjs asp.net-mvc