Создал index.html и app.js файлы :
<!doctype html>
<html ng-app="app">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular-touch.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular-animate.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular-aria.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/lodash.min.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/jszip.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/excel-builder.dist.js"></script>
<script src="/release/ui-grid.js"></script>
<link rel="stylesheet" href="/release/ui-grid.css" type="text/css">
<script src="./app.js"></script>
<link rel="stylesheet" type="text/css" href="node_modules/angular-ui-grid/ui-grid.min.css">
<script src="node_modules/angular-ui-grid/ui-grid.min.js"></script>
</head>
<body>
<div ng-controller="MainCtrl">
<button type="button" class="btn btn-success" ng-click="getCurrentFocus()">Get Current focused cell</button> <span ng-bind="currentFocused"></span>
<br>
<br>
<div ui-grid="gridOptions" ui-grid-edit ui-grid-cellnav class="grid"></div>
</div>
</body>
</html>
var app = angular.module('app', ['ngTouch', 'ui.grid', 'ui.grid.edit', 'ui.grid.cellNav']);
app.controller('MainCtrl', ['$scope', '$http', function ($scope, $http) {
$scope.gridOptions = { };
$scope.gridOptions.enableCellEditOnFocus = true;
$scope.gridOptions.columnDefs = [
{ name: 'id', enableCellEdit: false },
{ name: 'age', enableCellEditOnFocus:false, displayName:'age (f2/dblClick edit)', width: 200 },
{ name: 'address.city', enableCellEdit: true, width: 300 },
{ name: 'name', displayName: 'Name (editOnFocus)', width: 200}
];
$http.get('/data/500_complex.json')
.then(function(response) {
$scope.gridOptions.data = response.data;
});
$scope.currentFocused = "";
$scope.getCurrentFocus = function(){
var rowCol = $scope.gridApi.cellNav.getFocusedCell();
if(rowCol !== null) {
$scope.currentFocused = 'Row Id:' + rowCol.row.entity.id + ' col:' + rowCol.col.colDef.name;
}
}
$scope.gridOptions.onRegisterApi = function(gridApi){
$scope.gridApi = gridApi;
};
}]);
Но все еще есть ошибки в консоли :
index.html:15 GET file:///release/ui-grid.js net::ERR_FILE_NOT_FOUND
index.html:16 GET file:///release/ui-grid.css net::ERR_FILE_NOT_FOUND
angular.js:36440 WARNING: Tried to load AngularJS more than once.
index.html:1 Access to XMLHttpRequest at 'file:///data/500_complex.json' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https.
angular.js:15635 Possibly unhandled rejection: {"data":null,"status":-1,"config":{"method":"GET","transformRequest":[null],"transformResponse":[null],"jsonpCallbackParam":"callback","url":"/data/500_complex.json","headers":{"Accept":"application/json, text/plain, */*"}},"statusText":"","xhrStatus":"error"}
(anonymous) @ angular.js:15635
(anonymous) @ angular.js:11914
processChecks @ angular.js:18045
$digest @ angular.js:19180
$apply @ angular.js:19568
done @ angular.js:13411
completeRequest @ angular.js:13668
requestError @ angular.js:13584
error (async)
(anonymous) @ angular.js:13597
sendReq @ angular.js:13356
serverRequest @ angular.js:13097
processQueue @ angular.js:18013
(anonymous) @ angular.js:18061
$digest @ angular.js:19180
$apply @ angular.js:19568
bootstrapApply @ angular.js:1966
invoke @ angular.js:5208
doBootstrap @ angular.js:1964
bootstrap @ angular.js:1984
angularInit @ angular.js:1869
(anonymous) @ angular.js:36491
trigger @ angular.js:3587
angular.js:13630 GET file:///data/500_complex.json net::ERR_FAILED
(anonymous) @ angular.js:13630
sendReq @ angular.js:13356
serverRequest @ angular.js:13097
processQueue @ angular.js:18013
(anonymous) @ angular.js:18061
$digest @ angular.js:19180
$apply @ angular.js:19568
bootstrapApply @ angular.js:1966
invoke @ angular.js:5208
doBootstrap @ angular.js:1964
bootstrap @ angular.js:1984
angularInit @ angular.js:1869
(anonymous) @ angular.js:36491
trigger @ angular.js:3587
DevTools failed to load SourceMap: Could not load content for http://ui-grid.info/docs/grunt-scripts/pdfmake.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE
angular js подключил через cdn, angular-ui-grid через npm install angular-ui-grid , есть рамка таблицы но нет данных , как пофиксить
Средний
Средний