案例:1 Ionic Framework+AngularJS+ASP.NET MVC WebApi Jsonp 移动开发
落叶的庭院扫的一干二净之后,还要轻轻把树摇一下,抖落几片叶子,这才是Wabi Sabi的境界。
介绍:Ionic是移动框架,angularjs这就不用说了,ASP.Net MVC WebApi提供数据源,开放数据接口
快乐学习 Ionic Framework+PhoneGap 手册1-1{创建APP项目}{点击查看}
快乐学习 Ionic Framework+PhoneGap 手册1-2{介绍Header,Content,Footer的使用}{点击查看}
快乐学习 Ionic Framework+PhoneGap 手册1-3{面板切换}{点击查看}
快乐学习 Ionic Framework+PhoneGap 手册1-4 {登录页面}{点击查看}
快乐学习 Ionic Framework+PhoneGap 手册1-5 {IO开关}{点击查看}
1.安装WebApiContrib.Formatting.Jsonp
2.修改Global.asax.cs
//jsonp GlobalConfiguration.Configuration.AddJsonpFormatter();
3.设计好数据库,可以通过这个地址访问jsonp数据。

4.Index页面代码,注意这里要使用angular.js,关键代码
<!DOCTYPE html>
<html ng-app="ionicApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title> <link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet"> <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<script src="js/angular.js"></script> <!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script> <!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script> <!-- your app's js -->
<script src="js/app.js"></script>
</head>
<body ng-controller="MyCtrl"> <ion-header-bar class="bar-positive">
<h1 class="title">凡酷网络</h1>
</ion-header-bar> <ion-content> <div class="list"> <a ng-repeat="item in items"
href="#/{{item.MenuID}}"
class="item item-thumbnail-left"> <img ng-src="http://192.168.1.100/SAS.APPSite/{{ item.MenuIcon }}">
<h2>{{ item.MenuName }}</h2> </a> </div> </ion-content> </body>
</html>
5.App Js Code
var phonecatApp =angular.module('ionicApp', ['ionic'])
phonecatApp.controller('MyCtrl', function MyCtrl($scope,$http) {
$http
.jsonp("http://192.168.1.100/SAS.APPSite/api/MenuApi?callback=JSON_CALLBACK") .success(function(data) {
// 数据
$scope.items = data;
});
});
6.在电脑中浏览器显示效果,效果显示好后,导入到手机里面的命令:ionic run android 详情可以{点击查看}方法

7.导入到手机后,运行效果。

