Hej. Chciałbym zaimplementować Angular Data Table w swoim projekcie.
jak tutaj:
https://l-lin.github.io/angular-datatables/#/angularWay
Mam web api które ciągnie mi dane z bazy poprzez Service
app.service('crudService', function ($http) {
//Get single product
this.getOneProduct = function (prodID) {
return $http.get("/api/values/:" + prodID);
}
//Get All products
this.getAllProducts = function () {
return $http.get("/api/values");
}
});
Modules:
var app;
(function () {
app = angular.module("crudModule", []);
})();
var app2;
(function () {
app2 = angular.module("crudModule2", []);
})();
var app3;
(function () {
app3 = angular.module("showcase.crudModule3", ['datatables', 'ngResource']);
})();
I controllers:
app.controller('crudController', function ($scope, crudService) {
loadRecords();
//Function to load all products records
function loadRecords() {
var promiseGet = crudService.getAllProducts(); //The MEthod Call from service
promiseGet.then(function (pl) { $scope.Products = pl.data },
function (errorPl) {
$log.error('failure loading products', errorPl);
});
}
//Clear the Scope models
$scope.clear = function () {
$scope.ProductID = 0;
$scope.ProductName = "";
$scope.QuantityPerUnit = 0;
$scope.UnitPrice = 0;
$scope.UnitsInStock = 0;
}
});
app2.controller('crudController2', function ($scope, crudService, $routeParams) {
var productID = $routeParams.ProductID; // get productID from URL
loadOneRecord(productID);
//Function to load one record
function loadOneRecord(productID) {
var promiseGet = crudService.getOneProduct(productID); //The MEthod Call from service
promiseGet.then(function (pl) { $scope.Products = pl.data },
function (errorPl) {
$log.error('failure loading products', errorPl);
});
}
//Clear the Scope models
$scope.clear = function () {
$scope.ProductID = 0;
$scope.ProductName = "";
$scope.QuantityPerUnit = 0;
$scope.UnitPrice = 0;
$scope.UnitsInStock = 0;
}
});
app3.controller('crudController3', function ($scope, crudService) {
loadRecords();
AngularWayCtrl();
//Function to load all products records
function loadRecords() {
var promiseGet = crudService.getAllProducts(); //The MEthod Call from service
promiseGet.then(function (pl) { $scope.Products = pl.data },
function (errorPl) {
$log.error('failure loading products', errorPl);
});
}
function AngularWayCtrl($resource, crudService) {
var promiseGet = crudService.getAllProducts();
var vm = this;
promiseGet.$promise.then(function (Products) {
vm.Products = Products;
});
}
//Clear the Scope models
$scope.clear = function () {
$scope.ProductID = 0;
$scope.ProductName = "";
$scope.QuantityPerUnit = 0;
$scope.UnitPrice = 0;
$scope.UnitsInStock = 0;
}
});
W widoku po stronie ASp .NET
@{
ViewBag.Title = "DisplayAngular";
}
@section scripts{
<script src="~/Scripts/angular.js"></script>
<script src="~/Scripts/Custom/Module.js"></script>
<script src="~/Scripts/Custom/Service.js"></script>
<script src="~/Scripts/Custom/Controller.js"></script>
<!-- DataTables CSS -->
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.9/css/jquery.dataTables.css">
<!-- jQuery -->
<script type="text/javascript" charset="utf8" src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<!-- DataTables -->
<script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.9/js/jquery.dataTables.js"></script>
}
<html ng-app="crudModule3">
@{
ViewBag.Title = "Index";
}
<h2>Angular Data Table</h2>
<body>
<div ng-controller="crudController3 as showcase">
<table datatable="ng" class="row-border hover" cellspacing="20px" cellpadding="20px">
<thead>
<tr>
<th>ProductID</th>
<th>ProductName</th>
<th>QuantityPerUnit</th>
<th>UnitPrice</th>
<th>UnitsInStock</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="prod in showcase.Products">
<td> <span>{{prod.ProductID}}</span></td>
<td> <span>{{prod.ProductName}}</span></td>
<td> <span>{{prod.QuantityPerUnit}}</span></td>
<td> <span>{{prod.UnitPrice}}</span></td>
<td> <span>{{prod.UnitsInStock}}</span></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Nie wiem co robię źle. Jak to zaimplementować ?