Module error in angular js

Question

I am new to angular js I want progress bar line for file upload.

I am getting below error when I am run my code:

angular.js:38 Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.5.6/$injector/modulerr?p0=app&p1=Error%3A%20%…ogleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.6%2Fangular.min.js%3A21%3A332)

Here is my code:

<html ng-app="app">
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
        <script>
           var app = angular.module('myApp', ['angularFileUpload'])

            .controller('MyCtrl', ['$scope','$upload', function MyCtrl($upload) {
            // .controller("MyCtrl", function ($scope,$upload){
            // var MyCtrl = [ '$scope', '$upload', function($scope, $upload) {
                $scope.onFileSelect = function(files) {
                   var file = files[0];
                   $scope.upload = $upload.upload({
                   url: 'url',
                   method: 'POST', 
                   withCredentials: true, 
                   data: {type:'uploadzip'},
                   file: file, // or list of files ($files) for html5 only 
                 }).progress(function(evt) {
                   console.log('percent: ' + parseInt(100.0 * evt.loaded / evt.total));
                   $scope.progressBar = parseInt(100.0 * evt.loaded / evt.total);
                 }).success(function(data, status, headers, config) {
                   console.log('upload succesfully...')
                 }).error(function(err) {
                   console.log(err.stack);
                 }) 
                }
            }]);

        </script>
    </head>
    <body >
       <div ng-controller="MyCtrl">
          <input type="file" ng-file-select="onFileSelect($files)" multiple>
          <div ng-scope='progressBar'>
          </div>
        </div>
    </body>
</html>

Can someone modify my code with correction needed.

Looks like you're missing a script tag for angularFileUpload: raw.githubusercontent.com/nervgh/angular-file-upload/master/… — Maria Ines Parnisari
– Maria Ines Parnisari, Commented Oct 28, 2016 at 13:11
If not you have to add <script src="angular-file-upload.min.js"></script> with the correct path — Berserk
– Berserk, Commented Oct 28, 2016 at 13:12

lenilsondc · Accepted Answer · 2016-10-28 13:12:25Z

2

The error is on ng-app directive, you are seeting the wrong module name. Also you're not injecting $scope on your controller.

change:

<html ng-app="app">

to this:

<html ng-app="myApp">

answered Oct 28, 2016 at 13:12

lenilsondc

9,8453 gold badges27 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

defaultcheckbox · Accepted Answer · 2016-10-28 13:54:37Z

In summary, you have three issues as identified by everyone here. You html needs to reference myapp not app. It should be:

<html ng-app="myApp">

Your html needs to include the script for uploads. In your HEAD you should have:

<script src="angular-file-upload.min.js"></script>

Your controller should inject scope:

It should be:

.controller('MyCtrl', ['$scope','$upload', function MyCtrl($scope, $upload) {

Accordingly, trying replacing your code and and markup with the following.

    <html ng-app="myApp">
        <head>
            <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="angular-file-upload.min.js"></script>
            <script>
               var app = angular.module('myApp', ['angularFileUpload'])

                .controller('MyCtrl', ['$scope','$upload', function MyCtrl($scope, $upload) {
                // .controller("MyCtrl", function ($scope,$upload){
                // var MyCtrl = [ '$scope', '$upload', function($scope, $upload) {
                    $scope.onFileSelect = function(files) {
                       var file = files[0];
                       $scope.upload = $upload.upload({
                       url: 'url',
                       method: 'POST', 
                       withCredentials: true, 
                       data: {type:'uploadzip'},
                       file: file, // or list of files ($files) for html5 only 
                     }).progress(function(evt) {
                       console.log('percent: ' + parseInt(100.0 * evt.loaded / evt.total));
                       $scope.progressBar = parseInt(100.0 * evt.loaded / evt.total);
                     }).success(function(data, status, headers, config) {
                       console.log('upload succesfully...')
                     }).error(function(err) {
                       console.log(err.stack);
                     }) 
                    }
                }]);

            </script>
        </head>
        <body >
           <div ng-controller="MyCtrl">
              <input type="file" ng-file-select="onFileSelect($files)" multiple>
              <div ng-scope='progressBar'>
              </div>
            </div>
        </body>
    </html>

haggisandchips · Accepted Answer · 2016-10-28 13:16:01Z

0

On the controller declaration you have ...

.controller('MyCtrl', ['$scope','$upload', function MyCtrl($upload) {

... you should have ...

.controller('MyCtrl', ['$scope','$upload', function MyCtrl($scope, $upload) {

edited Oct 28, 2016 at 13:16

answered Oct 28, 2016 at 13:10

haggisandchips

5612 silver badges11 bronze badges

Collectives™ on Stack Overflow

Module error in angular js

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related