srivatchu
on Mar 31, 2020 07:28 AM
3368 Views
hi,
I am new to angularjs. Trying to invoke a webapi to angularjs app. I could not retrieve the message into my angular application. Please take a look into my code and let me know where i am going wrong. P.S - My api and angular are separetely hosted.
/// <reference path="angular.min.js" />
var myapp = angular.module("MyMod", [])
myapp.controller("Myctrl", function ($scope, $http) {
$http.get('https://localhost:44323/api/EmployeeInformation/Get').
then(function (response) {
$scope.greeting = response.data;
});
});
<!DOCTYPE html>
<html ng-app="MyMod">
<head>
<meta charset="utf-8" />
<title>Hello AngularJS</title>
<script src="Scripts/angular.js"></script>
<script src="Scripts/InvokeAPI.js"></script>
</head>
<body>
<div ng-controller="Myctrl" ng-repeat="m in greeting">
<!--<p>The ID is {{greeting.id}}</p>-->
<p>The content is {{greeting.string}}</p>
</div>
</body>
</html>
Web api controller
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Net.Http;
using System.Web.Http;
using System.Web.Http.Cors;
namespace webApiDemo.Controllers
{
[EnableCors(origins: "*", headers: "*", methods: "*")]
public class EmployeeInformationController : ApiController
{
[System.Web.Http.Route("api/EmployeeInformation/Get")]
[System.Web.Http.HttpGet]
public string Get()
{
string content = "Hello World";
return content;
}
}
}
Download FREE API for Word, Excel and PDF in ASP.Net:
Download
dharmendr
on Mar 31, 2020 08:20 AM
on May 03, 2020 09:32 AM
3
Hi srivatchu,
Your Web API method returning string value and you are trying to loop through the data using ng-repeat directive which is not possible.
If you want loop and write data then you need to return List or Array from Web API method and display using ng-repeat directive.
If you are returning string message then display the string message without using ng-repeat directive.
Check the below example.
Namespaces
using System.Web.Http;
API Controller
public class EmployeeInformationController : ApiController
{
[Route("api/EmployeeInformation/Get")]
[HttpGet]
public string Get()
{
string content = "Hello World";
return content;
}
[Route("api/EmployeeInformation/GetArray")]
[HttpGet]
public string[] GetArray()
{
string content = "Hello World,Welcome";
return content.Split(',');
}
}
HTML
<!DOCTYPE html>
<html ng-app="MyApp">
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module('MyApp', [])
app.controller('MyController', function ($scope, $http) {
$http.get('https://localhost:44323/api/EmployeeInformation/Get')
.then(function (response) {
$scope.greeting = response.data;
});
$http.get('https://localhost:44323/api/EmployeeInformation/GetArray')
.then(function (response) {
$scope.greetingArray = response.data;
});
});
</script>
</head>
<body>
<div ng-controller="MyController">
<p>The content is {{greeting}}</p><hr />
<p ng-repeat="m in greetingArray">The content is {{m}}</p>
</div>
</body>
</html>
Screenshot
