您的位置：首页 > Web前端 > AngularJS

Asp.Net Mvc+Angular.Js自测小Demo

2016-11-25 01:06 399 查看

参考：http://www.cnblogs.com/eedc/p/6082052.html

一、引用anguler:

1、angular.js

2、angular-route.js

3、app.js （下面会讲到）

二、_Layout.cshtml：母版声明angular应用

ng-app="myApp"

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>@ViewBag.Title</title>
@Styles.Render("~/css")
@Scripts.Render("~/jq")
</head>
<body ng-app="myApp">
<p>我就是母版页</p>
<hr />
@RenderBody()
</body>
</html>

三、Index.cshtml：view视图中引用angular视图

@{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>Index</h2>
<div ng-view></div>

四、在App文件夹中，我们创建两个文件，一个是app.js和Show.html。

五、app.js

(function () {
var myApp = angular.module("myApp", ['ngRoute']);

myApp.config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/index', {
templateUrl: '/App/show.html',
controller: 'showCtrl'
}).otherwise({ redirectTo: '/index' });
}]);

myApp.controller('showCtrl', ['$scope', '$http', function ($scope, $http) {
$http.get('home/show').success(function (data) {
$scope.item = data;
});
}]);

})();

六、show.html模板文件

<ul ng-repeat="s in item">
<li>{{s.Name}}</li>
<li>{{s.Age}}</li>
<li>{{s.Gender}}</li>
</ul>
<table>
<tr>
<td>姓名</td>
<td>年龄</td>
<td>性别</td>
</tr>
<tr ng-repeat="s in item">
<td>{{s.Name}}</td>
<td>{{s.Age}}</td>
<td>{{s.Gender}}</td>
</tr>
</table>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航