標籤：des android style blog http io color ar os
落葉的庭院掃的一乾二淨之後，還要輕輕把樹搖一下，抖落幾片葉子，這才是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
//jsonpGlobalConfiguration.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 移動開發
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
