CODEWITHSUNDEEP
javascriptangularjs
Sapna Mishra
Sapna Mishra

Reputation: 187

Module error in angular js

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.

Upvotes: 0

Views: 249

Answers (3)

defaultcheckbox
defaultcheckbox

Reputation: 749

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>

Upvotes: 0

haggisandchips
haggisandchips

Reputation: 542

On the controller declaration you have ...

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

... you should have ...

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

Upvotes: 0

lenilsondc
lenilsondc

Reputation: 9800

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">

Upvotes: 2

Related Questions