/ / angularjsに新しい依存関係を追加 - javascript、angularjs

anglejsは新しい依存関係を追加する - javascript、angularjs

私は新しい依存性、 "angular-file-upload"依存性を追加したいのですが、私がやったこと、私のアプリがクラッシュする、それがどのように動作するのか理解できないのです。

app.js内

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

appController.js内

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

必要なリソースファイルをすべて手に入れました(angle-file-upload.js)とそれらへの参照では、新しい依存関係を正しくインジェクトする方法がわからない。提供されている2行を編集するだけでよいか、全体を作成する必要がある新しいコントローラ、そしてもしそうなら、それはどのように見えるべきですか?

私の質問は他の質問と重複する可能性があると言っていますが、他の質問ではconfig()モジュールに依存関係を注入することについてですが、これは当てはまりません。

回答:

回答№1は4

このプロジェクトを意味するとします。 https://github.com/danialfarid/ng-file-upload
その場合、スニックスは次のようになります。

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

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

回答№2の場合は1

以下の例はあなたが使いたいものを注入する方法を説明しています。からです ここに

//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の場合は1

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の場合は1

以下の方法が必要です。

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 }]);

疑問がある場合は、このディスカッションを参照してください。 config()モジュールの依存関係の挿入 - AngularJS


回答№5の場合は1

から 角度ファイルアップロード wiki:

  • モジュール宣言に依存関係を追加すると、これらは次のようになります。 すべて あなたのアプリケーションが必要とする角度モジュール。

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

  • あなたのコントローラでそのコンポーネントを使用するには、注入する必要があります FileUploader だからあなたはそのAPIにアクセスすることができます。

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


答え№6の場合は1

次のように書くべきです。

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

それだけです。依存関係モジュールは問題なく動作するはずです。


回答№7の場合は1

あなたはあなたのファイルを追加する必要があります。 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>

依存関係を正しくインストールすれば、うまくいくでしょう:)