nb en en da en en sv sv da tr fr mg en en en da da en en en sv fr de de fr fr fr sv en en en en en nl es en en en kn da da en en en sv fr de de fr fr fr sv en fr en ja fr en en en en nl es en en en en sv en kn kn da en en en sv fr de de fr fr fr sv en fr en ja fr de fr es nb fr de en en en en ru en hbs_lat en es en eo en en en en ceb en es kn kn da da ar da en sv fr de de fr fr fr sv en da en en en en da en en en en da da en en en en da en en en en da da da en fr en sv fr de en fr sv ca nb en en en sv fr de en fr nb ca da en en en sv fr de de fr fr fr sv en fr en ja fr de fr es nb fr de en en en en en en nl es en en en en en en sl en it en kn kn da da en da de da en ko en sv fr de de fr fr fr sv en ceb ko ko en hbs_lat it lt en kn kn da en en en sv fr de de fr it en bg vi en lt da en da en en da da sv da nb nb en da da da da en nl da sv da en
Angular 6 http: Kommunikation med api – NerdGirl
Forbud fører sjældent noget godt med sig
(Last Updated On: 25. juli 2018)
Dette er den nye service og jeg har derudover importeret Angular’s indbyggede http klient og føjet en ny instans til constructor funktionen:
constructor(private http: HttpClient) { }
Der findes en hjemmeside med eksempeldata, som kan benyttes i undervisningssituationer o.lign. Den hedder jsonplaceholder.typicode.com og den vil jeg bruge her også:
Nu tilføjer vi nemlig en ny funktion i vores service modul, der henter data på nogle brugere:
import { Injectable } from '@angular/core'; import { HttpClient } from '@angular/common/http'; @Injectable({ providedIn: 'root' }) eksport class ApiComService { constructor(private http: HttpClient) { } getUsers() { return this.http.get('http://jsonplaceholder.typicode.com/users'); } }
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
eksport class ApiComService {
constructor(private http: HttpClient) { }
Voila! Det var det… nu kan vi så bruge den nye service i et komponent der skal præsentere disse data:
import { Component, OnInit } from '@angular/core'; import { ApiCom } from '../_service/api-com.service'; import { Observable } from 'rxjs'; @Component({ selector: 'et-komponent', templateUrl: './et-komponent.component.html', styleUrls: ['./et-komponent.component.scss'] }) eksport class EtKomponentComponent implements OnInit { users$: Object; constructor(private data: ApiComService) { } ngOnInit() { this.data.getUsers().subscribe( data => this.users$ = data ) } }
import { Component, OnInit } from '@angular/core';
import { ApiCom } from '../_service/api-com.service';
import { Observable } from 'rxjs';
eksport class EtKomponentComponent implements OnInit {
constructor(private data: ApiComService) { }
data => this.users$ = data
Bemærk at vi importerer vores egen service og derudover Observable fra rxjs. Sidstnævnte gennemgås ikke i detaljer her, men kort sagt er det et modul der vil indeholde de data vi henter via vores api service. Vi har også erklæret et users$ object og placeret hentningen af data i ngOnInit. Det betyder at så snart EtKomponent bliver aktiveret, hentes data.
I EtKomponent‘s html fil, kan man nu præsentere disse data:
Brugere          Navn: {{user.name}}  Email: {{user.email}}
Funktionen *ngFor itererer over alle elementer i users$ og dermed udskrives en hele listen.
Husk at føje din ApiCom service til app.module.ts:
import { ApiComService} from './_service/api-com.service';
import { ApiComService} from './_service/api-com.service';
… og i samme fil, skal den også føjes til providers:
dev, test, prod… api adressen er forskellig
Du har sikkert bemærket filerne ~/mitProject/environment.ts og environment.prod.ts. Her angiver du de værdier der differentierer mellem de forskellige miljøer (typisk udvikling, test og produktion). I mit projekt skal jeg distingvere mellem test og produktion.
Når du kører ng serve -o bruger Angular environment.ts:
eksport const environment = { production:false, apiUrl:"/api/" };
eksport const environment = {
…og ved ng serve -o --prod bruger Angular environment.prod.ts:
eksport const environment = { production:true, apiUrl:"https://api.eksempel.com" };
eksport const environment = {
Nu kan du importere environment i din api service som dermed har adgang til den url der skal benyttes i et givent miljø:
import { Injectable } from '@angular/core'; import { HttpClient } from '@angular/common/http'; import { environment } from '../../environments/environment'; //<= Her importeres environment @Injectable({ providedIn: 'root' }) eksport class ApiComService { constructor(private http: HttpClient) { } private _edApiUrl = environment.apiUrl; //<= Bemærk her hentes api adressen edPost(jsonParams) { console.log("Fetching data from "+this._edApiUrl+" with te following params:"); console.log(jsonParams); return this.http.post(this._edApiUrl,jsonParams); } }
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { environment } from '../../environments/environment'; //<= Her importeres environment
eksport class ApiComService {
constructor(private http: HttpClient) { }
private _edApiUrl = environment.apiUrl; //<= Bemærk her hentes api adressen
console.log("Fetching data from "+this._edApiUrl+" with te following params:");
Så langt så godt…. men vi kaster lige et blik på environment.ts igen. Her har vi i apiUrl blot angivet en relativ url i stedet for en absolut.  Her står nemlig blot /api. Det er der en forklaring på:
Hvis du udvikler på en server og har både front- og backend under samme domæne, kan du blot angive adressen på dit test-domæne i environment.ts. Men hvis du, ligesom jeg, udvikler din frontend på localhost og din backend ligger på en server, får du hurtigt en CORS udfordring… Det kommer ofte til udtryk ved denne fejl:
Failed to load ‘https://test.eksempel.com’: No ‘Access-Control-Allow-Origin’ header is present on te requested resource. Origin ‘http://localhost:4200’ is therefore not allowed access.
Det løser vi i følgende afsnit:
For at undgå en CORS fejl når du udvikler lokalt og ønsker at benytte en ekstern ressource, kan du konfigurere en proxy. Du opretter ganske enkelt filen ~mitProjekt/proxy.conf.json:
{ "/api": { "target": "https://test-api.eksempel.com", "secure": false, "pathRewrite": { "^/api": "" }, "changeOrigin": true } }
… og føjer den til angular.json:
"serve": { "builder": "@angular-devkit/build-angular:dev-server", "options": { "browserTarget": "edApp:build", "proxyConfig": "proxy.conf.json" //<= indsæt her },
"proxyConfig": "proxy.conf.json" //<= indsæt her
Fremover når du benytter ng serve vil Angular medtage dine proxy indstillinger og i kulissen dirigere alle forespørgsler til /api videre til https://test-api.eksempel.com … Din browser tror at forespørgslen går til localhost:4200/api og du undgår dermed CORS fejl 🙂
Posted in Webudvikling Tagged angular 6, api, cors, environment.ts, http, proxy, service
Angular 6 navigering: Responsive menu – en sidebar
Angular 6 pwa: Progressive Web App
I gang med Angular 13 på Linux
Brug af grep kommandoen
Installer Asbru Connection Manager på Fedora
Installer DBeaver på Fedora
Node Package Manager (npm)
Linux: Afvikle en kommando som en anden bruger
MariaDB: Slå generel log til midlertidigt
Udskift nouveau driver med NVIDIA på Fedora 33 – og fortryd
Skab overblik over dine DMARC rapporter
Kategorier Vælg kategori Aftensmad Akrylmaling Bagværk Computer Dessert Fotografi Generelt Grød Hakket oksekød Hobby Hvidkål Ikke kategoriseret Internet IT Krop og sind PHP Pizza Politik Samfund Server Tips & Tricks Vegansk Webudvikling
Arkiver Vælg måned august 2022 april 2022 marts 2022 oktober 2021 maj 2021 marts 2021 februar 2021 januar 2021 december 2020 november 2020 oktober 2020 august 2020 juli 2020 juni 2020 marts 2020 januar 2020 december 2019 november 2019 oktober 2019 august 2019 juni 2019 april 2019 februar 2019 december 2018 oktober 2018 september 2018 juli 2018 juni 2018 maj 2018 april 2018 februar 2018 januar 2018 december 2017 oktober 2017 september 2017 august 2017 juli 2017 juni 2017 maj 2017 april 2017 januar 2017 december 2016 november 2016 oktober 2016 september 2016 januar 2016 december 2015 november 2015 oktober 2015 september 2015
Proudly powered by WordPress | Theme: chichi by xtianmark.