How to connect ionic angular to asp.net mvc WebAPI

ionic-v1
1

Hello

I am a bit in trouble with connecting my ionic app to asp.net WEBAPI.

do anyone has a good idea to make a good setup for this issue.

kind regards
Steen

2

What problem you facing , Its very easy to connect ionic app to Web API

see steps

  1. Create Web API
  2. Create Ionic Application
  3. Create Services to call Web API
  4. Create controller and Inject Services to controller
  5. Call Services on controller
  6. Get Resposne and bind into view

:grinning:

See http://www.codeandyou.com/2014/11/how-to-call-rest-api-in-angularjs.html

1 Like
3

Hello Virender

I have made the Webapi.
But i need to see with my own eye how to connect from ionic to webapi.
If you could spare a little demo. That would be great.

Regards
Steen

4

Service

.service(‘NearByService’, function ($http) {

  this.getCityList = function () {
    return $http({
      method: 'GET',
      url: "http://eventsgrab.com/API/NearBy/GetCityList"
    });
  };

})

Get City List on Controller

.controller(‘ManualLocationController’, function($scope, $ionicPopup, $ionicLoading, $window,$stateParams,
NearByService, locationFactory) {

    $scope.selected="";

    NearByService.getCityList().then(function(resp) {
        if (resp !== undefined && resp !== null) {
            if (resp.data !== undefined && resp.data !== null) {

                $scope.CityList = [];

                for (var i = 0; i < resp.data.length; i++) {
                    $scope.CityList.push({ ID: resp.data[i].CityID, Title: resp.data[i].CityName });
                }
                $scope.selected= $scope.CityList[0];

            }
        }
    });

})

5

Hello Virender
Thank you for your sharing and help.

Regards
Steen

6

Quick question.
What is the best practice to keep the URL? http://eventsgrab.com/API/NearBy/GetCityList
I would think that in a real application it should not be hardcoded.
Thanks,
Alexis

7

Hi Virender,

Hope you are well. My team is in the process of evaluating whether this is a good framework to adopt & we find it to be wonderful. However, we are wondering how we can handle CORS (Cross Origin Resource Sharing) in cases whereby we are accessing Restful APIs hosted on a different domain.
From what we understand, a native Ionic app runs on a WebView on the targeted device; as such; we are unable to figure out what origin url to allow on our WebAPI method. Hope you can help in this regard.

8

Ionic +Webapi is a great framework to develop a hybrid application. CORS can be handle easily in web.cofig and startup files easily.

But when you using webapi in an ionic application that means the application can install into devices. That means no origin on such situation

config.EnableCors(new EnableCorsAttribute("", "", “*”));

But in terms of security, you can use token based authentication and Identity framework.

9

Hi Virender,

Thanks for your prompt response. Based on your suggestion, we will spike this.

10

this is Rahul Jograna, and I have created the video on YouTube where you can see I have consumed the rest API in my ionic application you can see it here https://www.youtube.com/watch?v=aeqVFPWw0aQ&list=PLI2mio_WEbYsyDfeyaicOh7cc2s7efhOJ&index=20&t=25s source code is available on my blog https://aspnetinhindi.blogspot.com