落叶的庭院扫的一干二净之后，还要轻轻把树摇一下，抖落几片叶子，这才是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. 我的第六个java程序 spring-bean

    配置文件 Beans.xml <?xml version="1.0" encoding="UTF-8"?> <beans xmlns=&quo ...

  2. azure绑定ssl，godaddy的ssl证书

    域名是godaddy 申请的,证书也是godaddy 购买的,DV证书. godaddy购买证书后,申请ssl,需要输入,csr.网上找的csr生成工具,我使用  https://myssl.com/ ...

  3. excel添加复选框和去掉复选框

    添加复选框 我测试的excel版本是最新版2016,所有版本都是找开发者工具里面包含很多工具呢,大家可以慢慢测试 excel的右上角 点击文件-->选项-->自定义功能区-->添加开 ...

  4. java中==和equals区别

    主要是使用String时候的区别! 一.java当中的数据类型和“==”的含义 基本数据类型(也称原始数据类型) :byte,short,char,int,long,float,double,bool ...

  5. PHP 如何成长 （收藏自：http://www.cnblogs.com/try-better-tomorrow/p/6964036.html）

    原文题目为<php程序员学C/C++>,不过我觉得说是提升自己比较合适. 身边有几个做PHP开发的朋友,因为面试,也接触到不少的PHP工程师,他们常疑虑自己将来在技术上的成长与发展,我常给 ...

  6. linux下jmeter使用帮助

    1.linux下jmeter使用方法 例:jmeter -n -t test1.jmx -l logfile1.jtl -H 192.168.1.1 -P 8080 -h 帮助 -> 打印出有用 ...

  7. isnull在order by中的使用——让我长见识了

    select * from VisitLogorder by ISNULL(NextVisitDate,'2299-01-01') 此sql的作用是查找表中的数据,并按照NextVisitDate字段 ...

  8. Exploiting second-order SQL injection 利用二阶注入获取数据库版本信息 SQL Injection Attacks and Defense Second Edition

    w SQL Injection Attacks and Defense  Second Edition Exploiting second-order SQL injection Virtually ...

  9. js对多行字符串的处理

    f = [] g = str(f) h = ''.join(f) dic_ = () gd = str(dic_) hd = ''.join(dic_) 0 老板1 北京2 上海3 天津4 重庆5 河 ...

  10. geometric mean

    w