I'm trying to implement Angular Interceptor for Exceptions. For one at least. I have a token and when it old enogh backend throws TokenAlmostExpired exception. This exception contains errorCode = 101. In the interceptor I'm checking that code is 101 and then I need to send POST request to backend's /refresh endpoint so I could refresh token.
.factory('errorInjector',['$injector', function ($q, $injector) {
var vm = this;
var errorInjector = {
'response': function (response) {
console.log(response);
return response;
},
'responseError': function (rejection) {
if (JSON.stringify(rejection.data.errorCode) === JSON.stringify(101)) {
vm.getRefreshToken();
}
return $q.reject(rejection);
}
};
return errorInjector;
}]);
and
.config(['$httpProvider', function ($httpProvider) {
$httpProvider.interceptors.push('errorInjector');
}]);
$http
But there's a problem at interceptor level, that I can't just give it dependency on $http, because there's Circular dependency found: $http <- errorInjector <- $http <- $templateFactory <- $view <- $state
$scope
And I can't put getRefreshToken() function to $scope, because $scope dependency also gives 'Circular dependency'.
$Injector
var http = $injector.get('$http');
doesn't work as well, and gives me erorr.
So how can I catch exception in interceptor and then do a $http request from there?
Interceptor
(function (angular) {
'use strict';
angular.module('services').factory("httpInterceptor", [
'errorLauncher',
'$q',
function (errorLauncher, $q) {
return {
'requestError': function (rejection) {
if (rejection.status === 101) {
errorLauncher.pushInErrorMessage(rejection);
}
return $q.reject(rejection);
},
'responseError': function (rejection) {
if (rejection.status === 101) {
errorLauncher.pushInErrorMessage(rejection);
}
return $q.reject(rejection);
}
};
}]);
})(angular);
and error handler service
(function (angular) {
'use strict';
angular.module('services').factory("errorLauncher", [
'$rootScope',
function ($rootScope) {
return {
'pushInErrorMessage': function (rejection) {
$rootScope.$emit('theTokenWillDieSoon');
}
};
}]);
})(angular);
and now main app controller
(function (angular) {
'use strict';
angular.module('controllers').controller("globalCtrl", [
'$rootScope',
'$http',
function ($rootScope, $http) {
$rootScope.$on('theTokenWillDieSoon', function () {
// http from here
});
}]);
})(angular);
.factory('errorInjector',['$injector', function ($q, $injector) { .... }]);
Change To:
.factory('errorInjector',['$q', function ($q) { .... }]);
So I've done it with service. Thanks everyone!
interceptor:
.factory('errorInjector',['$injector', function ($q, $injector) {
var errorInjector = {
'response': function (response) {
....
},
'responseError': function (rejection) {
if (JSON.stringify(rejection.data.errorCode) === JSON.stringify(101)) {
var refreshTokenService = $q.get('refreshTokenService');
refreshTokenService.refreshTokenService();
$.notify({message: data.data.detailMessage}, {type: 'warning'});
}
return $q.reject(rejection);
}
};
return errorInjector;
}]);
refreshTokenService:
.service('refreshTokenService', ['$http', function ($http) {
this.refreshTokenService = function () {
$http.post('/refresh').then(
function success(response) {
.....
},
function error(data) {
.....
}
);
};
}])
;
Related
firstly here is my factorys code:
angular.module('myModule').factory('actionsService', ['$http', '$window', '$q', 'jsUtils', 'dataService', 'perspectivesService', function($http, $window, $q, jsUtils, dataService, perspectivesService) {
'use strict';
//some functions
function buildMenuItem(item, targets, callInvoker) {
if(...) {
//some code
} else {
perspectivesService.removeExtension(item.id);
}
}
//some more functions
}]);
I get the following error:
ERROR TypeError: perspectivesService.removeExtension is not a function
I know the problem isn't comming from my perspectivesService, because I'm injecting it the same way into controllers and calling the same function (removeExtension) and it works fine. There obviously is a problem with the dependency injection here, but I can't figure out exactly what. From what I've read there shouldn't be a problem to inject my service into the factory and it's done the same way you would inject it into a controller.. Any ideas what I'm doing wrong here?
There is my perspectivesService code:
(function () {
'use strict';
angular.module('myModule').service('perspectivesService', perspectivesService);
perspectivesService.$inject = ['$http'];
function perspectivesService($http){
return {
removeExtension: removeExtension,
setEditEnabled: setEditEnabled,
isEditEnabled: isEditEnabled
};
function removeExtension(ext){
$http({
method: 'POST',
url: 'remove',
params: { removeExt: ext
}
}).then(function(resp){
console.log('Its was successfull');
});
}
function setEditEnabled(edit){
localStorage.setItem('editMode', edit);
}
function isEditEnabled(){
if(localStorage.getItem("editMode") === 'true'){
return true;
}else if(localStorage.getItem("editMode") === 'false') {
return false;
}else{
return false;
}
}
}
})();
Can't seem to get this factory to work properly.
I'm trying to do the $http requests from a factory.
But I'm getting this error of:
TypeError: PassFactory.setNewPass is not a function
Below is the code:
Factory
(function () {
angular
.module("myApp")
.factory('PassFactory', ['$http', function ($http) {
/*
var passFactory = {};
passFactory.setNewPass = function (newpass, user) {
return $http.post('/password/' + newpass, user, function (response) {
});
};
*/
return {
setNewPass: function (newpass, user) {
return $http.post('/password/' + newpass, user, function (response) {
});
}
};
}])
})();
Controller
(function () {
angular
.module("myApp")
.controller('PCtrl', ['$scope', '$location', '$rootScope', 'PassFactory', setHome]);
function setHome($scope, $location, PassFactory) {
$scope.login = function (user) {
if (user.newpassword == user.newpasswordconfirm) {
PassFactory.setNewPass(user.newpassword, user).then(function (response) {
$location.path("/");
});
}
};
}
})();
You have missed $rootScope in controller factory function. Always make sure the the order in dependency have been injected inside DI array, in same sequence you should ask for their instance inside its factory function.
angular
.module("myApp")
.controller('PCtrl', ['$scope', '$location', '$rootScope', 'PassFactory', setHome]);
//added $rootScope in 3rd place
function setHome($scope, $location, $rootScope, PassFactory) {
I am using requireJS for my angularjs app.
common.service.js
define(function () {
var coreModule = angular.module('coreModule');
coreModule.config(['$provide', function ($provide) {
$provide.factory("CommonService", CommonService);
}]);
CommonService.$inject = ["$http", "$q", "$window"];
function CommonService($http, $q, $window) {
var service = {};
service.sharedValue;
return service;
}
});
page1.controller.js
define(function () {
var coreModule = angular.module('coreModule');
coreModule.controller('Page1Controller', ['$scope', "CommonService", function ($scope, CommonService) {
// Q2: common service
$scope.commonService = CommonService;
}]);
});
Now When I am running my app, it throws me below error:
Error: [$injector:unpr] Unknown provider: CommonServiceProvider <- CommonService <- Page1Controller
any inputs?
Your core module should have empty dependencies injected
var coreModule = angular.module('coreModule',[]);
Also in page1. controller you dont have to declare the module again, you can just use
angular.module('coreModule')
.controller('Page1Controller', ['$scope', "CommonService", function ($scope, CommonService) {
Define config
Define the service
Define the controller, inject the service, use the dependency in function declaration etc. As you would know, both are needed, after all you need the those handles, else what's the point in injecting.
Define a module, define module dependencies. NOTE that the service has to be defined before controller. If you reverse the order, you will get an error, probably that's what is happening here. Without full code, I can't tell.
bootstrap angular.
Finally working plunkr: http://plnkr.co/edit/CE9enkgW3KASx8pf5vdb?p=preview
define('config',[],function(){
function config($routeProvider) {
$routeProvider.when('/home', {templateUrl: 'tpl.home.html', controller: 'HomeController'})
.otherwise({redirectTo: '/home'});
}
config.$inject=['$routeProvider'];
return config;
});
define('dataSvc',[], function(app){
function factoryFunc ($q, $timeout){
var svc = {getData: getData};
return svc;
function getData() {
console.log('executing function');
var d = $q.defer();
$timeout(function(){
console.log("firing timeout");
d.resolve({name:"test", data:[1, 2, 3, 4]});
}, 750);
return d.promise;
}
}
factoryFunc.$inject=['$q', '$timeout'];
return factoryFunc;
});
define('HomeController',[], function() {
function HomeController($scope, dataSvc) {
$scope.name = "Mahesh";
dataSvc.getData().then(function(result){
$scope.data=result;
console.log($scope.data);
});
}
HomeController.$inject=['$scope','dataSvc'];
return HomeController;
});
define('coreModule', ['config', 'dataSvc', 'HomeController']
, function(config, dataSvc, HomeController){
var app = angular.module('app', ['ngRoute','ngResource']);
app.config(config);
app.factory('dataSvc',dataSvc);
app.controller('HomeController', HomeController);
});
require(['coreModule'],
function() {
angular.bootstrap(document, ['app']);
}
);
Refer also,
https://www.sitepoint.com/using-requirejs-angularjs-applications/
http://beletsky.net/2013/11/using-angular-dot-js-with-require-dot-js.html
I want to wait for an http response before exiting angular controller. I have written the following code. But id doesn't work as the controller still exits before the http call is returned. Can anyone help me out to fix this? Thanks in advance.
var app = angular.module('app', []);
app.factory('MyService', function ($http) {
return $http.get('/api/endpoint').then(function(res){
return res.data;
});
});
app.controller('MyController', ['$scope', '$http', 'MyService', function($scope, $http, MyService){
MyService.then(function(data){
$scope.myVarialbe = data;
})
}]);
I would write this as below.
'use strict';
(function () {
function MyService($http) {
function getService() {
var url = yourURL;
return $http({ method: 'GET', cache: false, url: url });
}
return {
getService: getService
};
}
angular.module('app')
.factory('MyService', MyService);
}());
controller code:
MyService.getService().then(function(response) {
});
You can use like this factory just return request response promise and in controller use .then on returned promise.
var app = angular.module('app', []);
app.factory('MyService', ['$http',function($http) {
return {
getData: function() {
return $http.get('/api/endpoint');
}
};
}]);
app.controller('MyController', ['$scope', '$http', 'MyService', function($scope, $http, MyService){
MyService.getData().then(function(response){
$scope.myVarialbe = response.data;
});
}]);
Use $q is better.
Eg:
app.factory('MyService', ['$http', '$q', function($http, $q) {
return {
getData: function() {
var deferred = $q.defer();
$http.get('/api/endpoint')
.then( function(resp) {
deferred.resolve( resp.data );
});
return deferred.promise;
}
};
}]);
app.controller('MyController', ['$scope', 'MyService',function($scope, MyService){
MyService.getData().then(function(data){
$scope.myVarialbe = data;
})
}]);
Created a factory 'resInterceptor' and in that i am using functions(requestInterceptor,responseInterceptor) that is defined outside of factory. And it is giving error '$q is not defined' inside the function. But i want to do like this way only. Please suggest how to access $q inside requestInterceptor and responseInterceptor.
angular.module('resModule', ['ngResource', 'ngCookies'])
.factory('resInterceptor', ['$rootScope', '$q', '$location', resInterceptor]);
function resInterceptor($rootScope, $q, $location) {
return {
request: requestInterceptor,
response: responseInterceptor,
};
}
function requestInterceptor(config) {
return config || $q.when(config); //$q is not defined
}
function responseInterceptor(response) {
return response || $q.when(response);
}
In order for this to work, you need to pass $q along explicitly and make requestInterceptor return your actual callback function:
function resInterceptor($rootScope, $q, $location) {
return {
request: requestInterceptor($q),
..
};
}
function requestInterceptor($q) {
return function (config) {
return config || $q.when(config);
};
}
Of course, this would be less complicated if you simply inlined the functions into the same scope where $q is defined in the first place.
angular.module('resModule', ['ngResource', 'ngCookies'])
.factory('resInterceptor', ['$rootScope', '$q', '$location', resInterceptor]);
function resInterceptor($rootScope, $q, $location) {
return {
request: requestInterceptor,
response: responseInterceptor,
};
function requestInterceptor(config) {
return config || $q.when(config); //$q is defined :)
}
function responseInterceptor(response) {
return response || $q.when(response);
}
}