This talk discusses how AngularJS can be used to build an end-to-end Customer Manager application. It covers structuring code and files, working with events, XHR interceptors, plus more.
28. var wcDirectivesApp = angular.module('wc.directives', []);
//Empty factory to hook into $httpProvider.interceptors
//Directive will hookup request, response, and responseError
interceptors
wcDirectivesApp.factory('httpInterceptor', function () {
return {};
});
//Hook httpInterceptor factory into the $httpProvider interceptors
so that we can monitor XHR calls
wcDirectivesApp.config(['$httpProvider', function ($httpProvider) {
$httpProvider.interceptors.push('httpInterceptor');
}]);
29. function wireUpHttpInterceptor() {
httpInterceptor.request = function (config) {
processRequest();
return config || $q.when(config);
};
httpInterceptor.response = function (response) {
processResponse();
return response || $q.when(response);
};
httpInterceptor.responseError = function (rejection) {
processResponse();
return rejection || $q.when(rejection);
};
}
httpInterceptor injected
into Directive
<divclass="error-container"ng-show="signup_form.username.$dirty && signup_form.username.$invalid"><smallclass="error"ng-show="signup_form.username.$error.required">Please input a username</small><smallclass="error"ng-show="signup_form.username.$error.minlength">Your username is required to be at least 3 characters</small><smallclass="error"ng-show="signup_form.username.$error.maxlength">Your username cannot be longer than 20 characters</small><smallclass="error"ng-show="signup_form.username.$error.unique">That username is taken, please try another</small></div>