Asp.Net Mvc+Angular.Js自测小Demo
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Asp.Net Mvc+Angular.Js自测小Demo相关的知识，希望对你有一定的参考价值。
参考：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视图
<div ng-view></div>
@{ 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>
以上是关于Asp.Net Mvc+Angular.Js自测小Demo的主要内容，如果未能解决你的问题，请参考以下文章
在 asp.net mvc 之上使用 angular js 的好处
angular.js的路由和模板在asp.net mvc 中的使用
识别 ASP.NET MVC 代码中的 Angular js AJAX 调用