I have encountered a similar issue for my all example programs with angularJS fetch data from the WebApi. I think there is nothing to do with my code, but some settings that may be I ignored, please help me check it: here is my web api: URL:http://localhost:1883/api/Subcriber and return the data:
Html body:
<div id="tblSubs" ng-controller="APIController">
<table>
<tr>
<th>ID</th>
<th>Email ID ( Double click to update)</th>
<th>Subscribed Date</th>
<th></th>
</tr>
<tbody data-ng-repeat="sub in subscriber">
<tr>
<td>{{sub.SubscriberID}}</td>
<td ng-blur="updSubscriber(sub,$event)" ng-dblclick="makeEditable($event)">{{sub.MailID}}</td>
<td>{{sub.SubscribedDate}}</td>
<td>
<input type="button" id="Delete" value="Delete" data-ng-click="dltSubscriber(sub.SubscriberID)" />
</td>
</tr>
</tbody>
</table>
<div class="form-group">
<label for="email">Sbscribe here</label>
<input type="email" class="form-control" id="email" placeholder="Enter email" [required="string" ] data-ng-model="mailid" />
</div>
<button type="button" class="btn btn-default" data-ng-click="saveSubs();">Submit</button>
</div>
<script src="Scripts/angular.js"></script>
<script src="Scripts/angular-route.js"></script>
<script src="Scripts/ApiScripers/Module.js"></script>
<script src="Scripts/ApiScripers/Service.js"></script>
<script src="Scripts/ApiScripers/controller.js"></script>
AngularJS Module:
var app;
(function () {
app=angular.module('APIModule', []);
})();
AngularJS Service:
app.service("APIService", function ($http) {
this.getSubs = function () {
var url = 'api/Subscriber';
return $http.get(url).then(function (response) {
return response.data;
});
}
AngularJS Controller:
app.controller('APIController', function ($scope, APIService) {
getAll();
function getAll() {
var servCall = APIService.getSubs();
servCall.then(function (d) {
$scope.subscriber = d.data;
}, function (error) {
$log.error('Oops! Something went wrong while fetching the data.')
})
}
})
After running, there is no error information from browser debug window. It is too strange, whether I need to publish my webapi to IIS and then call it?
Update: Index.cshtml:
@{
ViewBag.Title = "Welcome";
}
<style>
table, tr, td, th {
border: 1px solid #ccc;
padding: 10px;
margin: 10px;
}
</style>
<h2>Welcome to Sibeesh Passion's Email List</h2>
<body data-ng-app="APIModule">
<div id="tblSubs" ng-controller="APIController">
<table>
<tr>
<th>ID</th>
<th>Email ID ( Double click to update)</th>
<th>Subscribed Date</th>
<th></th>
</tr>
<tbody data-ng-repeat="sub in subscriber">
<tr>
<td>{{sub.SubscriberID}}</td>
<td ng-blur="updSubscriber(sub,$event)" ng-dblclick="makeEditable($event)">{{sub.MailID}}</td>
<td>{{sub.SubscribedDate}}</td>
<td>
<input type="button" id="Delete" value="Delete" data-ng-click="dltSubscriber(sub.SubscriberID)" />
</td>
</tr>
</tbody>
</table>
<div class="form-group">
<label for="email">Sbscribe here</label>
<input type="email" class="form-control" id="email" placeholder="Enter email" [required="string" ] data-ng-model="mailid" />
</div>
<button type="button" class="btn btn-default" data-ng-click="saveSubs();">Submit</button>
</div>
</body>
<script src="~/Scripts/angular.js"></script>
<script src="~/Scripts/angular-route.js"></script>
<script src="~/Scripts/APIScripts/Module.js"></script>
<script src="~/Scripts/APIScripts/Service.js"></script>
<script src="~/Scripts/APIScripts/Controller.js"></script>
_Layout.cshtml:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>@ViewBag.Title</title>
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
</div>
<div class="container body-content">
@RenderBody()
<hr />
<footer>
<p>© @DateTime.Now.Year - Sibeesh Passion</p>
</footer>
</div>
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@RenderSection("scripts", required: false)
</body>
</html>
.cshtml could fetch the data from the webapi, but I just copy the html code to a .html file that I could not access the data. Hope someone could help it. There is nothing wrong with the code, may be I ignored some includes.
