落叶的庭院扫的一干二净之后，还要轻轻把树摇一下，抖落几片叶子，这才是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. easyui最简单的左右布局实现，及tab的右键菜单实现

    发现最近有些人问用JQuery easyui要怎么实现左右结构的布局.就是点击左边的菜单在右边的tab中打开.其实easyui要实现这种布局很简单,只需要简单的几行代码就ok了. 特意做了一个小小的d ...

  2. 【转】在Eclipse中使用JUnit4进行单元测试（高级篇）

    http://blog.csdn.net/andycpp/article/details/1329218 通过前2篇文章,您一定对JUnit有了一个基本的了解,下面我们来探讨一下JUnit4中一些高级 ...

  3. [已解决]windows下python3.x与python2.7共存版本pip使用报错问题

    > 由于最近要更新插件,突然发现没法使用pip来安装升级插件,查了一圈才找到解决办法,特记录在此,便于其它人查询. 报错信息如下: Fatal error in launcher: Unable ...

  4. 最新win7系统安全稳定版

    最新win7系统32位安全稳定版 V2016年2月,具有更安全.更稳定.更人性化等特点.集成最常用的装机软件,集成最全面的硬件驱动,精心挑选的系统维护工具,加上萝卜独有人性化的设计.是电脑城.个人.公 ...

  5. python socket编程入门（编写server实例)+send 与sendall的区别与使用方法

    python 编写server的步骤: 1. 第一步是创建socket对象.调用socket构造函数.如: socket = socket.socket( family, type ) family参 ...

  6. 如何解决mac下MAMP不能重启apache server的问题

    第一步:检查问题  在终端输入:sudo /Applications/MAMP/Library/bin/apachectl start  终端会提示你那个目录下的那个文件出现了什么问题 第二步:逐一排 ...

  7. <转载> Jquery的使用技巧-实用！

    1.使用方法在需要使用JQuery的页面中引入JQuery的js文件即可.例如:<script type="text/javascript" src="js/jqu ...

  8. Python 邮箱

    #coding:utf-8from email.header import Headerfrom email.mime.text import MIMETextfrom email.utils imp ...

  9. Android开发：《Gradle Recipes for Android》阅读笔记(翻译)2.7——使用Android Studio签署发布apk

    问题: 想要使用Android studio生成签名配置,给他们分配build类型. 解决方案: Build菜单提供了生成签名配置,Project Structure窗口有tab用于分配不同的type ...

  10. wxPython安装使用

    https://wiki.wxpython.org/How to install wxPython pip install -U wxPython 验证版本 D:\python>python P ...