<html>
<head>
<title>Ag-grid example</title>
</head>
<body ng-app="gridApp" ng-controller="gridCtrl as grid">
<div style="height: 100px;">
<h2>The very basic example of ag-grid with services</h2>
<button type="button" ng-click="grid.applyCustomSorting()">Apply custom sorting</button>
<button type="button" ng-click="grid.applyDefaultSorting()">Apply default sorting</button>
</div>
<div ag-grid="grid.gridOptions" class="ag-fresh" style="height: calc(100% - 100px);" ng-if="grid.showGrid"></div>
<!-- External js code -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ag-grid/7.1.0/ag-grid.js"></script>
<!-- Internal js code -->
<script src="ag-grid.module.js"></script>
<script src="ag-grid.controller.js"></script>
<script src="grid-config.service.js"></script>
<script src="grid-data.service.js"></script>
<script src="grid-main.service.js"></script>
<script src="grid-settings.service.js"></script>
</body>
</html>
// Code goes here
/* Styles go here */
/* global angular, agGrid */
(function () {
"use strict";
agGrid.initialiseAgGridWithAngular1(angular);
angular.module("gridApp", ["agGrid"]);
})();
/* global angular */
(function () {
"use strict";
angular.module("gridApp").controller("gridCtrl", ["gridMainService", "gridSettingsService", function (gridMainService, gridSettingsService) {
var vm = this;
vm.initialLoad = function () {
gridMainService.loadGridOptions().then(function () {
vm.gridOptions = gridMainService.gridOptions;
vm.showGrid = true;
});
};
vm.initialLoad();
vm.applyCustomSorting = function () {
gridSettingsService.sortByProductionDesc();
};
vm.applyDefaultSorting = function () {
gridSettingsService.applyDefaults();
};
}]);
})();
/* global angular */
(function () {
"use strict";
angular.module("gridApp").service("gridConfigService", ["$timeout", function ($timeout) {
var self = this;
self.columnDefs = [];
self.loadConfigData = function () {
return $timeout(function () {
var responseFromServer = [
{headerName: "Make", field: "make"},
{headerName: "Model", field: "model"},
{headerName: "Price", field: "price"}
];
self.columnDefs = responseFromServer;
return self.columnDefs;
}, 400);
};
}]);
})();
/* global angular */
(function () {
"use strict";
angular.module("gridApp").service("gridDataService", ["$injector", "$interval", "$timeout", function ($injector, $interval, $timeout) {
var self = this;
// this function simulates the server response
self.loadRowData = function () {
return $timeout(function () {
var responseFromServer = [
{make: "Toyota", model: "Celica", price: 35000},
{make: "Ford", model: "Mondeo", price: 32000},
{make: "Porsche", model: "Boxter", price: 72000}
];
self.rowData = responseFromServer;
return self.rowData;
}, 300);
};
// this is the test functionality function to add new row
var index = 1;
$interval(function () {
var rowToAdd = {
make: "VW " + index,
model: "Golf " + index,
price: 10000 * index
};
var newItems = [rowToAdd];
// here I need to get access to the gridMainService
var gridMainService = $injector.get('gridMainService');
gridMainService.gridOptions.api.addItems(newItems);
index++;
}, 500, 10);
}]);
})();
/* global angular */
(function () {
"use strict";
angular.module("gridApp").service("gridMainService", ["$log", "$q", "gridConfigService", "gridDataService", "gridSettingsService", function ($log, $q, gridConfigService, gridDataService, gridSettingsService) {
var self = this;
self.gridOptions = {
};
self.loadGridOptions = function () {
return $q.all([
gridConfigService.loadConfigData(),
gridDataService.loadRowData()
]).then(function () {
self.gridOptions = {
columnDefs: gridConfigService.columnDefs,
rowData: gridDataService.rowData,
enableSorting: true,
onGridReady: self.onGridReady
};
return self.gridOptions;
});
};
self.onGridReady = function () {
$log.info("Grid is ready, apply default settings");
gridSettingsService.applyDefaults();
};
}]);
})();
/* global angular */
(function () {
"use strict";
angular.module("gridApp").service("gridSettingsService", ["$injector", function ($injector) {
var self = this;
self.applyDefaults = function() {
var sort = [
{colId: 'make', sort: 'asc'}
];
var gridMainService = $injector.get('gridMainService');
gridMainService.gridOptions.api.setSortModel(sort);
};
self.sortByProductionDesc = function() {
var sort = [
{colId: 'make', sort: 'desc'},
{colId: 'model', sort: 'asc'}
];
var gridMainService = $injector.get('gridMainService');
gridMainService.gridOptions.api.setSortModel(sort);
};
}]);
})();