Angularjs add new dependency
I want to add a new dependency, angular-file-upload 'dependency, but whatever I do, my app crashes, I can't figure out how it works. Now I have:
in app.js
var myApp = angular.module('myApp', ['ui.bootstrap']);
in appController.js
myApp.controller('appCtrl', ['$scope', function ($scope) {
I have all the required resource files (angular-file-upload.js) and links to them, I just don't know how to inject the new dependency correctly. I think I only need to edit the two provided lines, or do I need to create a completely new controller, and if so, what would that look like?
It says that my question is a possible duplicate of the other, but on the other hand the question of injecting dependencies into config () modules is not the case here.
source to share
Assuming you mean this project: https://github.com/danialfarid/ng-file-upload
then snytax looks like this:
var myApp = angular.module('myApp', ['ui.bootstrap', 'angularFileUpload']);
myApp.controller('appCtrl', ['$scope', 'FileUploader', function ($scope, FileUploader) {
}]);
source to share
The example below describes how to enter the material you would like to use. This 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);
})
}
}
};
}]);
source to share
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 index.html):
<script src="yourpath/ui-bootstrap-tpls.js"></script>
<script src="yourpath/angular-file-upload.js"></script>
If you install your dependency correctly, it should work :)
source to share
Add dependency to Angular instance
var myApp = angular.module('myApp', ['ui.bootstrap', 'angularFileUpload']);
And add to your controller:
myApp.controller('appCtrl', ['$scope', 'FileUploader', function($scope, FileUploader) {
See the example on the Git page https://github.com/nervgh/angular-file-upload/blob/master/examples/simple/controllers.js
source to share
From the angular-file-upload wiki:
- Add a dependency to your module declaration, this will be all angular modules your application needs.
var myApp = angular.module('myApp', ['ui.bootstrap', 'angularFileUpload']);
- To use its components in your controller you also need to inject
FileUploader
so you can access its API.
myApp.controller('appCtrl', ['$scope', 'FileUploader', function ($scope, FileUploader) {
source to share
You need the following methods.
If you have FileUploader.js file
-
track files on main html page after angular.js script to main.js (app.js)
-
Then set it up like this
var myApp = angular.module('myApp', ['ui.bootstrap', 'fileUpload']); myApp.controller('appCtrl', ['$scope', 'fileUpload', function ($scope, fileUpload) {
// Your code }]);
If you have any doubts, check out this discussion: - Injection dependencies in config () modules - AngularJS
source to share