angular2-resource-and-ajax-interceptor
v2.1.3
Published
angular2-resource-and-ajax-interceptor is angular2 http service helper.
Downloads
9
Maintainers
Readme
angular2-resource and ajax interceptor
angular2-resource and ajax interceptor is service helper class. You can extends and enjoy like angular 1 resource feature
The sources for this package are in (https://github.com/rajan-g/angular2-resource.git) repo. Please file issues and pull requests against that repo.
Live Demo
Live Demo Site OR Live Demo Site
Install from npm
npm install angular2-resource-and-ajax-interceptor
Example file usage main.ts
import { bootstrap } from '@angular/platform-browser-dynamic';
import { HTTP_PROVIDERS } from '@angular/http';
import {AppComponent} from './app.component';
import {Resource} from './httpresource/resource';
import {AjaxInterceptor} from './httpresource/ajax-interceptor';
import {InterceptorConfig} from './interceptor-config';
bootstrap(AppComponent,[HTTP_PROVIDERS, Resource, AjaxInterceptor,InterceptorConfig])
resource extend by sampe-resetservice.ts
import {Injectable, Inject} from '@angular/core';
import {Resource} from './httpresource/resource';
import { Http, Headers, Response} from '@angular/http';
import {AjaxInterceptor} from './httpresource/ajax-interceptor';
@Injectable()
export class SampleRestService extends Resource {
// resource:Resource
constructor( @Inject(Http) http: Http, ajaxInterceptor:AjaxInterceptor) {
super(http,ajaxInterceptor);
this.config('/user/:id', {id:'@id'}, {
getList: {
method: 'get'
},
saveMyData:{
params: { id: '@id'},
url: 'customer/:id',
method: 'post',
header: {'contentType': 'application/json', 'custom-key':'sample value'}
}
});
}
};
ajax interceptor configuration interceptor-config.ts(note: if you don't like interceptor no need to use this files)
import {Injectable} from '@angular/core';
import {AjaxInterceptor} from './httpresource/ajax-interceptor';
@Injectable()
export class InterceptorConfig {
constructor() {
}
invoke(ajaxInterceptor: AjaxInterceptor) {
//invoke interceptor
ajaxInterceptor.config(this.onBeforRequest, this.onAfterResponse, this.onAfterResponseError);
}
onBeforRequest(requestCall:any) {
console.log('new header adde');
requestCall.headers.append('Accept', 'application/json');
requestCall.headers.append('Content-Type', 'application/json');
requestCall.headers.append('Authorization', 'Bearer ' + localStorage.getItem('token'));
return requestCall;
}
onAfterResponse(response) {
console.log('response', response);
}
onAfterResponseError(error) {
console.log('error', error);
}
}
finnaly app.component.ts
import {Component} from '@angular/core';
import {SampleRestService} from './sample-restservice';
import {InterceptorConfig} from './interceptor-config';
import {AjaxInterceptor} from './httpresource/ajax-interceptor';
@Component({
selector: 'my-app',
directives: [],
providers: [SampleRestService],
template: `sample rest service`
})
export class AppComponent {
constructor(private sampleRestService: SampleRestService, private interceptorConfig: InterceptorConfig, ajaxInterceptor:AjaxInterceptor) {
this.sampleRestOperations();
this.interceptorConfig.invoke(ajaxInterceptor);
}
sampleRestOperations() {
//default method
this.sampleRestService['save']({}, { id: 'sampledata' }).then((data) => {
console.log("Data", data);
}, (error) => {
console.log("Data", error);
});
//default method
this.sampleRestService['update']({'id': '12'}, { id: 'sampledata' }).then((data) => {
console.log("Data", data);
}, (error) => {
console.log("Data", error);
});
//default method
this.sampleRestService['get']({}).then((data) => {
console.log("Data", data);
}, (error) => {
console.log("Data", error);
});
//default method
this.sampleRestService['list']({}).then((data) => {
console.log("Data", data);
}, (error) => {
console.log("Data", error);
});
//custome method
this.sampleRestService['saveMyData']({'id': '12'}, { id: 'sampledata' }).then((data) => {
console.log("Data", data);
}, (error) => {
console.log("Data", error);
});
//custome method
this.sampleRestService['getList']({}, { id: 'sampledata' }).then((data) => {
console.log("Data", data);
}, (error) => {
console.log("Data", error);
});
}
}
For Test demo
- Download this module
- Run following command
npm install npm start