参考：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. （转）php中global和$GLOBALS[]的分析之一

    PHP 的全局变量和 C 语言有一点点不同,在 C 语言中,全局变量在函数中自动生效,除非被局部变量覆盖     这可能引起一些问题,有些人可能漫不经心的改变一个全局变量.PHP 中全局变量在函数中使 ...

  2. oracle 添加表分区

    alter table DF_WRITE_FILES_H add partition DF_WRITE_FILES_H96 values less than (201512) tablespace T ...

  3. 最全ASCLL码

    结果 描述 实体编号   space ! exclamation mark ! " quotation mark " # number sign # $ dollar sign $ ...

  4. WPF 依赖属性与依赖对象

    在介绍依赖属性之前,我先介绍下属性的历史 属性的历史:      早期C++的类中,只有字段及方法,暴露数据靠的是方法, 但是字段直接暴露会不安全,所以才用方法来暴露,在设置的时候加些约束,在MFC中 ...

  5. hdu1142 A Walk Through the Forest( Dijkstra算法+搜索）

    看到这道题,想起了我家旁边的山! 那是一座叫做洪山寨的山,据说由当年洪秀全的小妾居住于此而得名! 山上盛产野果(很美味)! 好久没有爬上去了! #include<stdio.h> #inc ...

  6. 试用ubuntu-12.04.3-desktop-amd64

    由于工作需要,终于要开始使用大名鼎鼎的ubuntu了,从网上下了个ubuntu-12.04.3-desktop-amd64,通过vmware安装,过程相当顺利,只是装完后重启动,发现回到了命令行模式. ...

  7. 解决WebService本地访问正常，远程无法访问的问题

    发布webservice后部署到自己的服务器上,然后本机,外网远程访问都没事,在用户服务器上部署后只能本机访问,远端访问不了,通过网络搜索到下面方法,但改后仍然不行.原来在自己服务器部署时是在默认网站 ...

  8. JS中 submit提交与Form表单里的onsubmit的调用问题？

    最近在开发中遇到了表单提交前验证的问题,用一个普通的button按钮代替submit按钮,在提交前触发这个button的onclick事件,在其事件中触发form的submit事件.问题出现了: &l ...

  9. HTML 内嵌JS脚本、相关参考手册

    提供一个JS.HTML参考手册入口:http://www.w3school.com.cn/jsref/index.asp. JavaScript 最常用于图片操作.表单数据处理以及内容动态更新. &l ...

  10. Xcode export/upload error: Your session has expired. Please log in-b

    1.Xcode export/upload error: Your session has expired. Please log in 我在stack over flow上找到的答案:  一看pre ...