Case: 1 Ionic Framework + AngularJS + ASP. net mvc WebApi Jsonp mobile development, ionicangularjs

Case: 1 Ionic Framework + AngularJS + ASP. net mvc WebApi Jsonp mobile development, ionicangularjs

After sweeping the fallen courtyard, gently shake the tree And shake several leaves. This is the realm of Wabi Sabi.

Introduction: Ionic is a mobile framework. angularjs does not need to be mentioned. ASP. Net MVC WebApi provides data sources and opens data interfaces.

Happy Learning Ionic Framework + PhoneGap manual 1-1 {create app project} {Click to view}

Happy Learning Ionic Framework + PhoneGap manual 1-2 {introduction to Header, Content, Footer usage}{Click to view}

Happy Learning Ionic Framework + PhoneGap manual 1-3 {panel switching}{Click to view}

Happy Learning Ionic Framework + PhoneGap manual 1-4 {logon page}{Click to view}

Happy Learning Ionic Framework + PhoneGap manual 1-5 {IO switch}{Click to view}

1. Install WebApiContrib. Formatting. Jsonp

2. modify Global. asax. cs

 //jsonpGlobalConfiguration.Configuration.AddJsonpFormatter();

 

3. Design the database and access jsonp data through this address.

4. Index page code. Note that angular. js should be used here. key code

<! DOCTYPE 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) {// data $ scope. items = data ;});});
6. the browser displays the effect on the computer. After the effect is displayed, run the ionic run android command on the mobile phone.{Click to view} Method

 
7. After importing the data to your mobile phone, the running effect is displayed.