Welcome to my code snippets!
var app = angular.module("AppModule", ["ngRoute"]);
app.factory("DataSharing", function () {
return { value: 0 }
});
// Setting up Routing
app.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
debugger;
$routeProvider.when('/ShowAll',
{
templateUrl: 'Views/ShowAll',
controller: 'ShowAllController'
});
$routeProvider.otherwise({
redirectTo: '/'
});
}]);
This is where my Services are defined:
app.service("DataService", function ($http) {
this.getData = function () {
return $http.get("/api/Data");
};
this.getItem = function (id) {
return $http.get("/api/Data" + id);
};
});
Let's take a look at the ShowAllController:
app.Controller('ShowAllController', function ($scope, DataService) {
loadAll();
function loadAll() {
var promiseGet = DataService.getData();
promiseGet.success(function (data) {
$scope.Items = data;
},
function (errordata) {
$scope.error = errordata;
});
}
});
Now, in my main index page index.html:
@{
ViewBag.Title = "API's";
}
@section scripts{
<script src="~/Scripts/angular.js"></script>
<script src="~/Scripts/angular-route.min.js"></script>
<script src="~/Scripts/AppModule.js"></script>
<script src="~/Scripts/Services.js"></script>
<script src="~/Scripts/ShowAllController.js"></script>
}
<div class="container" data-ng-app="AppModule">
<div class="panel panel-default">
<div class="panel-header">
<div class="row">
<div><h4 class="col-xs-6">GET api/Data</h4><a href="#/ShowAll" class="btn btn-success col-xs-6" role="button">Items List</a></div>
</div></div>
<div class="panel-body" data-ng-view></div>
</div>
And here is the content of my partial view (ShowAll.html):
<div data-ng-controller="ShowAllController">
<table>
<tr>
<th>ID</th>
<th>Name</th>
<th>Age</th>
<th>Address</th>
</tr>
<tr data-ng-repeat="item in Items">
<td>{{item.Id}}</td>
<td>{{item.Name}}</td>
<td>{{item.Age}}</td>
<td>{{item.Address}}</td>
</tr>
</table>
</div>
If you encounter any issues with displaying the data, check the HomeController and the ShowAll ActionResult. Don't forget that this is for a web API project.
Thank you for taking a look at my code snippets!