angularjs : issue with injecting $uibModalInstance - angularjs

I have a controller :
(function() {
'use strict';
angular
.module('myApp')
.controller('ConsultantController', ConsultantController);
ConsultantController.$inject = ['$scope', '$state', 'Consultant'];
function ConsultantController ( $scope, $state, Consultant) {
var vm = this;
vm.consultants = [];
vm.loadAll = function() {
Consultant.query(function(result) {
vm.consultants = result;
});
};
vm.loadAll();
}
})();
If I inject the $uibModalInstance dependency:
(function() {
'use strict';
angular
.module('myApp')
.controller('ConsultantController', ConsultantController);
ConsultantController.$inject = ['$uibModalInstance','$scope', '$state', 'Consultant'];
function ConsultantController ( $uibModalInstance, $scope, $state, Consultant) {
var vm = this;
vm.consultants = [];
vm.loadAll = function() {
Consultant.query(function(result) {
vm.consultants = result;
});
};
vm.loadAll();
vm.clearSearchDialog = function() {
$uibModalInstance.dismiss('cancel');
};
}
})();
I am getting the following error :
angular.js:13294 Error: [$injector:unpr] Unknown provider: $uibModalInstanceProvider <- $uibModalInstance <- ConsultantController
http://errors.angularjs.org/1.5.2/$injector/unpr?p0=%24uibModalInstanceProvider%20%3C-%20%24uibModalInstance%20%3C-%20ConsultantController
at http://localhost:8181/bower_components/angular/angular.js:68:12
at http://localhost:8181/bower_components/angular/angular.js:4418:19
at Object.getService [as get] (http://localhost:8181/bower_components/angular/angular.js:4571:39)
at http://localhost:8181/bower_components/angular/angular.js:4423:45
at getService (http://localhost:8181/bower_components/angular/angular.js:4571:39)
at injectionArgs (http://localhost:8181/bower_components/angular/angular.js:4595:58)
at Object.instantiate (http://localhost:8181/bower_components/angular/angular.js:4637:18)
at $controller (http://localhost:8181/bower_components/angular/angular.js:9912:28)
at http://localhost:8181/bower_components/angular-ui-router/release/angular-ui-router.js:4081:28
at invokeLinkFn (http://localhost:8181/bower_components/angular/angular.js:9525:9) <div class="well ng-scope" ui-view="content">
But in my project there are several controllers with this dependency.
I don't understand why I have this error on this controller.
[UPDATE]
app.js :
(function() {
'use strict';
angular
.module('myApp', [
'ngStorage',
'ngResource',
'ngCookies',
'ngAria',
'ngCacheBuster',
'ngFileUpload',
'ui.bootstrap',
'ui.bootstrap.datetimepicker',
'ui.router',
'infinite-scroll',
'angular-loading-bar'
])
.run(run);
run.$inject = ['stateHandler'];
function run(stateHandler) {
stateHandler.initialize();
}
})();
working controller :
(function() {
'use strict';
angular
.module('myApp')
.controller('ConsultantDeleteController',ConsultantDeleteController);
ConsultantDeleteController.$inject = ['$uibModalInstance', 'entity', 'Consultant'];
function ConsultantDeleteController($uibModalInstance, entity, Consultant) {
var vm = this;
vm.consultant = entity;
vm.clear = function() {
$uibModalInstance.dismiss('cancel');
};
vm.confirmDelete = function (id) {
Consultant.delete({id: id},
function () {
$uibModalInstance.close(true);
});
};
}
})();
[UPDATE2 ]
.state('consultant.search', {
parent: 'consultant',
url: '/search',
data: {
authorities: ['ROLE_USER']
},
onEnter: ['$stateParams', '$state', '$uibModal', function($stateParams, $state, $uibModal) {
$uibModal.open({
templateUrl: 'app/entities/consultant/consultant-search-dialog.html',
controller: 'ConsultantController',
controllerAs: 'vm',
size: 'md',
}).result.then(function() {
$state.go('consultant', null, { reload: true });
}, function() {
$state.go('^');
});
}]
});

Related

angular 1.5 passes undefined value to a controler after state.Provider "resolve"

I have this code:
app.js
var promptoWeb = angular.module('promptoWeb', ['ngMaterial', 'ngAnimate', 'ngMessages',
'ngAria', 'ui.router', 'ui.sortable', 'ngFileUpload']);
(function (app) {
app.factory('env', function () {
var domain = {domain: "http://localhost:8860/Elton"};
return domain;
});
app.config(['$stateProvider', '$urlRouterProvider', '$compileProvider',
function ($stateProvider, $urlRouterProvider, $compileProvider) {
self = this;
$compileProvider.preAssignBindingsEnabled(true);
$urlRouterProvider.otherwise('/');
$stateProvider.state('home', {
url: '/',
template: '<home-component></home-component>',
component: 'homeComponent',
params: {
selectedFilter: undefined
},
resolve: {
ldapGroup: function (authorizationService) {
return authorizationService.getLdapGroup() === 'WazeAdOps';
}
}
})
}]);
})(promptoWeb);
and home-component.js
(function (app) {
app.component('homeComponent', {
templateUrl: 'partials/home-partial.html',
controller: ['$scope', '$state', function ($scope, $state, ldapGroup) {
var self = this;
self.isFullList = false;
self.ldapGroup = ldapGroup;
self.addVoice = function () {
$state.go("add");
};
$scope.$broadcast('searchNoFilter');
}]
});
})
(promptoWeb);
why do i get an error in home-component that `ldapGroup is undefined?
and if I change to:
(function (app) {
app.component('homeComponent', {
templateUrl: 'partials/home-partial.html',
controller: ['$scope', '$state', 'ldapGroup',function ($scope, $state, ldapGroup) {
I get an error:
Error: [$injector:unpr] Unknown provider: ldapGroupProvider <- ldapGroup
I have also tried:
(function (app) {
app.component('homeComponent', {
templateUrl: 'partials/home-partial.html',
bindings: {
ldapGroup: '<'
},
controller: ['$scope', '$state', function ($scope, $state) {
var self = this;
self.isFullList = false;
$scope.isAdOps = !self.ldapGroup? true : self.ldapGroup;
I get self.ldapGroup === undefined
why do i get an error in home-component that ldapGroup is undefined?
Because you've told Angular to inject $scope and $state, so the third argument of the function is undefined.
controller: ['$scope', '$state', function ($scope, $state, ldapGroup)
I get an error:
Error: [$injector:unpr] Unknown provider: ldapGroupProvider <- ldapGroup
Because there is no service named ldapGroup. ldapGroup is a resolve of your state, which can be injected into the controller of that state. But your state has no controller. It has a component.
How to use components, and how resolves are bound to inputs of the component, is described in the documentation

AngularJs service not found

I'm trying to inject a service into a controller but the service is not found error:
angular.js:13424 Error: [$injector:unpr] http://errors.angularjs.org/1.5.3/$injector/unpr?p0=<section data-ui-view="" class="view-container {{main.pageTransition.class}} ng-scope" data-ng-animate="1">copeProvider%20%3C-%20%24scope%20%3C-%20authenticationService
at Error (native)
at http://localhost:3000/bower_components/angular/angular.min.js:6:416
at http://localhost:3000/bower_components/angular/angular.min.js:43:7
at Object.d [as get] (http://localhost:3000/bower_components/angular/angular.min.js:40:270)
at http://localhost:3000/bower_components/angular/angular.min.js:43:69
at d (http://localhost:3000/bower_components/angular/angular.min.js:40:270)
at e (http://localhost:3000/bower_components/angular/angular.min.js:41:1)
at Object.instantiate (http://localhost:3000/bower_components/angular/angular.min.js:41:364)
at Object.<anonymous> (http://localhost:3000/bower_components/angular/angular.min.js:42:184)
at Object.invoke (http://localhost:3000/bower_components/angular/angular.min.js:41:295)
My controller:
(function () {
'use strict';
angular.module('app.page')
.controller('authCtrl', ['$scope', '$window', '$location','authenticationService', authCtrl]);
function authCtrl($scope, $window, $location, authenticationService) {
$scope.login = function() {
authenticationService.test();
}
$scope.signup = function() {
$location.url('/')
}
$scope.reset = function() {
$location.url('/')
}
$scope.unlock = function() {
$location.url('/')
}
}
})();
Service:
(function () {
'use strict';
angular.module('app.page')
.service('authenticationService', ['$scope', '$window', authenticationService]);
function authenticationService() {
this.test = function()
{
alert('test');
}
}
})();
What am I doing wrong here?
The number of injects in the service call ['$scope', '$window', authenticationService] does not match the argument list of your service function ().
To avoid errors like this, I suggest you to use $inject (https://docs.angularjs.org/guide/di#-inject-property-annotation):
(function () {
'use strict';
angular.module('app.page').service('authenticationService', authenticationService);
authenticationService.$inject = [];
function authenticationService() {
this.test = function()
{
alert('test');
}
}
})();

Karma test failed when I inject a ui-router resolve in a controller

I've been trying to test my controller:
app.js
angular
.module('MyModule', [
'ui.router'
]);
angular
.module('MyModule')
.config(configFn);
configFn.$inject = ['$stateProvider'];
function configFn($stateProvider){
$stateProvider
.state('myState',{
url:'state',
views: {
'main' : {
templateUrl: 'src/views/view.html',
controller: 'MyCtrl',
controllerAs: 'ctrl',
resolve: {
DataResolve: ['MyService', function(MyService){
return MyService.getData();
}]
}
}
}
});
controller.js
angular
.module('MyModule')
.controller('MyCtrl', Controller);
Controller.$inject = ['DataResolve'];
/* #ngInject */
function Controller(DataResolve) {
var vm = this;
vm.data = DataResolve;
}
My spec
controller_spec.js
describe('Controller', function(){
beforeEach(module('MyModule'));
beforeEach(inject(function($controller){
this.myCtrl = $controller('MyCtrl');
}));
it('Controller should be defined', function() {
expect(this.myCtrl).toBeDefined();
});
});
But when the test runs, I get the following error:
Error: [$injector:unpr] Unknown provider: DataResolveProvider <- DataResolve <- MyCtrl
What I have been doing wrong?
In your beforeEach, add a reference to your service :
beforeEach(inject(function($controller, DataResolve){
this.DataResolve = DataResolve;
this.myCtrl = $controller('ParcelasController', {
DataResolve: this.DataResolve;
});
}));

bootstraping angular value provider

My app.js, service.js, controller.js are declared as below. My problem is the controller only pickup the initial values {userId: -1, networkName: 'xyz'} set in the service.js, even though the values are changed to { userId: 129, networkName: 'mydomainaccoutname' } in myApp.run() block in the app.js. I have correctly injected the value provider to myApp.run() as well as the controller. How do I get the controller to pick up the updated values? Thanks.
app.js
(function () {
'use strict';
//debugger;
var myApp = angular.module('myApp', [
// Angular modules
'ngAnimate', // animations
//'ngRoute', // routing
'ngSanitize', // sanitizes html bindings (ex: sidebar.js)
'ui.router', // state routing
'ui.grid',
'ui.grid.pagination',
'ngResource', // RESTful resource
// Custom modules
'common', // common functions, logger, spinner
'common.bootstrap', // bootstrap dialog wrapper functions
// 3rd Party Modules
'ui.bootstrap' // ui-bootstrap (ex: carousel, pagination, dialog)
]);
myApp.run(['$templateCache', '$rootScope', '$state', '$stateParams', 'currentUserAccount', 'userFactory',
function ($templateCache, $rootScope, $state, $stateParams, currentUserAccount, userFactory) {
//currentUserAccount is a value provider service
currentUserAccount = { userId: 129, networkName: 'mydomainaccoutname' };
}]);
})();
service.js
'use strict';
angular.module('myApp')
.value('version', '5.0')
.value('currentUserAccount', {
userId: -1,
networkName: 'xyz'
});
controller.js
(function () {
'use strict';
//debugger;
var controllerId = 'shellCtrl';
angular.module('cmtApp').controller(controllerId,
['$rootScope', 'common', 'config', 'currentUserAccount', shell]);
function shell($rootScope, common, config, currentUserAccount) {
var vm = this;
var logSuccess = common.logger.getLogFn(controllerId, 'success');
var events = config.events;
vm.busyMessage = 'Please wait ...';
vm.isBusy = true;
vm.isAdmin = false;
vm.currentUser = currentUserAccount;
vm.spinnerOptions = {
radius: 40,
lines: 7,
length: 0,
width: 30,
speed: 1.7,
corners: 1.0,
trail: 100,
color: '#F58A00'
};
activate();
function activate() {
logSuccess('CMT loaded!', null, true);
common.activateController([], controllerId);
}
};
})();
Why not use a actual service instead? You can have your service like follows.
angular.module('app')
.service('UserService', [function() {
var currentUser = {
userId: -1,
networkName: 'xyz'
};
var getCurrentUser = function() {
return currentUser;
};
var setCurrentUser = function(user) {
currentUser = user;
};
// public functions
return {
getCurrentUser: getCurrentUser,
setCurrentUser: setCurrentUser
};
}]);
Then in your controller, you can do something like this:
(function () {
'use strict';
//debugger;
var controllerId = 'shellCtrl';
angular.module('cmtApp').controller(controllerId,
['$rootScope', 'common', 'config', 'UserService', shell]);
function shell($rootScope, common, config, UserService) {
var vm = this;
....
vm.currentUser = UserService.getCurrentUser();
...
};
})();
Then in your app runner:
myApp.run(['$templateCache', '$rootScope', '$state', '$stateParams', 'UserService', 'userFactory',
function ($templateCache, $rootScope, $state, $stateParams, currentUserAccount, userFactory) {
//currentUserAccount is a value provider service
UserService.setCurrentUser({ userId: 129, networkName: 'mydomainaccoutname' });
}]);

Ui-router modal injection error on minification

I'm using ui-router and ui-bootstrap/modal
I've got a sale screen split in 2 so I have a left side with the cart and the right one can have the catalog, an edit product or a payment section.
I need to have a modal in all states so I've created a function to add in some ui-router states.
Here's the function:
var modalSaleDelete = ['$state', '$modal',
function($state, $modal) {
$modal.open({
templateUrl: 'views/sale/delete.html',
resolve: {
parentScope: function($rootScope) {
return $rootScope.parentScope;
}
},
controller: function($scope, parentScope) {
$scope.delete = function() {
// TODO: change the way this is called
parentScope.resetOrder();
parentScope = null;
$scope.$close('cancel');
};
$scope.cancel = function() {
parentScope = null;
$scope.$dismiss('cancel');
};
}
}).result.then(function() {
return $state.transitionTo($state.$current.parent);
}, function() {
return $state.transitionTo($state.$current.parent);
});
}
];
Then I put that in every state:
.state('sale.new.catalog.delete', {
url: '/delete',
onEnter: modalSaleDelete
})
It works great on development but when I minify this I get an error:
Error: [$injector:unpr] Unknown provider: aProvider <- a
http://errors.angularjs.org/1.2.24/$injector/unpr?p0=aProvider%20%3C-%20a
at http://localhost/ociWeb/code/dist/scripts/vendor.29d508bc.js:3:26944
at http://localhost/ociWeb/code/dist/scripts/vendor.29d508bc.js:4:11462
at Object.c [as get] (http://localhost/ociWeb/code/dist/scripts/vendor.29d508bc.js:4:10723)
at http://localhost/ociWeb/code/dist/scripts/vendor.29d508bc.js:4:11557
at c (http://localhost/ociWeb/code/dist/scripts/vendor.29d508bc.js:4:10723)
at Object.d [as invoke] (http://localhost/ociWeb/code/dist/scripts/vendor.29d508bc.js:4:11008)
at http://localhost/ociWeb/code/dist/scripts/vendor.29d508bc.js:8:20044
at Object.f [as forEach] (http://localhost/ociWeb/code/dist/scripts/vendor.29d508bc.js:3:27387)
at j (http://localhost/ociWeb/code/dist/scripts/vendor.29d508bc.js:8:19961)
at Object.k.open (http://localhost/ociWeb/code/dist/scripts/vendor.29d508bc.js:8:20414)
I debugged that and aProvider should be '$state'.
Any idea on how to make that work?
You need to annotate EVERY injection for minification to work. Or, if you are using an angular-aware minifier, it probably doesn't understand which functions are injected by UI-Router and which are standard functions.
var modalSaleDelete = ['$state', '$modal',
function($state, $modal) {
$modal.open({
templateUrl: 'views/sale/delete.html',
resolve: {
parentScope: [ '$rootScope', function($rootScope) {
return $rootScope.parentScope;
}]
},
controller: [ '$scope', 'parentScope', function($scope, parentScope) {
$scope.delete = function() {
// TODO: change the way this is called
parentScope.resetOrder();
parentScope = null;
$scope.$close('cancel');
};
$scope.cancel = function() {
parentScope = null;
$scope.$dismiss('cancel');
};
}]
}).result.then(function() {
return $state.transitionTo($state.$current.parent);
}, function() {
return $state.transitionTo($state.$current.parent);
});
}
];
Try injecting them manually by creating an inject property. Do you have a jsfiddle or plunker set up?
modalSaleDelete.$inject = ['$state', '$modal'];
Well, I've figured it out. I don't see why but the problem was in resolve.
I solved it injecting '$state' in resolve though it's not needed.
When debugging I just saw the aProvider was trying to be injected in there.
var modalSaleDelete = ['$rootScope', '$state', '$modal',
function($rootScope, $state, $modal) {
$modal.open({
templateUrl: 'views/sale/delete.html',
resolve: {
parentScope: ['$state', '$rootScope', function($state, $rootScope) {
return $rootScope.parentScope;
}]
},
controller: ['$scope', '$state', 'parentScope', function($scope, $state, parentScope) {
$scope.delete = function() {
// TODO: change the way this is called
parentScope.resetOrder();
parentScope = null;
$scope.$close();
};
$scope.cancel = function() {
parentScope = null;
$scope.$dismiss();
};
}]
}).result.then(function() {
// close
return $state.transitionTo($state.current.name.replace('.delete', ''));
}, function() {
// dismiss
return $state.transitionTo($state.current.name.replace('.delete', ''));
});
}
];

Resources