1

我很难将 ng-file-upload 安装到我的 Yeoman 脚手架 meanjs.org 应用程序中。Bower 安装未完成配置，当我尝试使用具有“上传”依赖项的控制器加载视图时出现错误。这是我第一次尝试将自定义模块安装到 Angular 中。我想我会创建这篇文章来为这个案例提供一些具体的说明，并为处于类似位置的人分享一些一般信息，以准确了解如何使用其他指令扩展脚手架项目。

在寻找解决方案时，我发现了很多对 angular-file-upload 的引用。这是一个不同的包或旧版本，所以不要使用它。

发这篇文章时 ng-file-upload 的版本是：7.0.17。我还安装了可能需要的 ng-file-upload-shim。它为带有 Flash 的非 html5 浏览器添加了文件上传支持。

第 1 步 - 获取 ng-file-upload 源。

Angular 中的所有模块和指令都在文件夹中。您可以在此处从 github 下载文件夹：https ://github.com/danialfarid/ng-file-upload 或使用 bower/npm。

bower install ng-file-upload-shim --save bower install ng-file-upload --save npm install ng-file-upload

Bower 处理前端的依赖项（角度），并将文件夹放入 public/lib/ng-file-upload 和 public/lib/ng-file-upload-shim。如果您手动下载，这就是它需要去的地方。

第 2 步 - 更新您的应用程序配置文件。

这是不明显的部分。Bower 会安装最新版本的源代码和任何依赖项，但不会更新您的配置文件。至少，它目前不适用于 ng-file-upload。

a) 更新 config.js，位于 /public/modules//config.js

如果您使用 yo meanjs:angular-module，则会为您创建这些文件。您会看到如下所示的一行：

var applicationModuleVendorDependencies = ['ngResource', .... 等

您需要将“ngFileUpload”添加到该列表中。这定义了您的模块的依赖关系。

如果您只这样做，您将收到一条错误消息：

[$injector:nomod] 模块“ngFileUpload”不可用！您要么拼错了模块名称，要么忘记加载它。如果注册模块，请确保将依赖项指定为第二个参数。

ngFileUpload 是在 ng-file-upload 文件夹中的脚本文件中定义的，因此显然 Angular 无法知道 ngFileUpload 是什么，除非它以某种方式被告知文件在文件系统上的位置。

b) 更新 all.js，位于 /config/env/all.js

这是您告诉 Angular 要包含文件系统上的哪些文件的地方。我们需要两行，它们可能需要按特定顺序排列（我从其他来源读到它们确实如此，但可能来自旧版本）。无论如何，在 all.js 中，找到

'public/lib/angular/angular.js',

并像这样替换环绕它：

'public/lib/ng-file-upload-shim/ng-file-upload-shim.min.js',
'public/lib/angular/angular.js',
'public/lib/ng-file-upload/ng-file-upload.min.js',

c) 使用正确的名称将依赖项注入到您的模块中

您可能会认为现在，在您的控制器中，您注入了 ngFileUpload，但您需要用于注入的名称是“Upload”。

这是一个具有正确形式的示例控制器：

controller('fileUploadTestCtrl', ['$scope','Upload',
function ($scope, Upload) {}

如您所见，它称为“上传”。没有美元符号或其他任何东西；旧版本使用 $upload，但已更改。

d) 享受

希望这对那些试图解决这个问题的人有用。

4

0 回答 0