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.

http://stackoverflow.com/questions/18875714/angular-js-re-open-and-add-dependencies-to-an-already-bootstrapped-application — Mohammad Faizan khan, Jul 15 '15 at 12:04

score 4 · Accepted Answer · answered Jul 15 '15 at 12:06

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 '15 at 12:06

Buh Buh

7,443
1
34
61

It works, but I am sure I tried that, possibly I wrote 'angularFileUpload' in the controller, thank you, and everyone else who answered also. – sch Jul 15 '15 at 12:20
1

@user3266024 No problem. But if you really want to thank people then the best way is to vote up on their answers – Buh Buh Jul 15 '15 at 12:48

Alliswell · Answer 2 · 2015-07-16T00:42:37.937

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 '15 at 00:42

answered Jul 15 '15 at 12:04

Alliswell

1,523
20
35

score 1 · Answer 3 · answered Jul 15 '15 at 12:04

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

Mistalis · Answer 4 · 2016-10-11T12:48:09.163

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 '16 at 12:48

answered Jul 15 '15 at 12:05

Mistalis

17,793
13
73
97

score 1 · Answer 5 · answered Jul 15 '15 at 12:05

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

Vale · Answer 6 · 2015-07-15T12:17:29.927

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) {

score 1 · Answer 7 · edited May 23 '17 at 12:03

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

angularjs add new dependency

7 Answers7