I'm using an interceptor to add JWT tokens to my http calls. My code works fine like this:
angular
.module("jwtKickStart")
.factory("authInterceptorService", authInterceptorService);
authInterceptorService.$inject = ["$injector", "$q", "$timeout"];
function authInterceptorService($injector, $q, $timeout) {
var $state, loginModal, $http;
//...
But if I wrap that in an IIFE, then I get an Unknown Provider error:
(function () {
"use strict";
angular
.module("jwtKickStart")
.factory("authInterceptorService", authInterceptorService);
authInterceptorService.$inject = ["$injector", "$q", "$timeout"];
function authInterceptorService($injector, $q, $timeout) {
var $state, loginModal, $http;
//...
Am I not allowed to use the IIFE?
EDIT: here are some more details
The error message is this one: http://errors.angularjs.org/1.3.8/$injector/unpr?p0=authInterceptorServiceProvider%20%3C-%20authInterceptorService%20%3C-%20%24http%20%3C-%20%24templateFactory%20%3C-%20%24view%20%3C-%20%24state
The source code is available here:
https://github.com/capesean/JWTKickStart/tree/master/JWTKickStart.APP/app
try to inject like this :
(function () {
"use strict";
angular
.module("jwtKickStart")
.factory("authInterceptorService",["$injector","$q","$timeout" authInterceptorService]);
function authInterceptorService($injector, $q, $timeout) {
// your code
}
Related
I have a controller as shown below.
(function () {
"use strict";
var app = angular.module('Demo')
.controller('MainController', ['$rootScope', '$scope', '$location', 'curUser',MainController]);
function MainController($rootScope, $scope, $location, curUser) {
//some logic here
}());
I tried to include a third party module called ngIdle and the resultant code looks like below.
(function () {
"use strict";
var app = angular.module('Demo', ['ngIdle'])
.controller('MainController', ['$rootScope', '$scope', '$location', 'curUser','Idle', function ($rootScope, $scope, $location, curUser, Idle) {
}]).config(function (IdleProvider, KeepaliveProvider) {
// configure Idle settings
IdleProvider.idle(5); // in seconds
IdleProvider.timeout(5); // in seconds
KeepaliveProvider.interval(2); // in seconds
})
.run(function (Idle) {
// start watching when the app runs. also starts the Keepalive service by default.
Idle.watch();
});
}());
Now I get an error as Error: [$injector:unpr] Unknown provider: curUserProvider <- curUser <- MainController. Here's the curUser factory definition
(function () {
"use strict";
angular.module("services").factory("curUser", curUser)
function curUser() {}
}());
curUser is defined in the services module so it needs to be added as a dependency in your app. This would have been the case even before adding ngIdle.
var app = angular.module('Demo', ["ngIdle", "services"])
The factory function should also return something.
function curUser() {
return { username: 'fooBar'};
}
See working plunker.
So I know that I need to use [] to secure my code before minification. For example:
app.controller('mainController', ['$scope', function($scope) {
$scope.message = 'HOORAY!';
}]);
But how to do that when I am not using app as global variable, I've got
(function () {
'use strict';
angular
.module('app')
.controller('loginCtrl', Controller);
function Controller($scope, authService) {
var vm = $scope;
vm.login = function(login_field, password_field) {
var loginData = {
login: login_field,
password: password_field
};
authService.login(loginData);
};
}
})();
How to prevent it from problems during minification?
The same way:
.controller('loginCtrl', ['$scope', 'authService', Controller]);
I strongly advise you to use ng-annotate, which allows using the simple syntax, and transforms it into minifiable code for you. That will make your code simpler, easier to read, and avoid a whole lot of bugs.
When a controller or a service is a named function like in code above, it looks best when it's annotated with $inject (see John Papa style guide).
angular
.module('app')
.controller('loginCtrl', Controller);
Controller.$inject = ['$scope', 'authService'];
function Controller($scope, authService) {...}
Hoisting allows to place the annotation right above injectable function.
I believe it should be the same way:
(function () {
'use strict';
angular
.module('app')
.controller('loginCtrl', ['$scope', 'authService', function($scope, authService) {
$scope.login = function(login_field, password_field) {
var loginData = {
login: login_field,
password: password_field
};
authService.login(loginData);
};
}]);
})();
One way you may try grunt-ngmin before the minification that will searches and replace the minification with minify-friendly code. Go to this link you will see example https://github.com/btford/grunt-ngmin#example
Hi I am new to angularjs and I am trying to inject some factory to controller but I am facing difficulties. My factory works fine. I am able to set data in factory.
Below is my code where I inject factory.
function () {
angular.module('RoslpApp').controller('RegistrationOTPVerification', ['$scope', '$http', '$translatePartialLoader', '$translate', '$state', '$stateParams', 'SomeFactory',
function ($scope, $http, $translatePartialLoader, $translate, $state, $stateParams, CONSTANTS, SomeFactory) {
var OTP = $stateParams.pageList.OTP;
$scope.EnterOTP = "Please enter this OTP to verify the user " + OTP;
//RegistrationOTPVerification.$inject = ['SomeFactory'];
//Facing issues in above line
alert(1);
function RegistrationOTPVerification(SomeFactory) {
var vm = this;
vm.someVariable = SomeFactory.getData();
console.log(vm.someVariable); // logs your data
alert(vm.someVariable);
}
});
This is my factory code.
(function () {
'use strict';
angular
.module('RoslpApp')
.factory('SomeFactory', SomeFactory);
SomeFactory.$inject = [];
function SomeFactory() {
var someData;
var factory = {
setData: setData,
getData: getData
};
function setData(data) {
someData = data;
}
function getData() {
return someData;
}
return factory;
}
})();
I set data in some other controller with SomeFactory.setData("123")
I want to inject someFactory as below:
RegistrationOTPVerification.$inject = ['SomeFactory'];
But whenever I write this, I get error RegistrationOTPVerification is undefined. If I comment that line everything works fine but I want to get some data from factory.
My factory name is SomeFactory and I want to inject in above controller. Any help would be appreciated.
Firstly, you missed CONSTANTS in your injections.
Next, I think you are mixing two kinds of syntax for controller here. Either use anonymous function or named. Don't mix both together.
Here's how your code should look like.
function () {
angular.module('RoslpApp').controller('RegistrationOTPVerification', ['$scope', '$http', '$translatePartialLoader', '$translate', '$state', '$stateParams', 'SomeFactory',
function ($scope, $http, $translatePartialLoader, $translate, $state, $stateParams, SomeFactory) {
var vm = this;
var OTP = $stateParams.pageList.OTP;
vm.EnterOTP = "Please enter this OTP to verify the user " + OTP;
vm.someVariable = SomeFactory.getData();
console.log(vm.someVariable); // logs your data
alert(vm.someVariable);
});
You missed CONSTANTS in controller dependency list:
'$translate', '$state', '$stateParams', 'SomeFactory',
... $translate, $state, $stateParams, CONSTANTS, SomeFactory) {
So whatever you inject SomeFactory is available in controller under the name CONSTANTS and symbol SomeFactory is undefined.
I'd like to inject $ionicPlatform abstraction into the service, but seemed I'm doing this wrong way. How should I use $ionicPlatform with service?
(function () {
"use strict";
angular.module('service', []).service('BBNService', ["$ionicPlatform", function ($http, $localStorage, $ionicPlatform) {
This code making $ionicPlatform undefined.
Inject ionic dependency & Remove $http if you not using it as follows,
angular.module('service', ['ionic'])
.service('BBNService', ["$localStorage", "$ionicPlatform",
function ($localStorage, $ionicPlatform) {
}]);
It's undefined because you wrong the order. (use ionic.Platform)
Replace with this:
angular.module('service', [])
.service('BBNService', ["$http", "$localStorage",
function ($http, $localStorage) {
//use this
var $ionicPlatform = ionic.Platform;
}]);
This code works; the getData() function is invoked:
var app = angular.module('POC', []);
app.controller('POCCtrl', ['$scope','$timeout', function ($scope, $timeout) {
<snip>
$timeout(function () {
$scope.getData()
}, 250, $scope);
]);
But the code below , which references localStorageService, causes a native error in IE when I try to run and debug the page. The getData() function is never invoked. What am I missing? Does the local storage service have to be included in the module too?
var app = angular.module('POC', []);
app.controller('POCCtrl', ['$scope','$timeout', 'localStorageService',
function ($scope, $timeout, localStorageService) {
$timeout(function () {
$scope.getData()
}, 250, $scope);
]);
use
app.controller('POCCtrl',
function ($scope, $timeout, localStorageService) {
);
I don't know why but the controller just doesn't take localStorageService in the way you are using, I had the same error today. See my question (I am myself looking for an explanation though)
Error in angular-js while using angular-local-storage