I have plan to implemented the Err handling service globally for my existing application. I am not send the error code from server. so i have plan to implement the Error code in angular by using response Error codes, need to show the custom bootstrap alert to the user.
Implementation 1:
LoginService.AfterLogin(uname, encodeURIComponent(Password))
.then(function (response) {
}, function (response) {
console.log(response + "response from the login");
alert(response.Message);
});
var LoginService = function ($http, $q, configAPI) {
this.AfterLogin = function (userName, passWord) {
var result = $q.defer();
$http({
method: 'POST',
url: // api call
headers: { 'Content-Type': 'application/json' }
})
.success(function (response) {
result.resolve(response);
})
.error(function (response) {
result.reject(response);
});
return result.promise;
}
This is not catching Error status.it shows whatever server errors comes.
So i have plan to catch the error code with angular .
Implementation 2:
var configFunction = function ($stateProvider, $httpProvider, $urlRouterProvider, $locationProvider) {
var interceptor = function ($q, alertsManager,$rootScope,$timeout) {
return {
request: function (config) {
console.log(config);
return config;
},
response: function (result) {
console.log('repos');
return result;
},
responseError: function (rejection) {
if (rejection.status == 500)
{
alert('Bad Request Processed');
$rootScope.showError = true;
$rootScope.error= 'error';
$rootScope.errors= 'Please contact administrators';
$timeout(function () {
$rootScope.doFade = true;
}, 7500);
}
console.log(rejection.status);
return $q.reject(rejection);
}
}
};
$httpProvider.interceptors.push(interceptor);
HTml part like this:
Simple Angular + Bootstrap Error Messages
Fake an Error
Error: {{errorMessage}}
problems: Its working properly. But the default alert Bad request Processed is getting . Bootstrap alert is not displaying.
Implementation:
i am not specifying controller in the login page. which means there is no controller in any page.
So i am using rootscope to display bootstrap alert. its not displaying.
Queries:
- Is there any drawbacks for using $httpProvider.
Whats the differencebetween $httpProvider and decorator for global exception handling.
$provide.decorator("$exceptionHandler", function($delegate, $injector){ return function(exception, cause){ var $rootScope = $injector.get("$rootScope"); $rootScope.addError({message:"Exception", reason:exception}); $delegate(exception, cause); }; });
So i went to scott allen method.
http://odetocode.com/blogs/scott/archive/2014/04/21/better-error-handling-in-angularjs.aspx
implementation 3:
Specify the $provide decoartor in config.
$provide.decorator("$exceptionHandler", function($delegate, $injector){
return function(exception, cause){
var $rootScope = $injector.get("$rootScope");
$rootScope.addError({message:"Exception", reason:exception});
$delegate(exception, cause);
};
});
CedeRightWebApp.factory("errors", function ($rootScope) {
debugger;
return {
catch: function (message) {
return function (reason) {
$rootScope.addError({ message: message, reason: reason })
};
}
};
});
LoginService.AfterLogin(uname, encodeURIComponent(Password))
.then(function (response) {
}, function (response) {
console.log(response + "response from the login");
alert(response.Message);
}).catch(errors.catch("Could not complete work!"));
Getting Error:
$rootScope.addError is not a function.
