落叶的庭院扫的一干二净之后,还要轻轻把树摇一下,抖落几片叶子,这才是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 移动开发的更多相关文章

  1. ABP 教程文档 1-1 手把手引进门之 AngularJs, ASP.NET MVC, Web API 和 EntityFramework(官方教程翻译版 版本3.2.5)含学习资料

    本文是ABP官方文档翻译版,翻译基于 3.2.5 版本 转载请注明出处:http://www.cnblogs.com/yabu007/  谢谢 官方文档分四部分 一. 教程文档 二.ABP 框架 三. ...

  2. [译]ABP框架使用AngularJs,ASP.NET MVC,Web API和EntityFramework构建N层架构的SPA应用程序

    本文转自:http://www.skcode.cn/archives/281 本文演示ABP框架如何使用AngularJs,ASP.NET MVC,Web API 和EntityFramework构建 ...

  3. AngularJs + ASP.NET MVC

    [AngularJs + ASP.NET MVC]使用AntularJs快速建立ASP.NET MVC SPA網站 這幾天接觸到了AngularJs的美麗,讓饅頭有點躍躍欲試使用AngularJs來做 ...

  4. AngularJS+ASP.NET MVC+SignalR实现消息推送

    原文:AngularJS+ASP.NET MVC+SignalR实现消息推送 背景 OA管理系统中,员工提交申请单,消息实时通知到相关人员及时进行审批,审批之后将结果推送给用户. 技术选择 最开始发现 ...

  5. 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的返回值自动进行各种序列化处理(序列化为 ...

  6. 让Asp.net mvc WebAPI 支持OData协议进行分页查询操作

    这是我在用Asp.net mvc WebAPI 支持 OData协议 做分页查询服务时的 个人拙笔. 代码已经开发到oschina上.有兴趣的朋友可以看看,欢迎大家指出不足之处. 看过了园子里的几篇关 ...

  7. ASP.NET MVC 微信公共平台开发之获取用户消息并处理

    ASP.NET MVC 微信公共平台开发 获取用户消息并处理 获取用户消息 用户发送的消息是在微信服务器发送的一个HTTP POST请求中包含的,获取用户发送的消息要从POST请求的数据流中获取 微信 ...

  8. ASP.NET MVC 微信公共平台开发之验证消息的真实性

    ASP.NET MVC 微信公共平台开发 验证消息的真实性 在MVC Controller所在项目中添加过滤器,在过滤器中重写 public override void OnActionExecuti ...

  9. (读书笔记)Asp.net Mvc 与WebForm 混合开发

    根据项目实际需求,有时候会想在项目中实现Asp.net Mvc与Webform 混合开发,比如前台框架用MVC,后台框架用WebForm.其实要是实现也很简单,如下: (1)在MVC 中使用Webfo ...

随机推荐

  1. linux 个人测试用例

    1. 我想在某个目录下, 找到某个文件中有某个字符(leon)的文件, 并列出来? (如果是在windows下, 可能需要一个文件一个文件的看, 但是在 linux 下可以实现) find . –ma ...

  2. linux下Java运行时so文件的附加

    将路径加入至 etc/ld.so.conf 中

  3. linux之shell之if、while、for语句介绍

    一.基本判断条件 1)逻辑运算符 -a    expr1 -a expr2    逻辑与 -o    expr1 -o expr2    逻辑或 !     !expr1                ...

  4. SQL Server 还原错误“restore database正在异常终止 错误 3154”

    今天在还原数据库时,先建立相同名字的数据库,然后在该数据库上右键还原数据库.遇到了这样的一个错误: “备份集中的数据库备份与现有的 'RM_DB' 数据库不同. RESTORE DATABASE 正在 ...

  5. 爬虫实战【4】Python获取猫眼电影最受期待榜的50部电影

    前面几天介绍的都是博客园的内容,今天我们切换一下,了解一下大家都感兴趣的信息,比如最近有啥电影是万众期待的? 猫眼电影是了解这些信息的好地方,在猫眼电影中有5个榜单,其中最受期待榜就是我们今天要爬取的 ...

  6. 解决IIS部署网站引用woff/woff2/svg字体报404错误

    一.问题 在IIS上部署网站,网页引用woff字体时,浏览器报“找不到woff.woff2字体”.“404”错误,不仅预设的字体加载不出来,还影响网页加载速度. 二.原因 IIS默认设置情况下不识别. ...

  7. ASP非法赋值

    Microsoft VBScript 运行时错误 错误 '800a01f5' 非法赋值: 'isCloudSpeedupMz' /records/config/class-records.asp,行 ...

  8. setlocale(LC_ALL, ""); 取值为空字符串" "(注意,不是NULL),则locale与本地环境所使用的编码方式相同(在本地化时,应该很有用);

    在C运行库提供的多字节字符-宽字符转换函数:mbstowcs()/wcstombs()中,需要用到全局变量locale( locale encoding ),以指定多字节字符的编码类型 1. 功能: ...

  9. SQL 排序的N种方法

    一.手工查询得出名次 select * ,select count(*)+1 from T2 where T2.[成绩] > T1.[成绩] as 名次 from T1 结果:  1 2 3 3 ...

  10. Python3.6全栈开发实例[008]

    8.有如下变量(tu是个元祖),请实现要求的功能:tu = ("alex", [11, 22, {"k1": 'v1', "k2": [&q ...