ag-Grid funktioniert nicht in AngularJS

Question

Ich versuche, eine Datentabelle mit ag-Grid zu bekommen. Ich benutze keine NPM oder Bower Installation zu tun.

Alles, was ich tun muss, ist die Aufnahme der Link-und Skript-Tags für die gleichen in index.html. Aber es scheint nicht zu funktionieren.

Die Dependency Injection wirft Fehler für mich wie folgt:

Error: $injector:modulerrModule Error

Ich habe eine fiddle erstellt.

Kann jemand mir helfen, das zu reparieren oder mich lassen, was ich vermisse.

Unten ist der 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); 

}); 
}); 

Vielen Dank im Voraus.

Answer 1

Die documentation für Angular 1.x sagt „umfassen ag-Grid als Abhängigkeit des Moduls wie diese“:

// 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"]);

Vielleicht von oben die fehlenden „initialisieren“ es ist?