angularjs 添加新依赖答案

【问题标题】：angularjs add new dependencyangularjs 添加新依赖
【发布时间】：2015-07-15 11:59:42
【问题描述】：

我想添加一个新的依赖项，即“angular-file-upload”依赖项，但是无论我做什么，我的应用程序都会崩溃，我无法理解它是如何工作的。我现在得到的是：

在 app.js 中

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

在 appController.js 中

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

我有所有必要的资源文件 (angular-file-upload.js) 和对它们的引用，我只是不知道如何正确注入新的依赖项。我想我只需要编辑提供的两条线，或者我必须创建一个全新的控制器，如果是这样，那应该是什么样子？

它说我的问题可能与另一个问题重复，但另一个问题是关于将依赖项注入 config() 模块，这里不是这种情况。

【问题讨论】：

你没有指定新的依赖。
stackoverflow.com/questions/18875714/…

标签： javascript angularjs

【解决方案1】：

假设您指的是这个项目：https://github.com/danialfarid/ng-file-upload
那么语法是这样的：

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

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

【讨论】：

它有效，但我确定我试过了，可能我在控制器中写了'angularFileUpload'，谢谢你，还有其他回答的人。
@user3266024 没问题。但是，如果您真的想感谢人们，那么最好的方法是对他们的答案投票

【解决方案2】：

下面的例子描述了如何注入你想要使用的东西。来自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);
                })
            }
        }
    };
}]);

【讨论】：

【解决方案3】：

将依赖添加到 Angular 实例中

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

并添加到您的控制器中：

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

在他们的 Git 页面上查看示例 https://github.com/nervgh/angular-file-upload/blob/master/examples/simple/controllers.js

【讨论】：

【解决方案4】：

您需要以下方法。

如果你有 FileUploader.js 文件

在 main.js(app.js) 之前的 angular.js 脚本之后跟踪文件到您的主 html 页面
那就这样配置吧

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

如果您有任何疑问，请查看此讨论：- Injecting Dependencies in config() modules - AngularJS

【讨论】：

【解决方案5】：

来自angular-file-upload wiki：

在您的模块声明中添加依赖项，这些将是所有您的应用程序需要的角度模块。

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

要在控制器中使用其组件，您还必须注入 FileUploader 以便访问其 API。

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

【讨论】：

【解决方案6】：

你应该这样写：

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

就是这样。依赖模块应该可以正常工作。

【讨论】：

【解决方案7】：

您必须将文件添加到您的 angular.module：

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

并导入文件（例如在您的 index.html 中）：

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

如果你正确安装了你的依赖，它应该可以工作:)

【讨论】：