This is not a duplicate of This Question
I have included all the required files in view:
<script src="~/Scripts/angular-file-upload-master/examples/console-sham.min.js"></script>
<script src="~/Content/js/angular.js"></script>
<script src="~/Scripts/angular-file-upload-master/angular-file-upload.js"></script>
My module and controller:
var controllers = angular.module('controllers', ['ngGrid', 'ngDialog', 'angularFileUpload']);
controllers.controller('CustomProductsCtrl',
['$scope', '$window', 'ngDialog', 'CommonService',
'CustomProductsServices', '$upload',
function ($scope, $window, ngDialog, CommonService,
CustomProductsServices, $upload){
});
But still I get this error.
Error: [$injector:unpr] Unknown provider: $uploadProvider
Please help me out.
Hit the same issue, turned out that the documentation to inject $upload is out of date, it should be FileUploader:
controllers.controller('CustomProductsCtrl',
[..., '$upload', function (..., 'FileUploader') {
Spent more time than I'd like to admit figuring that out. FYI, I determined that by looking at angular-file-upload.js:
.factory('FileUploader', ['fileUploaderOptions', '$rootScope', '$http', '$window', '$compile',
It appears that you didn't close the controller declaration correctly.
Specifically, you have: }); when you should have }]); instead. Note the missing ].
In context, you should have:
var controllers = angular.module('controllers', ['ngGrid', 'ngDialog', 'angularFileUpload']);
controllers.controller('CustomProductsCtrl',
['$scope', '$window', 'ngDialog', 'CommonService',
'CustomProductsServices', '$upload',
function ($scope, $window, ngDialog, CommonService,
CustomProductsServices, $upload){
}]); // Note: missing ']' added in here
because we need to follow the form of declaring a controller. The controller API is terse, but pretty succint:
$controller(constructor, locals);
Which expanded to your case:
module_name.controller( 'your_Ctrl',
[locals, function(){
}
]
);
I added in extra spacing to call out the missing ] and to show how we're closing off elements within the declaration.
It seems this error can be ng-file-upload version dependent:
https://github.com/danialfarid/ng-file-upload/issues/45
If you try the suggestions on that page and this page and still get the error, the following worked for me:
angular.module('starter.controllers', ['ngFileUpload'])
.controller('HomeCtrl', function($scope, ... Upload) {
...
file.upload = Upload.upload({...}); //Upload instead of $upload
...
})
Related
I want to inject a config into my angular app. The app contains also an run object.
But when I add the config option I get an $injector:modulerr error. And I can't find the error.
var myApp = angular.module('myApp',[
'ngAnimate',
'ui.bootstrap',
'ui.router',
'angular.filter',
'angularUtils.directives.dirPagination',
'validation.match',
'ngSanitize',
'ngCookies',
'pascalprecht.translate',
'toggle-switch',
'angucomplete-alt',
'cgPrompt',
'dndLists',
'ngFileUpload',
'ui.router.breadcrumbs',
'angular-bind-html-compile',
'rzModule', // range slider (i.e. for price filter)
'ngFileSaver',
'angular-input-stars',
'textAngular',
'textAngular-uploadImage'
]);
myApp.config(function($provide) {
$provide.decorator('taOptions', function($delegate) {
$delegate.toolbar[1].push('uploadImage');
return $delegate;
});
});
myApp.run(['$rootScope', '$window', '$location', '$stateParams', '$api', '$translate', '$transitions', '$state',
function($rootScope, $window, $location, $stateParams, $api, $translate, $transitions, $state) {
//rootscope
}]);
It's going about the textAngular-uploadImage module (https://github.com/mrded/textAngular-uploadImage). When I remove the config option my app runs fine, but of course, I can't use the module.
What is the reason for this? I included al the required files in the html, and textAngular (https://github.com/textAngular/textAngular) is working fine.
How can I solve this? Or are there any other options for a normal upload function in textAngular? I also tried this solution (https://github.com/textAngular/textAngular/issues/139#issuecomment-111205679) but I get the same error.
Try something below code..
myapp.config(['$provide', function($provide){
$provide.decorator('taOptions', ['$delegate', function(taOptions){
taOptions.toolbar[1].push('uploadImage');
}
return taOptions;
}];
});
And you would need to register upload image with editor like below
taRegisterTool('uploadImage', {
iconclass: "fa fa-user",
action: function(){
//code
}
});
Which one is correct way for initializing module,controller in angularJS
var myapp=angular.module('myApp', []);
myapp.controller('Ctrl1', Ctrl1);
myapp.controller('Ctrl2', Ctrl2);
Ctrl1.$inject = ['$scope', '$http'];
Ctrl2.$inject = ['$scope', '$http'];
function Ctrl1($scope, $http) {
}
function Ctrl2($scope, $http) {
}
or this way
var myapp=angular.module('myApp', []);
myapp.controller('Ctrl1', Ctrl1);
Ctrl1.$inject = ['$scope', '$http'];
function Ctrl1($scope, $http) {
}
myapp.controller('Ctrl2', Ctrl2);
Ctrl2.$inject = ['$scope', '$http'];
function Ctrl2($scope, $http) {
}
or doing this way
var myapp=angular.module('myApp', []);
myapp.controller('Ctrl1', ['$scope', '$http', function ($scope, $http) {} ]);
myapp.controller('Ctrl2', ['$scope', '$http', function ($scope, $http) {} ]);
I am confusing which way is correct and can you give give me the cirrect project structure of AngularJS frmawork
Any sample project for that in github always welcome
Some peoples says John Papa style which one correct way i mean most efficient way
The simpliest way is to write:
myapp.controller('Ctrl1', function($scope, $http) {
});
And you should use ngmin to parse your code before minification. It will automatically wrap the controller callback in ['$scope', '$http', function($scope, $http) {}] to avoid minification problem.
If you use gulp, use gulp-ngmin.
The second way should be the ideal way as because
It is easy to read.
Easy to maintain
Protected from minification by the injector.
Anyways all of them are correct.
But second way should be the best.
Also make sure that you wrap the code in the way to protect from variable name clashes:
(function(){
'use strict'; //another best practice
//then your code
})()
Angular's $inject method, we can explicitly declare our dependencies. This one may give problem for every controller injection. Other than you can use.
https://docs.angularjs.org/api/auto/service/$injector
I have an app which uses a lot of different js files. When I compile the app normaly with gulp everything works well, but when I compile everything in one file to minify it, I get an error (Uncaught Error: [$injector:modulerr]).
app-55bb2aca73.js:4 Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.5.8/$injector/modulerr?p0=app&p1=Error%3A%20%…http%3A%2F%2Flocalhost%3A8080%2Fbuild%2Fjs%2Fapp-55bb2aca73.js%3A4%3A30075)
at app-55bb2aca73.js:4
...
Here is my gulpfile.js (use Laravels elexir plugin):
mix.scripts([
/*libs*/
'../../../node_modules/jquery/dist/jquery.slim.min.js',
'../../../node_modules/bootstrap/dist/js/bootstrap.min.js',
'../../../node_modules/angular/angular.min.js',
'../../../node_modules/angular-cookies/angular-cookies.min.js',
'../../../node_modules/pickadate/lib/compressed/picker.js',
'../../../node_modules/pickadate/lib/compressed/picker.date.js',
'../../../node_modules/pickadate/lib/compressed/picker.time.js',
'app.js',
'config/*.js',
'angular/controller/*.js'
], 'public/js/app.js');
Here the app.js:
var app = angular.module("app", ['ngCookies'], function ($interpolateProvider) {
$interpolateProvider.startSymbol('<%');
$interpolateProvider.endSymbol('%>');
});
For example here the begin of a controller:
app.controller('someCtrl', function ($scope, $window, $http, $cookies) {
Someone got any idea why this is not working in one file?
When you minify, the controller method names get stripped out. Need to include in this way to have a reference:
app.controller('someCtrl', ['$scope', '$window', '$http', '$cookies'
function ($scope, $window, $http, $cookies) {
// ...
}
]
More here: https://docs.angularjs.org/guide/di
This might be because the system angular uses for injecting dependencies according to the names of the variables passed as parameters. If you are minifying your files into a single one and variables are not keeping the same original name, you should inject the dependencies manually as follow:
var myApp = function ($interpolateProvider) {
$interpolateProvider.startSymbol('<%');
$interpolateProvider.endSymbol('%>');
}
myApp.$inject = ['$interpolateProvider'];
angular.module("app", ['ngCookies'], myApp);
... and in your controller:
app.controller('someCtrl', controlFn);
var controlFn = function ($scope, $window, $http, $cookies) {};
controlFn.$inject = ['$scope', '$window', '$http', '$cookies'];
I am getting the error "Unknown Provider".
I have searched throught the forums and implemented all suggestions(marked as answer, as well).
But error isnt resolved. Please guide. Below is the code:
In html, am referring 1. angular.min.js 2.angular-resource.js 3.App.js 4.MyJS in the same order.
In my app.js:
angular.module('myApp', [ 'ngSanitize', 'ngCookies','ngResource' ]);
angular.module('myApp')
.controller('MainCtrl', ['$rootScope','$resource', function($rootScope) {
//my code goes here//
}]);
In another JS file:
angular.module('myApp')
.controller('myController',
['$scope', '$rootScope', '$http', '$window', '$cookies', '$resource', function ($scope, $rootScope, $http, $window, $cookies, $resource)
{ ---- My Code ----- }
I have seen the forums and suggestions and ensured app.js is called first. angular-resource.js is referred after referring angular.min.js.
Please suggest where am going wrong.
Thank You
Should be
['$rootScope','$resource', function($rootScope, $resource) {
instead of
['$rootScope','$resource', function($rootScope) {
Number of controllers function parameters should be same as number of string literals.
I've two routes with resolve. Goes like this:
.when('/foos', {
templateUrl: 'views/foos.html',
controller: 'FoosCtrl',
resolve: {
foo_list: ['$q', '$route', '$timeout', '$location', 'Foos', function($q, $route, $timeout, $location, Foos) {
// postpone the execution
var deferred_foo = $q.defer()
Foos.getFoos({token:session_uid}, successCb)
function successCb(list) {
if(list['status'] === 200) {
deferred_foo.resolve(list)
}
else {
alert('Crashcrashcrash')
deferred_foo.reject("Something just wasn't right")
//$location.path('maintenance')
}
}
return deferred_foo.promise
}]
}
})
.when('/r/:type/:bar_id', {
templateUrl: 'views/bar.html',
controller: 'BarsCtrl',
resolve: {
bar: ['$q', '$route', '$timeout', '$location', 'Bars', function($q, $route, $timeout, $location, Bars) {
// postpone the execution
var deferred = $q.defer()
Bars.getBar({type: bar_type}, successCb)
function successCb(result) {
if(result['status'] === 200) {
deferred.resolve(result)
}
else {
alert('Crashcrashcrash')
deferred.reject("Something just wasn't right")
$location.path('foos')
}
return deferred.promise
}]
}
})
Then I've two controllers working like this:
App.controller('FoosCtrl', ['$scope', '$location', 'Foos', 'foo_list', function($scope, $location, Foos, foo_list) {...}
App.controller('BarsCtrl', ['$scope', '$routeParams', '$location', 'Bars', 'bar', 'sharedService', function($scope, $routeParams, $location, Bars, bar, sharedService) {...}
Could somebody explain why Bar works but Foo gives me Error: Unknown provider: foo_listProvider <- foo_list? I've tried replacing foo_list with different name in case camelCasing did something but didn't help.
So, this question was surprisingly similar to my own which I just figured out with help from the folks over at the Angular IRC channel... are you, by chance, setting up your controller though ng-controller? I had:
<div ng-controller="myCtrl">
... when it should have been removed:
<div>
... because I was setting up the controller in the resolve on the router. That's what I was doing and it was causing this very issue. You can see more here:
https://stackoverflow.com/a/18305423/1306982
foo_list <- is the js file for this being loaded in the your html page in a script tag? it just mightbe the case that when you have forgotten to include factory/service/controller and actually have forgotten to include it in a script tag in the index/app html page (or require shims)
Okay just saw your comment and extending the answer here cos its easier to do it here.
Your code where you declare the controller should read like
App.controller('FoosCtrl',
['$scope', '$location', 'Foos', /* comment out foo_list here*/
function($scope, $location, Foos, foo_list /* this remains */) {
...
}
when the route is getting changed things you mention in 'resolve' would get resolved by ui-router. But it the place where you are declaring your FoosCtrl you don't actually have a provider for it to resolve.
Give this a try i had a similar case like this last week.
Just as a heads up, I just had a similar issue which was caused by adding the resolve-variables as a dependency to the controller while not having set up the response funciton in the $stateProvider.state() yet.
Adding the resolve function fixed the missing dependency
(I still don't quite get why - I'd be glad if anyone could share his knowledge in the comments)