Yeoman scaffolded meanjs.org アプリケーションに ng-file-upload をインストールするのに苦労しました。Bower のインストールで構成が完了せず、「アップロード」依存関係のあるコントローラーを使用してビューをロードしようとすると、エラーが発生しました。カスタムモジュールをangularにインストールしようとしたのはこれが初めてでした。私はこの投稿を作成して、この場合の特定の指示を与え、同様の立場にある人々に一般的な情報を共有して、スキャフォールディングされたプロジェクトを他のディレクティブで拡張する方法を正確に理解できるようにしようと考えました。
解決策を探していると、angular-file-upload への参照がたくさん見つかりました。これは別のパッケージか古いバージョンのどちらかなので、使用しないでください。
この記事の時点での ng-file-upload のバージョンは 7.0.17 です。必要な場合がある ng-file-upload-shim もインストールしました。フラッシュを使用して非 html5 ブラウザにファイル アップロードのサポートを追加します。
ステップ 1 - ng-file-upload ソースを取得します。
angular のすべてのモジュールとディレクティブはフォルダーに入っています。https://github.com/danialfarid/ng-file-uploadの github からフォルダーをダウンロードするか、 bower/npm を使用できます。
bower install ng-file-upload-shim --save bower install 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) /public/modules//config.js にある config.js を更新します。
yo meanjs:angular-module を使用すると、これらのファイルが作成されます。次のような行が表示されます。
var applicationModuleVendorDependencies = ['ngResource', .... など
そのリストに「ngFileUpload」を追加する必要があります。これにより、モジュールの依存関係が定義されます。
これだけを行うと、エラー メッセージが表示されます。
[$injector:nomod] モジュール 'ngFileUpload' は利用できません! モジュール名のつづりを間違えたか、モジュールをロードするのを忘れました。モジュールを登録する場合は、依存関係を 2 番目の引数として指定してください。
ngFileUpload は ng-file-upload フォルダーにあるスクリプト ファイルで定義されているため、何らかの方法でファイル システム上のファイルの場所が通知されない限り、明らかに angular は ngFileUpload が何であるかを知ることができません。
b) /config/env/all.js にある all.js を更新します。
ここで、ファイル システムに含めるファイルを angular に指示します。2 行が必要で、特定の順序にする必要がある場合があります (他の情報源から読んだところ、それは古いバージョンのものだった可能性があります)。いずれにせよ、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) 楽しむ
うまくいけば、これは誰かがこれを理解しようとして立ち往生するのに役立つでしょう.