angular injector error with config() - angularjs

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

Related

angular.js:11598 TypeError: Cannot read property 'open' of undefined in angularjs modal

i try to call modal instance from main page controller but i get this error
TypeError: Cannot read property 'open' of undefined
are anyone help me to solve the problem
my main page controller is
app.controller('unitMasterCntlr', ['$scope', 'toaster', '$state',
'$http', 'emodal', '$timeout', '$compile','$filter','$modal','$rootScope',
function ($scope, toaster, $state, $http, emodal, $timeout, $compile,
DTOptionsBuilder, DTColumnBuilder, DTColumnDefBuilder, $interval,$filter,$modal,$rootScope) {
and module is
angular.module('app', ['datatables','ui.select2','easyModalService',
'ngAnimate',
'ngCookies',
'ngResource',
'ngSanitize',
'ngTouch',
'ngStorage',
'ui.router',
'ui.bootstrap',
'ui.utils',
'ui.load',
'ui.jq',
'oc.lazyLoad',
'pascalprecht.translate',
'ui.mask']);
and modal calling code as
var modalInstance = $modal.open({
templateUrl: 'tpl/UnitMasterModal.jsp',
controller: 'modalcntrl',
size: 'lg',
resolve: {
items: function () {
return $scope.items;
}
}
});
modal controller is
app.controller('modalcntrl', ['$scope', '$modalInstance', 'items', function ($scope, $modalInstance, items) {
$scope.items = items;
$scope.selected = {
item: $scope.items[0]
};
$scope.ok = function () {
$modalInstance.close($scope.selected.item);
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
}]);
where item is an array having some response value that i want to display on modal
iam new to angularjs... plz help me to solve this
I would suggest that this issue is probably caused by a mismatch of your Angular js and Angular Bootstrap UI js libraries.
Please note that the latest version of AngularJS Bootstrap UI 0.12.1 requires Angular 1.2.16+
Check your includes and that the versions are compatible.
problem solved when i change my module like this
app.controller('unitMasterCntlr', ['$scope', 'toaster', '$state','$http', 'emodal', '$timeout', '$compile','$filter','$modal','$rootScope',function ($scope, toaster, $state, $http, emodal,$filter,$modal,$rootScope) {

Angular depandency problems at minify compiling

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'];

Working with multiple factories in angular

I was working with only 1 factory in angular, but now that my project has grown too large, I want to split the file in separate factories.
My factories are like this:
angular.module('factories')
.factory('auth', ['$http', '$state', '$window',
function($http, $state, $window) {
var auth = {};
......
return auth;
Userfactory:
angular.module('factories')
.factory('userFactory', ['$http', '$state', '$window',
function($http, $state, $window) {
var userFactory = {};
return userFactory;
I inject them in my controllers:
angular.module('controllers')
.controller('UserCtrl', ['$scope', '$state', 'auth', 'userFactory', 'Facebook',
function ($scope, $state, auth, userFactory, Facebook) {
However I get the following error:
Error: [$injector:unpr]
http://errors.angularjs.org/1.4.7/$injector/unpr?p0=userFactoryProvider%20%3C-%20userFactory%20%3C-%20UserCtrl
I'm also bootstrapping my factories:
angular.module('factories', []);
And I inject factories into app.js:
var app = angular.module('eva', ['ui.router', 'ngMaterial', 'ngMessages',
'controllers', 'factories', 'ngAnimate', '720kb.socialshare',
'angular-loading-bar', 'angular-svg-round-progress', 'pascalprecht.translate',
'facebook']);
What is the proper way to work with multiple factories?
Check if you imported the script into your index file. You need files from both of services to be imported after the angular.js file.
Since factories are in a separate module so you need to set dependency for controller module because it is using factories from factories module.
Do something like
angular.module('controllers', ['factories'])
.controller('UserCtrl', ['$scope', '$state', 'auth', 'userFactory', 'Facebook',
function ($scope, $state, auth, userFactory, Facebook) {

Issue injecting angular-ui into my controller

I have ui.bootstrap as a dependency in my app, but I'm having an issue injecting the $modal service into my controller.
I'm getting the following error:
$modal is not defined
in my controller code, specifically in this function below where I attempt to open a modal :
function saveAndDisplayReport() {
var modalInstance = $modal.open({
templateUrl: 'myModalContent.html',
controller: ModalInstanceCtrl,
size: size,
resolve: {
items: function () {
return $scope.items;
}
}
});
$location.url('index.html#/?reptname=' + vm.reptName);
}
Here's my reportmaint.js controller code header section, but Im' unclear on how to inject ui.bootstrap (please see the $modal parameter):
(function () {
'use strict';
var controllerId = 'reportmaint';
angular.module('app').controller(controllerId, ['$rootScope', '$scope', '$location', 'common', 'datacontext',
'gridHierarchyService', 'reportsContext', '$modal', reportmaint]);
function reportmaint($rootScope, $scope, $location, common, datacontext, gridHierarchyService, reportsContext) {
var getLogFn = common.logger.getLogFn;
var log = getLogFn(controllerId);
var logErr = getLogFn("error");
...
})();
and here is my app.js where 'ui.bootstrap' is defined:
(function () {
'use strict';
var app = angular.module('app', [
// Angular modules
'ngAnimate', // animations
'ngRoute', // routing
'ngSanitize', // sanitizes html bindings (ex: sidebar.js)
// Custom modules
'common', // common functions, logger, spinner
'common.bootstrap', // bootstrap dialog wrapper functions
// 3rd Party Modules
'ui.bootstrap', // ui-bootstrap (ex: carousel, pagination, dialog)
'kendo.directives', // Kendo UI
'app.customcontrollers' // Language/Currency settings
//'ngjqxsettings' // jQWidgets init and directives (loaded in index.html)
]);
app.run(['$route', '$rootScope', 'common', 'userService', function ($route, $rootScope, common, userService) {
console.log("In app.run");
var getLogFn = common.logger.getLogFn;
var log = getLogFn('app');
}]);
})();
and in my index.html file I have the script reference :
<script src="scripts/ui-bootstrap-tpls-0.10.0.js"></script>
I am using this plunker as a live example, but I'm still going wrong somewhere - http://plnkr.co/edit/KsADLPaOfY7rtPTdWyYn?p=preview
thanks in advance for your help...
Bob
it seems like you are not injecting the modal at all ($modal is missing) in the function of your controller; try something like:
I'm not sure if reportmaint is a service, if not, just remove it
angular.module('app').controller('reportmaint', ['$rootScope', '$scope', '$location', 'common', 'datacontext','gridHierarchyService', 'reportsContext', '$modal', 'reportmaint',
function($rootScope, $scope, $location, common, datacontext, gridHierarchyService, reportsContext, $modal, reportmaint) {
//Client code
}
]);

angularjs angular-file-upload Unknown provider: $uploadProvider error

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
...
})

Resources