我正在使用平均堆栈应用程序。以下是我的public / js / main.js
(function(requirejs) {
'use strict';
// -- DEV RequireJS config --
requirejs.config({
// Packages = top-level folders; loads a contained file named 'main.js'
noGlobal: true,
packages: ['main'],
shim: {
'jquery': {
exports: '$'
},
'lodash': {
exports: '_'
},
'angular': {
exports: 'angular',
deps: ['jquery']
},
'angular-cookies': {
deps: ['angular']
},
'angular-sanitize': {
deps: ['angular']
},
'angular-animate': {
deps: ['angular']
},
'angular-resource': {
deps: ['angular']
},
'text': ['require'],
'app': ['angular'],
'ui-router': ['angular'],
'angular-xeditable': ['angular'],
'restangular': ['lodash', 'angular'],
'angular-bootstrap': ['angular'],
'semantic': ['jquery'],
'pickadate': ['jquery'],
'datetimepicker': ['jquery'],
'pickadatedate': ['pickadate'],
'angular-breadcrumb': ['angular'],
'angular-file-upload-shim' : {
deps: ['angular']
},
'angular-cloudinary' :{
deps: ['angular','angular-animate','ui-router','angular-resource']
} ,
'angular-file-upload' :{
deps : ['angular']
}
},
paths: {
'text': '../lib/requirejs-text/text',
'angular': '../lib/angular/angular',
'jquery': '../lib/jquery/jquery',
'lodash': '../lib/lodash/dist/lodash.min',
'semantic': '../lib/semantic/build/packaged/javascript/semantic',
'angular-sanitize': '../lib/angular-sanitize/angular-sanitize',
'angular-animate': '../lib/angular-animate/angular-animate',
'angular-cookies': '../lib/angular-cookies/angular-cookies',
'ui-router': '../lib/angular-ui-router/release/angular-ui-router',
'angular-resource': '../lib/angular-resource/angular-resource',
'angular-bootstrap': '../lib/angular-bootstrap/ui-bootstrap',
'restangular': '../lib/restangular/dist/restangular.min',
'pickadate': '../lib/pickadate/lib/picker',
'datetimepicker': '../lib/smalot-bootstrap-datetimepicker/js/bootstrap-datetimepicker.min',
'textangular': '../lib/textAngular',
'pickadatedate': '../lib/pickadate/lib/picker.date',
'angular-xeditable': '../lib/angular-xeditable/dist/js/xeditable.min',
'moment': '../lib/momentjs/moment',
'd3' : '../lib/d3/d3',
'angular-flash' : '../lib/angular-flash/angular-flash',
'angular-breadcrumb': '../lib/angular-breadcrumb/dist/angular-breadcrumb.min',
'angular-cloudinary' : '../lib/cloudinary_ng/js/angular.cloudinary',
'angular-file-upload' : '../lib/ng-file-upload/angular-file-upload.min',
'angular-file-upload-shim' : '../lib/ng-file-upload-shim/angular-file-upload-shim.min'
//'jquery.cloudinary' : '../lib/cloudinary_js/js/jquery.cloudinary',
//'jquery.iframe-transport': '../lib//blueimp-file-upload/js/jquery.iframe-transport',
//'jquery.fileupload' : '../lib/blueimp-file-upload/js/jquery.fileupload',
//'jquery.ui.widget' : '../lib/blueimp-file-upload/js/vendor/jquery.ui.widget'
// 'text' : '/lib/'
// You can also define a module here, e.g. a local module that doesn't support RequireJS
// or map a longer path to a shorter name
}
});
// Load the app...
require(['angular', 'text', 'semantic', 'angular-cookies', 'ui-router',
'angular-resource', 'angular-sanitize', 'angular-animate','angular-bootstrap', 'common/main',
'restangular', 'angular-breadcrumb','angular-file-upload-shim','angular-cloudinary','angular-file-upload'
],
function(cookies) {
var startModuleName = $('script[data-main][data-start]').attr('data-start');
if (startModuleName) {
var origModuleName = startModuleName;
startModuleName = startModuleName.replace('.', '/');
require([startModuleName + '/main'], function() {
$(function() {
console.log('Bootstraping auth: ' + origModuleName);
angular.bootstrap(document, ['common', origModuleName]);
});
});
}
}
);
})(requirejs);
angular.cloudinary.js
(function (factory) {
'use strict';
if (typeof define === 'function' && define.amd) {
// Register as an anonymous AMD module:
define([
'angular'
], factory);
} else {
// Browser globals:
factory(angular);
}
}(function (angular) {
var angularModule = angular.module('cloudinary', []);
var cloudinaryAttr = function(attr){
if (attr.match(/cl[A-Z]/)) attr = attr.substring(2);
return attr.replace(/([a-z])([A-Z])/g,'$1_$2').toLowerCase();
};
['Src', 'Srcset', 'Href'].forEach(function(attrName) {
var normalized = 'cl' + attrName;
attrName = attrName.toLowerCase();
angularModule.directive(normalized, function($sniffer) {
return {
priority: 99, // it needs to run after the attributes are interpolated
link: function(scope, element, attr) {
var propName = attrName,
name = attrName;
if (attrName === 'href' &&
toString.call(element.prop('href')) === '[object SVGAnimatedString]') {
name = 'xlinkHref';
attr.$attr[name] = 'xlink:href';
propName = null;
}
attr.$observe(normalized, function(value) {
if (!value)
return;
var attributes = {};
$.each(element[0].attributes, function(){attributes[cloudinaryAttr(this.name)] = this.value});
value = $.cloudinary.url(value, attributes);
attr.$set(name, value);
// on IE, if "ng:src" directive declaration is used and "src" attribute doesn't exist
// then calling element.setAttribute('src', 'foo') doesn't do anything, so we need
// to set the property as well to achieve the desired effect.
// we use attr[attrName] value since $set can sanitize the url.
if ($sniffer.msie && propName) element.prop(propName, attr[name]);
});
}
};
});
});
angularModule.directive('clTransformation', function() {
return {
restrict : 'E',
transclude : false,
require: '^clImage',
link : function (scope, element, attrs, clImageCtrl) {
var attributes = {};
$.each(attrs, function(name,value){
if (name[0] !== '$') {
attributes[cloudinaryAttr(name)] = value;
}
});
clImageCtrl.addTransformation(attributes);
}
}
});
angularModule.directive('clImage', function() {
var Controller = function($scope) {
this.addTransformation = function(ts) {
$scope.transformations = $scope.transformations || [];
$scope.transformations.push(ts);
}
};
Controller.$inject = ['$scope'];
return {
restrict : 'E',
replace: true,
transclude : true,
template: "<img ng-transclude/>",
scope: {},
priority: 99,
controller: Controller,
// The linking function will add behavior to the template
link : function(scope, element, attrs) {
var attributes = {};
$.each(attrs, function(name, value){attributes[cloudinaryAttr(name)] = value});
if (scope.transformations) {
attributes.transformation = scope.transformations;
}
attrs.$observe('publicId', function(publicId){
if (!publicId) return;
var url = $.cloudinary.url(publicId, attributes);
element.attr('src', url);
});
if (attrs.htmlWidth) {
element.attr("width", attrs.htmlWidth);
} else {
element.removeAttr("width");
}
if (attrs.htmlHeight) {
element.attr("height", attrs.htmlHeight);
} else {
element.removeAttr("height");
}
}
};
});
}));
角文件upload.min.js
/*! 1.6.6 */ !function() {
"use strict";
var a = angular.module('angularFileUpload', []);
a.service("$upload", ["$http", "$q", "$timeout",
function(a, b, c) {
function d(d) {
d.method = d.method || "POST", d.headers = d.headers || {}, d.transformRequest = d.transformRequest || function(b, c) {
return window.ArrayBuffer && b instanceof window.ArrayBuffer ? b : a.defaults.transformRequest[0](b, c)
};
var e = b.defer();
window.XMLHttpRequest.__isShim && (d.headers.__setXHR_ = function() {
return function(a) {
a && (d.__XHR = a, d.xhrFn && d.xhrFn(a), a.upload.addEventListener("progress", function(a) {
e.notify(a)
}, !1), a.upload.addEventListener("load", function(a) {
a.lengthComputable && e.notify(a)
}, !1))
}
}), a(d).then(function(a) {
e.resolve(a)
}, function(a) {
e.reject(a)
}, function(a) {
e.notify(a)
});
var f = e.promise;
return f.success = function(a) {
return f.then(function(b) {
a(b.data, b.status, b.headers, d)
}), f
}, f.error = function(a) {
return f.then(null, function(b) {
a(b.data, b.status, b.headers, d)
}), f
}, f.progress = function(a) {
return f.then(null, null, function(b) {
a(b)
}), f
}, f.abort = function() {
return d.__XHR && c(function() {
d.__XHR.abort()
}), f
}, f.xhr = function(a) {
return d.xhrFn = function(b) {
return function() {
b && b.apply(f, arguments), a.apply(f, arguments)
}
}(d.xhrFn), f
}, f
}
this.upload = function(b) {
b.headers = b.headers || {}, b.headers["Content-Type"] = void 0, b.transformRequest = b.transformRequest || a.defaults.transformRequest;
var c = new FormData,
e = b.transformRequest,
f = b.data;
return b.transformRequest = function(a, c) {
if (f)
if (b.formDataAppender)
for (var d in f) {
var g = f[d];
b.formDataAppender(a, d, g)
} else
for (var d in f) {
var g = f[d];
if ("function" == typeof e) g = e(g, c);
else
for (var h = 0; h < e.length; h++) {
var i = e[h];
"function" == typeof i && (g = i(g, c))
}
a.append(d, g)
}
if (null != b.file) {
var j = b.fileFormDataName || "file";
if ("[object Array]" === Object.prototype.toString.call(b.file))
for (var k = "[object String]" === Object.prototype.toString.call(j), h = 0; h < b.file.length; h++) a.append(k ? j : j[h], b.file[h], b.fileName && b.fileName[h] || b.file[h].name);
else a.append(j, b.file, b.fileName || b.file.name)
}
return a
}, b.data = c, d(b)
}, this.http = function(a) {
return d(a)
}
}
]), a.directive("ngFileSelect", ["$parse", "$timeout",
function(a, b) {
return function(c, d, e) {
var f = a(e.ngFileSelect);
if ("input" !== d[0].tagName.toLowerCase() || "file" !== (d.attr("type") && d.attr("type").toLowerCase())) {
for (var g = angular.element('<input type="file">'), h = 0; h < d[0].attributes.length; h++) g.attr(d[0].attributes[h].name, d[0].attributes[h].value);
d.attr("data-multiple") && g.attr("multiple", "true"), g.css("top", 0).css("bottom", 0).css("left", 0).css("right", 0).css("width", "100%").css("opacity", 0).css("position", "absolute").css("filter", "alpha(opacity=0)"), d.append(g), g.parent()[0] != d[0] && (d.wrap("<span>"), d.css("z-index", "-1000"), d.parent().append(g), d = d.parent()), ("" === d.css("position") || "static" === d.css("position")) && d.css("position", "relative"), d = g
}
d.bind("change", function(a) {
var d, e, g = [];
if (d = a.__files_ || a.target.files, null != d)
for (e = 0; e < d.length; e++) g.push(d.item(e));
b(function() {
f(c, {
$files: g,
$event: a
})
})
})
}
}
]), a.directive("ngFileDropAvailable", ["$parse", "$timeout",
function(a, b) {
return function(c, d, e) {
if ("draggable" in document.createElement("span")) {
var f = a(e.ngFileDropAvailable);
b(function() {
f(c)
})
}
}
}
]), a.directive("ngFileDrop", ["$parse", "$timeout", "$location",
function(a, b, c) {
return function(d, e, f) {
function g(a) {
return /^[\000-\177]*$/.test(a)
}
function h(a, d) {
var e = [],
f = a.dataTransfer.items;
if (f && f.length > 0 && f[0].webkitGetAsEntry && "file" != c.protocol() && f[0].webkitGetAsEntry().isDirectory)
for (var h = 0; h < f.length; h++) {
var j = f[h].webkitGetAsEntry();
null != j && (g(j.name) ? i(e, j) : f[h].webkitGetAsEntry().isDirectory || e.push(f[h].getAsFile()))
} else {
var k = a.dataTransfer.files;
if (null != k)
for (var h = 0; h < k.length; h++) e.push(k.item(h))
}! function m(a) {
b(function() {
l ? m(10) : d(e)
}, a || 0)
}()
}
function i(a, b, c) {
if (null != b)
if (b.isDirectory) {
var d = b.createReader();
l++, d.readEntries(function(d) {
for (var e = 0; e < d.length; e++) i(a, d[e], (c ? c : "") + b.name + "/");
l--
})
} else l++, b.file(function(b) {
l--, b._relativePath = (c ? c : "") + b.name, a.push(b)
})
}
if ("draggable" in document.createElement("span")) {
var j = null;
e[0].addEventListener("dragover", function(c) {
if (c.preventDefault(), b.cancel(j), !e[0].__drag_over_class_)
if (f.ngFileDragOverClass && f.ngFileDragOverClass.search(/\) *$/) > -1) {
dragOverClassFn = a(f.ngFileDragOverClass);
var g = dragOverClassFn(d, {
$event: c
});
e[0].__drag_over_class_ = g
} else e[0].__drag_over_class_ = f.ngFileDragOverClass || "dragover";
e.addClass(e[0].__drag_over_class_)
}, !1), e[0].addEventListener("dragenter", function(a) {
a.preventDefault()
}, !1), e[0].addEventListener("dragleave", function() {
j = b(function() {
e.removeClass(e[0].__drag_over_class_), e[0].__drag_over_class_ = null
}, f.ngFileDragOverDelay || 1)
}, !1);
var k = a(f.ngFileDrop);
e[0].addEventListener("drop", function(a) {
a.preventDefault(), e.removeClass(e[0].__drag_over_class_), e[0].__drag_over_class_ = null, h(a, function(b) {
k(d, {
$files: b,
$event: a
})
})
}, !1);
var l = 0
}
}
}
])
};
在加载angular-file-upload.js之前，我应该包含'$ http''$ q'吗？我现在的错误是 错误：[$ injector：modulerr]由于以下原因导致无法实例化模块angularFileUpload： 错误：[$ injector：nomod]模块'angularFileUpload'不可用！您要么错误拼写了模块名称，要么忘记加载它。如果注册模块，请确保将依赖项指定为第二个参数。
答案 0 :(得分：3)
您应该验证JS文件的正确排序，如下所示：
https://github.com/cloudinary/cloudinary_angular/blob/master/samples/photo_album/app/index.html#L21
请注意angular-file-upload-shim.min.js在angular.js之前的angular.cloudinary.js之前angular-file-upload.min.js
答案 1 :(得分：0)
除了Itay Taragano＆＃39;告诉我，我刚刚安装了＆＃34; $ http＆＃34;，＆＃34; $ q＆＃34;，＆＃34; $ timeout＆＃34;这些模块也。那很有效！