案例:1 Ionic Framework+AngularJS+ASP.NET MVC WebApi Jsonp 移动开发的更多相关文章
- ABP 教程文档 1-1 手把手引进门之 AngularJs, ASP.NET MVC, Web API 和 EntityFramework(官方教程翻译版 版本3.2.5)含学习资料
本文是ABP官方文档翻译版,翻译基于 3.2.5 版本 转载请注明出处:http://www.cnblogs.com/yabu007/ 谢谢 官方文档分四部分 一. 教程文档 二.ABP 框架 三. ...
- [译]ABP框架使用AngularJs,ASP.NET MVC,Web API和EntityFramework构建N层架构的SPA应用程序
本文转自:http://www.skcode.cn/archives/281 本文演示ABP框架如何使用AngularJs,ASP.NET MVC,Web API 和EntityFramework构建 ...
- AngularJs + ASP.NET MVC
[AngularJs + ASP.NET MVC]使用AntularJs快速建立ASP.NET MVC SPA網站 這幾天接觸到了AngularJs的美麗,讓饅頭有點躍躍欲試使用AngularJs來做 ...
- AngularJS+ASP.NET MVC+SignalR实现消息推送
原文:AngularJS+ASP.NET MVC+SignalR实现消息推送 背景 OA管理系统中,员工提交申请单,消息实时通知到相关人员及时进行审批,审批之后将结果推送给用户. 技术选择 最开始发现 ...
- ASP.NET MVC WebApi 返回数据类型序列化控制(json,xml) 用javascript在客户端删除某一个cookie键值对 input点击链接另一个页面,各种操作。 C# 往线程里传参数的方法总结 TCP/IP 协议 用C#+Selenium+ChromeDriver 生成我的咕咚跑步路线地图 (转)值得学习百度开源70+项目
ASP.NET MVC WebApi 返回数据类型序列化控制(json,xml) 我们都知道在使用WebApi的时候Controller会自动将Action的返回值自动进行各种序列化处理(序列化为 ...
- 让Asp.net mvc WebAPI 支持OData协议进行分页查询操作
这是我在用Asp.net mvc WebAPI 支持 OData协议 做分页查询服务时的 个人拙笔. 代码已经开发到oschina上.有兴趣的朋友可以看看,欢迎大家指出不足之处. 看过了园子里的几篇关 ...
- ASP.NET MVC 微信公共平台开发之获取用户消息并处理
ASP.NET MVC 微信公共平台开发 获取用户消息并处理 获取用户消息 用户发送的消息是在微信服务器发送的一个HTTP POST请求中包含的,获取用户发送的消息要从POST请求的数据流中获取 微信 ...
- ASP.NET MVC 微信公共平台开发之验证消息的真实性
ASP.NET MVC 微信公共平台开发 验证消息的真实性 在MVC Controller所在项目中添加过滤器,在过滤器中重写 public override void OnActionExecuti ...
- (读书笔记)Asp.net Mvc 与WebForm 混合开发
根据项目实际需求,有时候会想在项目中实现Asp.net Mvc与Webform 混合开发,比如前台框架用MVC,后台框架用WebForm.其实要是实现也很简单,如下: (1)在MVC 中使用Webfo ...
随机推荐
- linux 个人测试用例
1. 我想在某个目录下, 找到某个文件中有某个字符(leon)的文件, 并列出来? (如果是在windows下, 可能需要一个文件一个文件的看, 但是在 linux 下可以实现) find . –ma ...
- linux下Java运行时so文件的附加
将路径加入至 etc/ld.so.conf 中
- linux之shell之if、while、for语句介绍
一.基本判断条件 1)逻辑运算符 -a expr1 -a expr2 逻辑与 -o expr1 -o expr2 逻辑或 ! !expr1 ...
- SQL Server 还原错误“restore database正在异常终止 错误 3154”
今天在还原数据库时,先建立相同名字的数据库,然后在该数据库上右键还原数据库.遇到了这样的一个错误: “备份集中的数据库备份与现有的 'RM_DB' 数据库不同. RESTORE DATABASE 正在 ...
- 爬虫实战【4】Python获取猫眼电影最受期待榜的50部电影
前面几天介绍的都是博客园的内容,今天我们切换一下,了解一下大家都感兴趣的信息,比如最近有啥电影是万众期待的? 猫眼电影是了解这些信息的好地方,在猫眼电影中有5个榜单,其中最受期待榜就是我们今天要爬取的 ...
- 解决IIS部署网站引用woff/woff2/svg字体报404错误
一.问题 在IIS上部署网站,网页引用woff字体时,浏览器报“找不到woff.woff2字体”.“404”错误,不仅预设的字体加载不出来,还影响网页加载速度. 二.原因 IIS默认设置情况下不识别. ...
- ASP非法赋值
Microsoft VBScript 运行时错误 错误 '800a01f5' 非法赋值: 'isCloudSpeedupMz' /records/config/class-records.asp,行 ...
- setlocale(LC_ALL, ""); 取值为空字符串" "(注意,不是NULL),则locale与本地环境所使用的编码方式相同(在本地化时,应该很有用);
在C运行库提供的多字节字符-宽字符转换函数:mbstowcs()/wcstombs()中,需要用到全局变量locale( locale encoding ),以指定多字节字符的编码类型 1. 功能: ...
- SQL 排序的N种方法
一.手工查询得出名次 select * ,select count(*)+1 from T2 where T2.[成绩] > T1.[成绩] as 名次 from T1 结果: 1 2 3 3 ...
- Python3.6全栈开发实例[008]
8.有如下变量(tu是个元祖),请实现要求的功能:tu = ("alex", [11, 22, {"k1": 'v1', "k2": [&q ...