参考：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的更多相关文章

  1. Asp.net MVC集成Google Calendar API(附Demo源码)

    Asp.net MVC集成Google Calendar API(附Demo源码) Google Calendar是非常方便的日程管理应用,很多人都非常熟悉.Google的应用在国内不稳定,但是在国外 ...

  2. ASP.NET MVC+Vue.js实现联系人管理

    接触了一天vue.js,简单浏览了一本关于vue的电子书,就开始动手使用ASP.NET MVC和Vue.js开发一个联系人管理的小程序. 先看一下这个联系人管理的小程序的界面,也就是我们大概要实现什么 ...

  3. [Asp.net Mvc]为js,css静态文件添加版本号

    方式一: 思路 string version = ViewBag.Version; @Scripts.RenderFormat("<script type=\"text/ja ...

  4. Angular.js路由 简单小案例

    代码案例: <html> <head> <meta charset="utf-8"> <title>AngularJS 路由实例&l ...

  5. Asp.Net Mvc后台数据验证自测小Demo

    使用过MVC的同学一定不陌生MVC的模型绑定和模型校验,使用起来非常方便,定义好Entity之后,在需要进行校验的地方可以打上相应的Attribute,在Action开始时检查ModelState的I ...

  6. Asp.Net MVC 中JS通过ajaxfileupload上传图片获取身份证姓名、生日、家庭住址等详细信息

    客户要求用身份证图片上传获取身份证的详细信息就下来研究了一下(现在的客户真的懒 身份证信息都懒得输入了哈哈...),经过慢慢研究,果然皇天不负有心人搞出来了.这个借助的是腾讯的一个SKD  腾讯优图云 ...

  7. asp.net mvc route 中新发现的小技巧

    在发现这个小技巧之前,我经常被某些问题困扰,我们以博客园为例 1:是分类名称 2:是分类url 3:点击分类,进入的页面,要显示分类的名称 4:点击分类,进入的页面,要用分类相关参数 在日常web的开 ...

  8. asp.net mvc开发过程中的一些小细节

    现在做网站用mvc越来越普及了,其好处就不说了,在这里只记录一些很多人都容易忽视的地方. 引用本地css和js文件的写法 这应该是最不受重视的地方,有同事也说我有点小题大作,但我觉得用mvc还是得有一 ...

  9. 【转】asp.net mvc css/js压缩合并 --- combres

    转自:http://www.cnblogs.com/zxktxj/archive/2012/05/30/2526246.html NuGet   网站:http://nuget.codeplex.co ...

随机推荐

  1. c# hasvalue属性

    // 数据类型? 表示参数的值可以为null空,此时这个参数可调用属性hasvalue来判断,此参数是否有除了null以外的值;进而进行其它的工作 //必须要加?才可用hasvalue属性 priva ...

  2. MySQL中TIMESTAMP和DATETIME区别

    1.两者的存储方式不一样 TIMESTAMP:把客户端插入的时间从当前时区转化为UTC(世界标准时间)进行存储.查询时,将其又转化为客户端当前时区进行返回. DATETIME:不做任何改变,基本上是原 ...

  3. Overload和Override的区别？

    Overload和Override的区别? Override是重写:方法名称.参数个数,类型,顺序,返回值类型都是必须和父类方法一致的.它的关系是父子关系Overload是重载:方法名称不变,其余的都 ...

  4. My.Ioc 代码示例——谈一谈如何实现装饰器模式，兼谈如何扩展 My.Ioc

    装饰器模式体现了一种“组合优于继承”的思想.当我们要动态为对象增加新功能时,装饰器模式往往是我们的好帮手. 很多后期出现的 Ioc 容器都为装饰器模式提供了支持,比如说 Autofac.在 My.Io ...

  5. EBS基础—表的后缀

    1._ALL或无后缀:基表,所有对数据操作最终都是对基表的操作,表包含所有不同经营单位的信息,多组织环境. 2._B/_T:也是一种基表.一些数据和验证存储在此表中. 3._TL:语言的基表,TL表支 ...

  6. MySQL 插入数据

    MySQL 插入数据 MySQL 表中使用 INSERT INTO SQL语句来插入数据. 你可以通过 mysql> 命令提示窗口中向数据表中插入数据,或者通过PHP脚本来插入数据. 语法 以下 ...

  7. java 安卓开发之文件的读与写

    java文件的读与写,代码: String file="user.txt"; private void writeFileData(String str1, String str2 ...

  8. Mysql 源码编译教程贴

    题外话:这是一篇教程贴,不仅学的是mysql的编译,还是一些编译的知识.我也是一个菜鸟,写一些感悟和心得,有什么问题可以批评指正,谢谢! 如果只是为了安装请移到我的另一篇安装贴: Mysql安装贴 环 ...

  9. linux文件系统结构和权限

    linux文件系统的目录结构 熟话说的好,好记性不如烂笔头,虽然没用笔,但动动手指还是可以的.下面的目录结构都是摘抄过来的,动动手指来加深下印象吧,还能练习下打字速度,哈哈,多好啊. ...突然又改变 ...

  10. 各种driver的继承关系

    AndroidDriver extends AppiumDriver extends DefaultGenericMobileDriver extends RemoteWebDriver