Trying to develop an AngularJS app, encountering the following error upon running the code:
Uncaught Error: [$injector:modulerr] Failed to create module myApp:
Error: [$injector:modulerr] Failed to create module ui.grid:
Error: [$injector:nomod] Module 'ui.grid' is not available! Check for misspellings or
verify if it's properly loaded. When registering a module, ensure that dependencies are specified as the second argument.
The Index.cshtml file:
@{
ViewBag.Title = "Index";
}
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
<script src="~/scripts/ui-grid.js"></script> <- This is where the error occurs
<link href="~/Content/ui-grid.css" rel="stylesheet" />
<script src="~/scripts/fileUpload.js"></script> <- My AngularJS application
<style>
.uiGrd {
width: 550px;
height: 300px;
}
</style>
</head>
<body>
<div ng-app="myApp"
ng-controller="myController">
<input type="file" id="file1" name="file" ng-files="getTheFiles($files)" />
<input type="button" ng-click="uploadFiles()" value="Upload" />
<div class="uiGrd" id="grd" ui-grid="gridData"></div>
</div>
</body>
</html>
The fileUpload.js
var app = angular.module('myApp', ['ui.grid']);
app.directive('ngFiles', ['$parse', function ($parse) {
function fn_link(scope, element, attrs) {
var onChange = $parse(attrs.ngFiles);
element.on('change', function (event) {
onChange(scope, { $files: event.target.files });
});
};
return {
link: fn_link
}
}]);
app.controller('myController', function ($scope, $http) {
var formdata = new FormData();
$scope.getTheFiles = function ($files) {
angular.forEach($files, function (value, key) {
formdata.append(key, value);
});
};
// SEND FILES TO THE API USING POST METHOD.
$scope.uploadFiles = function () {
var request = {
method: 'POST',
url: '/api/fileupload/',
data: formdata,
headers: {
'Content-Type': 'application/json'
},
transformRequest: angular.identity
};
$scope.arr = new Array;
// SEND THE FILES.
$http(request)
.success(function (data) {
var i = 0;
// LOOP THROUGH DATA.
angular.forEach(data, function () {
var b = {
Name: data[i].Name,
Email: data[i].Email
};
$scope.arr.push(b);
i += 1;
});
})
.error(function () { });
}
$scope.gridData = { data: 'arr' };
});
Encountering this persistent error. Unsure if it's a misspelling issue or incorrect injection. The error arises immediately when the page loads, hindering access to any functions as the code breaks completely.
Seeking guidance from anyone who can assist?
Thank you, Erasmo