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集成Google Calendar API(附Demo源码)
Asp.net MVC集成Google Calendar API(附Demo源码) Google Calendar是非常方便的日程管理应用,很多人都非常熟悉.Google的应用在国内不稳定,但是在国外 ...
- ASP.NET MVC+Vue.js实现联系人管理
接触了一天vue.js,简单浏览了一本关于vue的电子书,就开始动手使用ASP.NET MVC和Vue.js开发一个联系人管理的小程序. 先看一下这个联系人管理的小程序的界面,也就是我们大概要实现什么 ...
- [Asp.net Mvc]为js,css静态文件添加版本号
方式一: 思路 string version = ViewBag.Version; @Scripts.RenderFormat("<script type=\"text/ja ...
- Angular.js路由 简单小案例
代码案例: <html> <head> <meta charset="utf-8"> <title>AngularJS 路由实例&l ...
- Asp.Net Mvc后台数据验证自测小Demo
使用过MVC的同学一定不陌生MVC的模型绑定和模型校验,使用起来非常方便,定义好Entity之后,在需要进行校验的地方可以打上相应的Attribute,在Action开始时检查ModelState的I ...
- Asp.Net MVC 中JS通过ajaxfileupload上传图片获取身份证姓名、生日、家庭住址等详细信息
客户要求用身份证图片上传获取身份证的详细信息就下来研究了一下(现在的客户真的懒 身份证信息都懒得输入了哈哈...),经过慢慢研究,果然皇天不负有心人搞出来了.这个借助的是腾讯的一个SKD 腾讯优图云 ...
- asp.net mvc route 中新发现的小技巧
在发现这个小技巧之前,我经常被某些问题困扰,我们以博客园为例 1:是分类名称 2:是分类url 3:点击分类,进入的页面,要显示分类的名称 4:点击分类,进入的页面,要用分类相关参数 在日常web的开 ...
- asp.net mvc开发过程中的一些小细节
现在做网站用mvc越来越普及了,其好处就不说了,在这里只记录一些很多人都容易忽视的地方. 引用本地css和js文件的写法 这应该是最不受重视的地方,有同事也说我有点小题大作,但我觉得用mvc还是得有一 ...
- 【转】asp.net mvc css/js压缩合并 --- combres
转自:http://www.cnblogs.com/zxktxj/archive/2012/05/30/2526246.html NuGet 网站:http://nuget.codeplex.co ...
随机推荐
- 【开源java游戏框架libgdx专题】-05-模块描述与上下文
模块描述(Modules overview) Input:为所有的平台提供一个统一的输入模型和处理程序. 获取触摸示例: if (Gdx.input.isTouched()) { System.out ...
- Spring框架
Spring框架的根本使命是:简化JAVA开发,为了简化开发,有以下四个策略 基于POJO的轻量级和最小侵入性编程: 通过依赖注入和面向接口实现松耦合: 基于切面和惯性进行声明式编程: 通过切面和模板 ...
- C# - 二叉树表达式计算
很早以前就写过双栈的表达式计算. 这次因为想深入学一下二叉树,网上都是些老掉牙的关于二叉树的基本操作. 感觉如果就学那些概念,没意思也不好记忆.于是动手写了一个表达式计算的应用例子. 这样学习印象才深 ...
- cocos2d-x 读取 json 文件并用 jsoncpp 做解析
一码胜万言(请看注释) CclUtil.h // // CclUtil.h // PracticeDemo // // Created by kodeyang on 8/1/13. // // #if ...
- php小知识点
1.字符串可以里面的字符可以像数组一样访问,比如$s = "123";$s[1]就等于2,如果字符串为中文则会乱码,需要使用mb_substr进行截取: 2.php中的单引号(' ...
- java获得url里面所带参数的值
url: http://localhost:8080/test/list?p=1&d=2014 要获得所带参数p和d的值,方法如下: int p = Integer.parseInt(requ ...
- mongodb3.2系统性学习——4、find()操作
find 操作语法展示: find()操作实例 : //连接数据库 dbService = connect("localhost:27017"); //选择插入集合 db = db ...
- PHP面向对象(OOP)编程完全教程:10.__set()，__get()，__isset()，__unset()四个方法的应用
一般来说,总是把类的属性定义为private,这更符合现实的逻辑.但是, 对属性的读取和赋值操作是非常频繁的,因此在PHP5中,预定义了两个函数”__get()”和”__set()”来获取和赋值其属性 ...
- 【行为型】Mediator模式
中介者模式目的是将对象间的交互封装在一个对象中,从而使用各对象间的相互依赖解耦,并可以独立更改对像间的交互.在实际项目开发过程中,因某些原因(如:业务逻辑处理不当或设计不当等)使得多个不同对象间需要相 ...
- linux下tomcat配置APR方式HTTPS
一.安装APR 创建/usr/local/apr tar zxvf apr-1.4.5.tar.gz cd apr-1.4.5 ./configure --prefix=/usr/local/apr/ ...