Angular common error handler

by Shuya Tsukamoto

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/angularjs-toaster/0.4.4/toaster.css">
<script src="http://code.angularjs.org/1.2.0/angular-animate.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angularjs-toaster/0.4.4/toaster.js"></script>
<script src="https://rawgit.com/AngularAgility/AngularAgility/master/dist/angular-agility.js"></script>
<div ng-app="myApp">
    <toaster-container toaster-options="{'time-out': 3000, 'close-button':true}"></toaster-container>
    <div class="container" ng-controller="myCtrl1">
        <button type="button" class="btn btn-danger" ng-click="errorRequest()">Error request</button>
        <button type="button" class="btn btn-success" ng-click="successRequest()">Success request</button>
    </div>
</div>

JavaScript

var myApp = angular.module("myApp", ["toaster"]);

myApp.controller("myCtrl1", function ($scope, $http, toaster) {
    $scope.errorRequest = function () {
        $http.get("/not_found_page_aaaaaa").success(function (data) {
            toaster.pop("success", "title", data);
        });
    };
    $scope.successRequest = function () {
        $http.get("/").success(function (data) {
            toaster.pop("success", "title", data);
        });
    };
});

myApp.factory("httpErrorInterceptor", ["$q", "toaster", function ($q, toaster) {
    var myInterceptor = {
        "responseError": function (rejection) {
            toaster.pop("error", rejection.status, "エラーが発生しました");
            return $q.reject(rejection);
        }
    };
    return myInterceptor;
}]);

myApp.config(["$httpProvider", function ($httpProvider) {
    $httpProvider.interceptors.push("httpErrorInterceptor");
}]);