angularjs add new dependency

Question

I want to add a new dependency, the 'angular-file-upload' dependency, but what ever I do, my app crashes, I can't understand how it works. What I've got now is:

in app.js

var myApp = angular.module('myApp', ['ui.bootstrap']);

in appController.js

myApp.controller('appCtrl', ['$scope', function ($scope) {

I've got all necessary resource files (angular-file-upload.js) and references to them, I just don't know how to properly inject the new dependency. I'm thinking I only need to edit the two provided lines, or do I have to create a whole new controller, and if so, what should that look like?

It says that my question is a possible duplicate of another, but on the other question it's about injecting dependencies into config() modules, this is not the case here.

You didn't specify new dependency.

dfsq
– dfsq

2015-07-15 12:02:21 +00:00
Commented Jul 15, 2015 at 12:02 — dfsq
– dfsq, Commented Jul 15, 2015 at 12:02
stackoverflow.com/questions/18875714/…

Mohammad Faizan khan
– Mohammad Faizan khan

2015-07-15 12:04:44 +00:00
Commented Jul 15, 2015 at 12:04 — Mohammad Faizan khan
– Mohammad Faizan khan, Commented Jul 15, 2015 at 12:04

Buh Buh · Accepted Answer · 2015-07-15 12:06:08Z

4

Assuming you mean this project: https://github.com/danialfarid/ng-file-upload
then the snytax is like this:

var myApp = angular.module('myApp', ['ui.bootstrap', 'angularFileUpload']);

myApp.controller('appCtrl', ['$scope', 'FileUploader', function ($scope, FileUploader) {
}]);

answered Jul 15, 2015 at 12:06

Buh Buh

7,5262 gold badges38 silver badges64 bronze badges

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

2 Comments

sch Over a year ago

It works, but I am sure I tried that, possibly I wrote 'angularFileUpload' in the controller, thank you, and everyone else who answered also.

Buh Buh Over a year ago

@user3266024 No problem. But if you really want to thank people then the best way is to vote up on their answers

AndrasCsanyi · Accepted Answer · 2015-07-15 12:04:48Z

The example below describes how to inject the stuff you would like to use. It is from here

//inject angular file upload directives and services.
var app = angular.module('fileUpload', ['ngFileUpload']);

app.controller('MyCtrl', ['$scope', 'Upload', function ($scope, Upload) {
                                    ^^^^^^^^                    ^^^^^^
    $scope.$watch('files', function () {
        $scope.upload($scope.files);
    });

    $scope.upload = function (files) {
        if (files && files.length) {
            for (var i = 0; i < files.length; i++) {
                var file = files[i];
                Upload.upload({
                    url: 'upload/url',
                    fields: {'username': $scope.username},
                    file: file
                }).progress(function (evt) {
                    var progressPercentage = parseInt(100.0 * evt.loaded / evt.total);
                    console.log('progress: ' + progressPercentage + '% ' + evt.config.file.name);
                }).success(function (data, status, headers, config) {
                    console.log('file ' + config.file.name + 'uploaded. Response: ' + data);
                }).error(function (data, status, headers, config) {
                    console.log('error status: ' + status);
                })
            }
        }
    };
}]);

Brian Gerhards · Accepted Answer · 2015-07-15 12:05:29Z

1

Add the dependency to the Angular instance

var myApp = angular.module('myApp', ['ui.bootstrap', 'angularFileUpload']);

And add into your controller:

myApp.controller('appCtrl', ['$scope', 'FileUploader', function($scope, FileUploader) {

See the example on their Git page https://github.com/nervgh/angular-file-upload/blob/master/examples/simple/controllers.js

answered Jul 15, 2015 at 12:05

Brian Gerhards

8495 silver badges12 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 12:03:02Z

1

You need following ways.

If you have FileUploader.js file

track the files to your main html page after angular.js script before main.js(app.js)
Then configure it by this way

var myApp = angular.module('myApp', ['ui.bootstrap', 'fileUpload']); myApp.controller('appCtrl', ['$scope', 'fileUpload', function ($scope, fileUpload) { // Your code }]);

If you have any doubt, please see this discussion :- Injecting Dependencies in config() modules - AngularJS

edited May 23, 2017 at 12:03

CommunityBot

11 silver badge

answered Jul 15, 2015 at 12:10

Ramesh Rajendran

38.9k49 gold badges159 silver badges241 bronze badges

Comments

Vale · Accepted Answer · 2015-07-15 12:17:29Z

1

From the angular-file-upload wiki:

Add the dependency in your module declaration, these will be all the angular modules your application needs.

var myApp = angular.module('myApp', ['ui.bootstrap', 'angularFileUpload']);

To use its components in your controller you'll have also to inject FileUploader so you can access its API.

myApp.controller('appCtrl', ['$scope', 'FileUploader', function ($scope, FileUploader) {

edited Jul 15, 2015 at 12:17

answered Jul 15, 2015 at 12:06

Vale

2,0621 gold badge18 silver badges22 bronze badges

Comments

Alliswell · Accepted Answer · 2015-07-16 00:42:37Z

1

You should write it like following:

var myApp = angular.module('myApp', ['ui.bootstrap', 'angular-file-upload']);

That's it. The dependence module should work fine.

edited Jul 16, 2015 at 0:42

answered Jul 15, 2015 at 12:04

Alliswell

1,59320 silver badges35 bronze badges

Comments

Mistalis · Accepted Answer · 2016-10-11 12:48:09Z

1

You have to add the file to your angular.module:

var myApp = angular.module('myApp', ['ui.bootstrap', 'angular-file-upload']);

And import the file (for example in your index.html):

<script src="yourpath/ui-bootstrap-tpls.js"></script>
<script src="yourpath/angular-file-upload.js"></script>

If you correctly install your dependency, it should works :)

edited Oct 11, 2016 at 12:48

answered Jul 15, 2015 at 12:05

Mistalis

18.3k14 gold badges78 silver badges97 bronze badges

Collectives™ on Stack Overflow

angularjs add new dependency

7 Answers 7

2 Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

2 Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related