ag-Grid not working in AngularJS

Question

I am trying get a datatable using ag-Grid. I am not using any npm or bower to do installation.

All I have do is including the link and script tags for the same in index.html. But it does not seem to work.

The dependency injection is throwing error for me as below:

Error: $injector:modulerrModule Error

I have created a fiddle.

Can someone help me fix this or let me what I am missing.

Below is the code:

var app = angular.module('project1', ["agGrid"]);
app.controller('manageInspCtrl', function($scope) {
var columnDefs = [{
headerName: "<input type=checkbox>Select All",
field: "Select",
width: 120,
cellRenderer: function(params) {
  var htmlElement = document.createElement("input");
  htmlElement.type = 'checkbox';
  return htmlElement;
}
}, {
headerName: "Postal Code",
field: "pc",
width: 120
}, {
headerName: "Zone Name",
field: "zn",
width: 120
}, {
headerName: "Sector Name",
field: "sn",
width: 120
}, {
headerName: "Branch Code",
field: "bc",
width: 120
}, {
headerName: "Branch Name",
field: "bn",
width: 120
}, {
headerName: "Branch Address",
field: "ba",
width: 120
}, {
headerName: "Towncouncil name",
field: "tcn",
width: 120
}, {
headerName: "Towncouncil Address",
field: "tca",
width: 120
}, {
headerName: "Phase Name",
field: "pn",
width: 120
}];
var myDummyData = [{
pc: "400001",
zn: "Zone - 1",
sn: "Sector - 1",
bc: "AMK-1",
bn: "Ang Mo Kio BO",
ba: "Block-109, Ang Mo Kio, Singapore",
tcn: "Ang Mo Kio Towncouncil",
tca: "Block-110, Ang Mo Kio Street, Singapore",
pn: "Phase - 1"
}, {
pc: "400001",
zn: "Zone - 1",
sn: "Sector - 1",
bc: "AMK-1",
bn: "Ang Mo Kio BO",
ba: "Block-109, Ang Mo Kio, Singapore",
tcn: "Ang Mo Kio Towncouncil",
tca: "Block-110, Ang Mo Kio Street, Singapore",
pn: "Phase - 1"
}, {
pc: "400001",
zn: "Zone - 1",
sn: "Sector - 1",
bc: "AMK-1",
bn: "Ang Mo Kio BO",
ba: "Block-109, Ang Mo Kio, Singapore",
tcn: "Ang Mo Kio Towncouncil",
tca: "Block-110, Ang Mo Kio Street, Singapore",
pn: "Phase - 1"
}, {
pc: "400001",
zn: "Zone - 1",
sn: "Sector - 1",
bc: "AMK-1",
bn: "Ang Mo Kio BO",
ba: "Block-109, Ang Mo Kio, Singapore",
tcn: "Ang Mo Kio Towncouncil",
tca: "Block-110, Ang Mo Kio Street, Singapore",
pn: "Phase - 1"
}, {
pc: "400001",
zn: "Zone - 1",
sn: "Sector - 1",
bc: "AMK-1",
bn: "Ang Mo Kio BO",
ba: "Block-109, Ang Mo Kio, Singapore",
tcn: "Ang Mo Kio Towncouncil",
tca: "Block-110, Ang Mo Kio Street, Singapore",
pn: "Phase - 1"
}, {
pc: "400001",
zn: "Zone - 1",
sn: "Sector - 1",
bc: "AMK-1",
bn: "Ang Mo Kio BO",
ba: "Block-109, Ang Mo Kio, Singapore",
tcn: "Ang Mo Kio Towncouncil",
tca: "Block-110, Ang Mo Kio Street, Singapore",
pn: "Phase - 1"
}, {
pc: "400001",
zn: "Zone - 1",
sn: "Sector - 1",
bc: "AMK-1",
bn: "Ang Mo Kio BO",
ba: "Block-109, Ang Mo Kio, Singapore",
tcn: "Ang Mo Kio Towncouncil",
tca: "Block-110, Ang Mo Kio Street, Singapore",
pn: "Phase - 1"
}, {
pc: "400001",
zn: "Zone - 1",
sn: "Sector - 1",
bc: "AMK-1",
bn: "Ang Mo Kio BO",
ba: "Block-109, Ang Mo Kio, Singapore",
tcn: "Ang Mo Kio Towncouncil",
tca: "Block-110, Ang Mo Kio Street, Singapore",
pn: "Phase - 1"
}, {
pc: "400001",
zn: "Zone - 1",
sn: "Sector - 1",
bc: "AMK-1",
bn: "Ang Mo Kio BO",
ba: "Block-109, Ang Mo Kio, Singapore",
tcn: "Ang Mo Kio Towncouncil",
tca: "Block-110, Ang Mo Kio Street, Singapore",
pn: "Phase - 1"
}, {
pc: "400001",
zn: "Zone - 1",
sn: "Sector - 1",
bc: "AMK-1",
bn: "Ang Mo Kio BO",
ba: "Block-109, Ang Mo Kio, Singapore",
tcn: "Ang Mo Kio Towncouncil",
tca: "Block-110, Ang Mo Kio Street, Singapore",
pn: "Phase - 1"
}];

var gridOptions = {
columnDefs: columnDefs,
rowData: null,
enableFilter: true,
enableColResize: true,
enableSorting: true
};

document.addEventListener('DOMContentLoaded', function() {
var gridDiv = document.querySelector('#myGrid');
new agGrid.Grid(gridDiv, gridOptions);
gridOptions.api.setRowData(myDummyData);

});
});

Thanks in advance.

clemdia clemdia · Accepted Answer · 2016-06-05T17:12:14

The documentation for Angular 1.x says to "include ag-Grid as a dependency of your module like this":

    // get ag-Grid to create an Angular module and register the ag-Grid directive
    agGrid.initialiseAgGridWithAngular1(angular);
    // create your module with ag-Grid as a dependency
    var module = angular.module("example", ["agGrid"]);

Perhaps it's the missing "initialise" from above?

ag-Grid not working in AngularJS

1 Answers