luee luee - 4 months ago 29
AngularJS Question

Angularjs $injector:modulerr

ng-fileupload having injection error on angular 1.2.3 my source code attached here

<!DOCTYPE html>
<html ng-app ="dashboard">
<head>
<title></title>
<script src="angular.min.js"></script>
<script src="angular-ui-router.js"></script>
</head>

<body>
<div class="box-content">
<form ng-controller="mycontroller as up" name="up.upload_form">
<table cellspacing="10" cellpadding="10" style="margin-left: 5%; cellspacing= 7;">
<tr>
<td>
<label class="control-label" for="inputSuccess1">Course Name</label></td>
<td>
<input type="text" name="coursename" ng-model=" up.coursename" placeholder="Enter course name here" class="form-control">
</td>
</tr>
<tr>
<td>
<label class="control-label" for="inputSuccess1">Course Code</label></td>
<td><input type="text" name="coursecode" ng-model=" up.coursecode" placeholder="Enter course code here" class="form-control"></td>
</tr>
<tr>
<td>
<label class="control-label" for="inputSuccess1">Course Title</label></td>
<td><input type="text" name="coursetitle" ng-model=" up.coursetitle" placeholder="Enter course title here" class="form-control"></td>
</tr>
<tr>
<td>
<label class="control-label" for="inputSuccess1">Course Authur</label></td>
<td> <input type="text" name="courseauthor" ng-model=" up.courseauthor" placeholder="Enter author name here" class="form-control"></td>
</tr>
<tr>
<td>
<label class="control-label" for="inputSuccess1">Course Discription</label></td>
<td><textarea name="coursediscription" ng-model=" up.coursediscription" placeholder="Enter course description here"></textarea></td>
</tr>
<tr>
<td>
<label class="control-label" for="inputSuccess1">Course urlpath</label></td>
<td> <input type="text" name="courseurlpath" ng-model=" up.courseurlpath" placeholder="Enter course url path here" class="form-control"></td>
</tr>
<tr>
<td>
<label class="control-label" for="inputSuccess1">Course Start Date</label></td>
<td> <input type="date" name="coursestartingdate" ng-model=" up.coursestartingdate" placeholder="start" class="form-control"></td>
</tr>
<tr>
<td>
<label class="control-label" for="inputSuccess1">Course End Date</label></td>
<td><input type="date" name="courseendingdate" ng-model=" up.courseendingdate" placeholder="end" class="form-control"></td>
</tr>
<tr>
<td>
<label class="control-label" for="inputSuccess1">Course Attachments</label></td>
<td><input type="file" ngf-select ng-model="up.file" name="file" ngf-pattern="'image/*,application/pdf'" accept="image/*,application/pdf" ngf-max-size="20MB" class="form-control">
</td>
</tr>
<tr>
<td>
<label class="control-label" for="inputSuccess1">Course Video</label></td>
<td><input type="file" ngf-select ng-model="up.file1" name="file1" ngf-pattern="'image/*,application/pdf'" accept="image/*,application/pdf" ngf-max-size="20MB" class="form-control">
</td>
</tr>
<tr>
<td>
Image thumbnail: <img style="width:100px;" ng-show="!!up.file" ngf-thumbnail="up.file || '/thumb.jpg'" />
</td>
<td>

<i ng-show="up.upload_form.file.$error.required">*required</i><br>
<i ng-show="up.upload_form.file.$error.maxSize">File too large
{{up.file.size / 1000000|number:1}}MB: max 20M</i>
</td>
</tr>
<tr>
<td>

<button type="submit" ng-click="up.submit()" class="btn btn-success">submit</button>
<p>{{up.progress}}</p>
</form>
</td>
</tr>
<br>
</table>
</form>
</div>
</body>

<script type="text/javascript">
//var dashboard = angular.module('dashboard', ['Upload','$window''ngRoute']);
var dashboard = angular.module('dashboard', ['ui.router','Upload','$window']);
dashboard.controller('mycontroller',['Upload', '$window',function($scope,Upload, $window){
var vm = this;
vm.submit = function() {
alert("HAi")
//function to call on form submit
/* if (vm.upload_form.file.$valid && vm.file) {*/
//check if from is valid
/*vm.upload(vm.file, vm.file1, vm.coursename, vm.coursecode, vm.coursetitle, vm.courseauthor, vm.coursediscription, vm.courseurlpath, vm.coursestartingdate, vm.courseendingdate); //call upload function*/
// }
}



}]);












/* dashboard.controller('MyCtrl', ['Upload', '$window', function(Upload, $window) {
var vm = this;
vm.submit = function() {
//function to call on form submit
if (vm.upload_form.file.$valid && vm.file) {
//check if from is valid
vm.upload(vm.file, vm.file1, vm.coursename, vm.coursecode, vm.coursetitle, vm.courseauthor, vm.coursediscription, vm.courseurlpath, vm.coursestartingdate, vm.courseendingdate); //call upload function
}
}
vm.upload = function(file, file1, coursename, coursecode, coursetitle, courseauthor, coursediscription, courseurlpath, coursestartingdate, courseendingdate) {
alert("success");

Upload.upload({

url: 'http://192.168.1.16:8080/courseapi/create', //webAPI exposed to upload the file
data: {
file: file,
file1: file1,
coursename: coursename,
coursecode: coursecode,
coursetitle: coursetitle,
courseauthor: courseauthor,
coursediscription: coursediscription,
courseurlpath: courseurlpath,
coursestartingdate: coursestartingdate,
courseendingdate: courseendingdate
} //pass file as data, should be user ng-model
}).then(function(resp) {
console.log("Upload file::::" + JSON.stringify(resp));

//upload function returns a promise
if (resp.data.success === true) {
//validate success
$window.alert(resp.config.data.file.name + ' Successfully uploaded.');
} else {
$window.alert('an error occured');
}
}, function(resp) {
//catch error
console.log('Error status: ' + resp.status);
$window.alert('Error status: ' + resp.status);
}, function(evt) {
console.log(evt);
var progressPercentage = parseInt(100.0 * evt.loaded / evt.total);
console.log('progress: ' + progressPercentage + '% ' + evt.config.data.file.name);
vm.progress = 'progress: ' + progressPercentage + '% '; // capture upload progress
});
};
}]);*/
</script>

</html>


unable to hit angularjs controller
Error stack:angular.min.js:6 Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.2.3/$injector/modulerr?p0=dashboard&p1=Error%…0A%20%20%20%20at%20e%20(http%3A%2F%2Flocalhost%2Fangular.min.js%3A28%3A374)

Answer

You don't have to inject $window and Upload to a module unless they are angualr modules,

So it should be,

var dashboard = angular.module('dashboard', ['ui.router']);

You are not injecting $scope to your function, change your controller like this,

dashboard.controller('mycontroller',['$scope','$window', 'Upload',function($scope,$window, Upload){
   }]);
Comments