Q) Can anyone explain how to achieve this with a clear example?
I've done the Angular2 with TypeScript tutorial here:
https://angular.io/docs/js/latest/quickstart.html
I want to replace the mock-heroes.ts and get the hero.service.ts to fetch real http data. E.g. from here:
http://jsonplaceholder.typicode.com/users
But Google haven't written the next part of the tutorial.
Help would be greatly appreciated!
You need to leverage the Http class. After injecting it, you can use it to get data asynchronously:
#Component({
template: `
<ul>
<li *ngFor="#user of users | async">{{user.name}}</lu>
</ul>
`
})
export class AppComponent {
constructor(private http:Http) {
this.users = this.http.get(
'http://jsonplaceholder.typicode.com/users').map(res=>res.json());
}
}
Angular2 leverages observables at this level. You can use the async pipe or subscribe a callback...
Don't forget to set the HTTP_PROVIDERS when bootstraping your application:
import {bootstrap} from 'angular2/platform/browser';
import {HTTP_PROVIDERS} from 'angular2/http';
import {AppComponent} from './app.component';
bootstrap(AppComponent, [ HTTP_PROVIDERS ]);
Like Thierry explained, you need to bootstrap the HTTP_PROVIDERS as well as import the HTTP class on the component/service where you will do the http call. Remember to include the http and rxjs javascripts in your index.html.
The following service replaces the mock Heroes data with your json.
import {Http} from 'angular2/http';
import {Injectable} from 'angular2/core';
import 'rxjs/Rx';
#Injectable()
export class HeroService {
private _url = 'http://jsonplaceholder.typicode.com/users';
constructor(private http: Http){}
getHeroes() {
return this.http.get(this._url)
.map(res => <any[]> res.json())
.catch(function(err) {console.log("err")})
}
}
To better illustrate what I mean, I made a quick plunker replacing the Heroes Mock data with the http.get request using the Json you provided. Hopefully this will be of some use to you.
Related
I am trying to implement a http request in ionic framework 3.1 application. I have created a provider named apidata using ionic g provider apidata command after which i created the following function in it that calls the api and logs the data returned by it on console.
getremotedata(){
console.log(this.http.get('https://reverie.oiamigotech.com/wp-json/wc/v2/products/?consumer_key=ck_xyz&consumer_secret=cs_xyz'));
}
and have also imported the http package in the header as import { Http } from '#angular/http';
after which I updated the app.module.ts file to import the provider as import { ApidataProvider } from '../providers/apidata/apidata'; and also added the same to the provider list as providers: [
StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler},
ApidataProvider
]
now when i try to call the same from the home page after importing the package and using the following function and constructor definition
constructor(public navCtrl: NavController,public ApidataService: ApidataProvider) {
}
ionViewDidLoad(){
this.ApidataService.getremotedata();
}
It generated the following error Uncaught (in promise): Error: No provider for Http!
referred to https://www.youtube.com/watch?v=vuc4dp0qHSc for instructions about integration.
I am new to ionic and am unable to find and debug the issue. Any suggestions are greatly welcomed.
import HttpModule and add it in app.module.ts page under imports like this,
import { HttpModule } from '#angular/http';
imports: [
BrowserModule,
HttpModule,
IonicModule.forRoot(MyApp)
]
remove any other http imports in your app.module.ts page and that should work
I defined a service in IONIC like this (file reddit.service.ts):
import {Injectable} from '#angular/core';
import {Http} from '#angular/http';
import 'rxjs/Rx';
#Injectable()
export class RedditService{
http:any;
baseUrl: String;
counstructor(http:Http){
this.http = http;
this.baseUrl = 'https://www.reddit.com/r';
}
getPosts(category, limit){
return this.http.get(this.baseUrl+'/'+category+'/top.json?limit='+limit).map(res => res.json());
}
}
I am calling this service like this (file reddits.ts):
getPosts(category, limit){
this.redditService.getPosts(category, limit).subscribe(response => {console.log(response);
});
The error Message I am getting is:
Error: Uncaught (in promise): TypeError: Cannot read property 'get' of undefined
TypeError: Cannot read property 'get' of undefined
at RedditService.getPosts (reddit.service.ts:16)
Why I am getting this error? What is wrong?
You have a typo:
counstructor(http:Http)
should be:
constructor(http:Http)
and usually we just inject providers into constructor like...
#Injectable()
export class RedditService{
baseUrl: String;
constructor(private http:Http){
this.baseUrl = 'https://www.reddit.com/r';
}
}
UPDATE:
As the HttpModule used to be included in the IonicModule before, it no longer is, and therefore the HttpModule needs to be imported in the NgModule and set in the imports array.
It seems like you have http service haven't injected properly inside Service constructor. Also make sure you have imported Http & Injectable injector correctly.
#Injectable()
export class RedditService {
//make sure you have below dependency inject with private access specifier.
//since we mentioned it private, http will be available in component context
constructor(private http: Http) { }
getPosts(category, limit){
return this.http.get(this.baseUrl+'/'+category+'/top.json?limit='+limit).map(res => res.json());
}
}
Additionally please add HttpModule in imports of your AppModule to make http API working.
I have a service that uses Http:
import { Injectable } from '#angular/core';
import { Inject } from '#angular/core';
import { Http, Headers, Response } from '#angular/http';
#Injectable()
export class OrdersService {
constructor(#Inject(Http) private http:Http) {}
...
}
And a component that uses it
import { Component } from '#angular/core';
import { FormBuilder, Validators } from '#angular/common';
import { HTTP_PROVIDERS } from '#angular/http';
import { Router} from '#angular/router';
import { OrdersService } from '../services/orders.service'
#Component({
selector: 'login',
templateUrl: './login.component.html',
providers: [
HTTP_PROVIDERS, //{ provide: Http, useClass: Http }
AuthService, AuthStore,
OrdersService
]
})
export class LoginComponent {
constructor(private authService: AuthService, private ordersService: OrdersService){}
....
}
This works. I have some commented out text { provide: Http, useClass: Http }. I want to provide my own class here that extends Http, but still has all the same dependancies. The first step I'm taking here is to explicitly use Http.
As soon as I un-comment this text (and add an http import), everything breaks. I get the error "No provider for ConnectionBackend". It appears that HTTP_PROVIDERS has just stopped working as a provider.
How do I make this explicit use of Http work?
How do I use my own CustomHttp and use the providers in HTTP_PROVIDERS?
From Angular 2.1.1 and above syntax for provide option was changed after angular2 team introduce new modules concept. Below you will find correct syntax how to add your own custom provider for Http in your app.module.ts
export function httpFactory(backend: XHRBackend, defaultOptions: RequestOptions) {
return new CustomHttp(backend, defaultOptions);
}
...
providers: [
{provide: Http,
useFactory: httpFactory,
deps: [XHRBackend, RequestOptions]
}
]
You can also verify the angular2 documentation here: https://angular.io/docs/ts/latest/api/http/index/XHRBackend-class.html
If you want to implement you own CustomHttp class I will recommend you to read Thierry Templier article when step by step he is introducing how to do that.
Implementing CustomHttp for angular2 this is very helpful article which is describing how to extend to intercept request calls and add custom handling errors.
When using your own CustomHttp, you don't need to use HTTP_PROVIDERS, you need to do the following (in your app.module.ts if you are using RC5 or in your main.ts if you are using RC4):
providers: [
ConnectionBackend,
provide(
Http, {
useFactory: (
backend: XHRBackend,
defaultOptions: RequestOptions) =>
new CustomHttp(backend, defaultOptions),
deps: [XHRBackend, RequestOptions]
}),
]
I had the same problem, this fixed it for me.
Edit:
You don't need to import HTTP_PROVIDERS if you are using RC5 because you will import HttpModule, but I don't exactly remember if you need HTTP_PROVIDERS in RC4. You will probably need it.
If you don't want to change the implementations of XHRBackend and RequestOptions you can do it simplier like:
providers: [
{provide: Http, useClass: MyCustomHttp}
]
In Angular1 the problem can be solved by configuring $http-provider. Like:
app.config(function($httpProvider) {
$httpProvider.defaults.xsrfCookieName = 'csrftoken';
$httpProvider.defaults.xsrfHeaderName = 'X-CSRFToken';
});
What is a good practice to do the same in Angular2?
In Angular2 to work with http requests we need to use class Http. Of course that's not a good practice to add CSRF-line to each call of post-function.
I guess in Angular2 I should create own class that inherits Angular2's Http class and redefine the post-function. Is it the right approach or is there a more elegant method?
Now that Angular 2 is released the following seems to be the correct way of doing this, by using CookieXSRFStrategy.
I've configured my application to have a core module but you can do the same in your main application module instead:
import { ModuleWithProviders, NgModule, Optional, SkipSelf } from '#angular/core';
import { CommonModule } from '#angular/common';
import { HttpModule, XSRFStrategy, CookieXSRFStrategy } from '#angular/http';
#NgModule({
imports: [
CommonModule,
HttpModule
],
declarations: [ ],
exports: [ ],
providers: [
{
provide: XSRFStrategy,
useValue: new CookieXSRFStrategy('csrftoken', 'X-CSRFToken')
}
]
})
export class CoreModule {
},
Solution for Angular2 is not as easy as for angular1.
You need:
Pick out csrftoken cookie value.
Add this value to request headers with name X-CSRFToken.
I offer this snippet:
import {Injectable, provide} from 'angular2/core';
import {BaseRequestOptions, RequestOptions} from 'angular2/http'
#Injectable()
export class ExRequestOptions extends BaseRequestOptions {
constructor() {
super();
this.headers.append('X-CSRFToken', this.getCookie('csrftoken'));
}
getCookie(name) {
let value = "; " + document.cookie;
let parts = value.split("; " + name + "=");
if (parts.length == 2)
return parts.pop().split(";").shift();
}
}
export var app = bootstrap(EnviromentComponent, [
HTTP_PROVIDERS,
provide(RequestOptions, {useClass: ExRequestOptions})
]);
Victor K's answer is perfectly valid however as of angular 2.0.0-rc.2, a preferred approach would be to use CookieXSRFStrategy as below,
bootstrap(AngularApp, [
HTTP_PROVIDERS,
provide(XSRFStrategy, {useValue: new CookieXSRFStrategy('csrftoken', 'X-CSRFToken')})
]);
For later versions of angular you cannot call functions in decorators. You have to use a factory provider:
export function xsrfFactory() {
return new CookieXSRFStrategy('_csrf', 'XSRF-TOKEN');
}
And then use the factory:
providers: [
{
provide: XSRFStrategy,
useFactory : xsrfFactory
}],
Otherwise the compiler will tell you off.
What I have also seen is that ng build --watch will not report this error until you kick it off again.
I struggled with this for a few days. The advice in this article is good, but as of August, 2017 is deprecated (https://github.com/angular/angular/pull/18906). The angular2 recommended approach is simple, but has a caveat.
The recommend approach is to use HttpClientXsrfModule and to configure it to recognize django's default csrf protection. According to the django docs, django will send the cookie csrftoken and expect the client to return the header X-CSRFToken. In angular2, add the following to your app.module.ts
import { HttpClientModule, HttpClientXsrfModule } from '#angular/common/http';
#NgModule({
imports: [
HttpClientModule,
HttpClientXsrfModule.withOptions({
cookieName: 'csrftoken',
headerName: 'X-CSRFToken',
})
], ...
The caveat is that angular2's XSRF Protection only applies to mutating requests:
By default, an interceptor sends this cookie [header] on all mutating requests
(POST, etc.) to relative URLs but not on GET/HEAD requests or on
requests with an absolute URL.
If you need to support an API that performs mutation on GET/HEAD, you will need to create your own custom interceptor. You can find an example and a discussion of the issue here.
Victor K had the solution, I'll just add this comment here as to what I did:
I created the component "ExRequestOptions" as Victor K said, but I also added a method "appendHeaders" to that component:
appendHeaders(headername: string, headervalue: string) {
this.headers.append(headername, headervalue);
}
Then I had this in my main.ts:
import {bootstrap} from 'angular2/platform/browser'
import {AppComponent} from './app.component'
import {HTTP_PROVIDERS, RequestOptions} from 'angular2/http';
import 'rxjs/Rx';
import {ExRequestOptions} from './transportBoxes/exRequestOptions';
import {provide} from 'angular2/core';
bootstrap(AppComponent,[ HTTP_PROVIDERS,
provide(RequestOptions, {useClass: ExRequestOptions})]);
I'm not sure the bootstrapping had any effect, so i also did this where
I would post data:
let options = new ExRequestOptions();
options.appendHeaders('Content-Type', 'application/json');
return this.http.post('.....URL', JSON.stringify(registration),
options)
Currently, I solve anything with custom headers using a wrapper service around the Http Service. You can add whatever header manually and inject additional services for storing/retrieving values. This strategy also works for JWTs, for example. Have a look at the code below, I hope it helps.
import {Injectable} from '#angular/core';
import {Http, Headers, RequestOptions} from '#angular/http';
#Injectable()
export class HttpService {
constructor(private http: Http) {
}
private get xsrfToken() {
// todo: some logic to retrieve the cookie here. we're in a service, so you can inject anything you'd like for this
return '';
}
get(url) {
return this.http.get(url, this.getRequestOptions())
.map(result => result.json())
.catch(error => error.json());
}
post(url, payload) {
return this.http.post(url, payload, this.getRequestOptions())
.map(result => result.json())
.catch(error => error.json());
}
private getRequestOptions() {
const headers = new Headers({'Content-Type': 'application/json', 'X-XSRF-TOKEN': this.xsrfToken});
return new RequestOptions({headers: headers});
}
}
I need to do a http request to a mail chimp subscription list via a component post
I've read the mail chimp documentation and couldnt find anything on this.
I also tried their mail chimp embedded form in an angular 2 html5 view but that doesnt work for some weird reason.
So I've resulted to doing a http request to the subscribe list instead and I'm having trouble getting that working.
I'm using typescript, angular2 and mail chimp
This is my code so far:
subscribe = () => {
var url = "https://mysubscriptionlist.us10.list-manage.com/subscribe/post?u=b0c935d6f51c1f7aaf1edd8ff&id=9d740459d3&subscribe=Subscribe&EMAIL=" + this.email;
this.jsonp.request(url).subscribe(response => {
console.log(response);
});
}
This is my current console log error in chrome:
Uncaught SyntaxError: Unexpected token <
I finally found out how to fix your issue. You need to use the Jsonp support of Angular2.
Your address supports Jsonp by adding a c query parameter to your URL and switching https://mysubscriptionlist.us10.list-manage.com/subscribe/post by https://mysubscriptionlist.us10.list-manage.com/subscribe/post-json. You need to put the JSONP_CALLBACK value in it (see this issue: https://github.com/angular/angular/issues/5613).
In this case, you will have the following response payload:
JSONP_CALLBACK (
{
"result": "success",
"msg": "Almost finished... We need to confirm your email address. To complete the subscription process, please click the link in the email we just sent you."
}
)
After having registered JSONP_PROVIDERS when calling the bootstrap function:
import {bootstrap} from 'angular2/platform/browser'
import {JSONP_PROVIDERS} from 'angular2/http'
import {AppComponent} from './app.component'
bootstrap(AppComponent, [ JSONP_PROVIDERS ]);
You can then execute your request using an instance of the Jsonp class you injected from constructor:
import {Component} from 'angular2/core';
import {Jsonp} from 'angular2/http';
#Component({
selector: 'my-app',
template: `
<div>
Result: {{result | json}}
</div>
`
})
export class AppComponent {
constructor(jsonp:Jsonp) {
var url = 'https://mysubscriptionlist.us10.list-manage.com/subscribe/post-json?u=(...)&subscribe=Subscribe&EMAIL=my#email.com&c=JSONP_CALLBACK';
jsonp.request(url, { method: 'Get' })
.subscribe((res) => {
this.result = res.json()
});
}
}
See this plunkr for a working sample: http://plnkr.co/edit/dqreqBL6kyNkR8Z2wgGR?p=preview