Question

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

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

本文发布时的ng-file-upload版本为：7.0.17。我还安装了ng-file-upload-shim，这可能是必需的。它通过flash为非html5浏览器添加了文件上传支持。

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

角度的所有模块和指令都在文件夹中。你可以在这里从github下载文件夹：https://github.com/danialfarid/ng-file-upload 或使用凉亭/ npm。

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

Bower处理前端的依赖关系（angular），并将文件夹放入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'，.... etc

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

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

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

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

b）更新在/config/env/all.js

中找到的all.js

这是您告诉角度要包含的文件系统上的文件的位置。我们需要两行，并且可能需要按特定顺序排列（我从其他来源读取它们，但可能是旧版本）。无论如何，在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，但您需要用于注入的名称是“上传”。

以下是具有正确格式的示例控制器：

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

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

d）享受

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

将ng-file-upload添加到与yeoman

0 个答案: