Angularjs $injector:modulerr

Issue

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)

Solution

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){
   }]);

Answered By – Sajeetharan

Answer Checked By – Terry (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.