落叶的庭院扫的一干二净之后，还要轻轻把树摇一下，抖落几片叶子，这才是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. svn版本库目录结构

      该文是svn源代码分析系列文章服务端架构中的一篇,主要描述svn服务端版本库数据存储目录结构,并且对这些文件以及目录的作用进行简单分析.使用“svnmadin create”命令创建初始化版本库后 ...

  2. javascript simple MVC

    <h3>javascript simple MVC</h3> <div> <select name="" id="setAnim ...

  3. Android 编程之入门开发目录管理器开发抽屉与文件分类-4

    在此目录管理APP里,我们能够尝试引用一些新的元素.在这里我给打击介绍一个叫抽屉的布局,QQ就用到了抽屉布局.不 过他们又在原有的基础上自己开发了新的抽屉布局.而且还蛮高大上的,顺便说说分类管理.这些 ...

  4. sqoop-1.4.4安装配置

    环境:redhat6.5 hadoop2.4.1 感谢: http://wenku.baidu.com/view/a9083da8dd3383c4bb4cd274.html注释hbase检查 感谢: ...

  5. Unity3D学习笔记——NGUI之UIScrollBar

    UIScrollBar:这个组件可以用于创建滚动条. 效果图如下: 一:使用步骤 1.这个组件和UISlider很像,也是由三部分组成. 2.首先创建一个Sprite用于组件的背景色. 3.创建第二个 ...

  6. veridata实验举例（4）验证veridata查找出updata、delete操作导致的不同步现象

    veridata实验举例(4)验证veridata查找出updata.delete操作导致的不同步现象 续接:<veridata实验举例(3)验证veridata查找出insert操作导致的不同 ...

  7. 导出大量数据到excel表

    set_time_limit(0);error_reporting(0); // 输出Excel文件头,可把user.csv换成你要的文件名header('Content-Type: applicat ...

  8. python系列三：python3运算符

    '''python 没有自增运算符python 中,变量是以内容为基准而不是像 c 中以变量名为基准,所以只要你的数字内容是5,不管你起什么名字,这个变量的 ID 是相同的,同时也就说明了 pytho ...

  9. error C1853: “Debug\BigBuffer.pch”预编译头文件来自编译器的早期版本，或者预编译头为 C++ 而在 C 中使用它(或相反)

    <pre id="best-content-1299104064" mb-10"="" style="font-size: 14px; ...

  10. js模块化方法的写法

    详细:一点点白 http://www.cnblogs.com/LoveOrHate/p/4454852.html 原始写法: function m1(){} function m2(){} 对象写法: ...