落叶的庭院扫的一干二净之后，还要轻轻把树摇一下，抖落几片叶子，这才是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. Spring4 MVC REST服务使用@RestController实例

    在这篇文章中,我们将通过开发使用 Spring4 @RestController 注解来开发基于Spring MVC4的REST风格的JSON服务.我们将扩展这个例子通过简单的注释与JAXB标注域类支 ...

  2. Spring MVC静态页面

    以下示例显示如何使用Spring MVC Framework编写一个简单的基于Web的应用程序,它可以使用<mvc:resources>标记访问静态页面和动态页面.首先使用Eclipse ...

  3. ZJU 17th 校赛

    第一次参加校赛,和小伙伴们拿了7个气球,还是挺开心的.  简单记个流水账吧. A:判断出INF的情况后 暴力模拟即可. INF的情况有x=1 || y=1 || (x==2 && y= ...

  4. Shell脚本之监视指定进程的执行状态

    在之前的博客中,以前写了自己主动化測试程序的实现方法,如今开发人员须要知道被測试的进程(在此指执行在LINUX上的主进程的)在异常退出之前的进程的执行状态,比如内存的使用率.CPU的使用率等. 现用s ...

  5. SQL.Cookbook 读书笔记3 操作多个表

    第三章 操作多个表 表连接的内连接和外连接 A表 B表id name id name 1 a 1 b 2 b 3 c4 c内连接就是左表和右表相同的数据,查询结果只有相等的数据:select * fr ...

  6. jQuery实现鼠标放到图片上，放大图片

    <script src="../../Script/jquery-1.7.2.js" type="text/javascript"></scr ...

  7. git钩子

    定义: 钩子:由事件触发的函数 分类: 客户端钩子:由诸如提交和合并这样的操作触发 服务器端钩子:由诸如接收被推送的提交这样的联网操作触发 安装: a.钩子都被存储在 .git 目录下的 hooks ...

  8. Linux中权限管理之ACL权限

    1.简介: a.作用: 是为了防止权限不够用的情况,一般的权限有所有者.所属组.其他人这三种,当这三种满足不了我们的需求的时候就可以使用ACL权限 b.故事背景: 一个老师,给一个班的学员上课,他在l ...

  9. Pycharm中SQL语句提示SQL Dialect is Not Configured

    解决办法: 在File---->Setting--->Languages & Frameworks--->SQL Dialects中,选择对应的数据库,如MySQL,之后点击 ...

  10. PyNN standard model（转）

    PyNN standard model 转自http://blog.csdn.net/qq_34886403/article/details/76667477