使用JSON服务器运行Angular 4应用 [英] Running Angular 4 app using a JSON server
问题描述
我正在尝试运行Angular 4应用程序,同时尝试使用已对其进行编码的JSON服务器.我遇到的问题是,我不了解在端口4200上运行的Angular 4应用程序如何同时与端口3000上的JSON服务器通信.该应用程序是CRUD的一个示例,但是当我尝试添加某些内容时,什么也不会发布.
I'm trying to run an Angular 4 app while trying to use a JSON server that it has been coded with. The problem I'm having is that I don't understand how an Angular 4 app running on port 4200 can communicate with the JSON server on port 3000 at the same time. The app is an example of CRUD but when I try to add something, nothing gets posted.
这是我的article.service.ts:
This is my article.service.ts:
@Injectable()
export class ArticleService {
//URL for CRUD operations
articleUrl = "http://localhost:3000/articles";
//Create constructor to get Http instance
constructor(private http:Http) {
}
//Fetch all articles
getAllArticles(): Observable<Article[]> {
return this.http.get(this.articleUrl)
.map(this.extractData)
.catch(this.handleError);
}
//Create article
createArticle(article: Article):Observable<number> {
let cpHeaders = new Headers({ 'Content-Type': 'application/json' });
let options = new RequestOptions({ headers: cpHeaders });
return this.http.post(this.articleUrl, article, options)
.map(success => success.status)
.catch(this.handleError);
}
//Fetch article by id
getArticleById(articleId: string): Observable<Article> {
let cpHeaders = new Headers({ 'Content-Type': 'application/json' });
let options = new RequestOptions({ headers: cpHeaders });
console.log(this.articleUrl +"/"+ articleId);
return this.http.get(this.articleUrl +"/"+ articleId)
.map(this.extractData)
.catch(this.handleError);
}
//Update article
updateArticle(article: Article):Observable<number> {
let cpHeaders = new Headers({ 'Content-Type': 'application/json' });
let options = new RequestOptions({ headers: cpHeaders });
return this.http.put(this.articleUrl +"/"+ article.id, article, options)
.map(success => success.status)
.catch(this.handleError);
}
//Delete article
deleteArticleById(articleId: string): Observable<number> {
let cpHeaders = new Headers({ 'Content-Type': 'application/json' });
let options = new RequestOptions({ headers: cpHeaders });
return this.http.delete(this.articleUrl +"/"+ articleId)
.map(success => success.status)
.catch(this.handleError);
}
private extractData(res: Response) {
let body = res.json();
return body;
}
private handleError (error: Response | any) {
console.error(error.message || error);
return Observable.throw(error.status);
}
}
这是我的db.json:
This is my db.json:
{
"articles": [
{
"id": 1,
"title": "Android AsyncTask Example",
"category": "Android"
}
]
}
推荐答案
我在端口5005上运行了后端服务,在4200上运行了应用程序,为了彼此交谈",我设置了proxy.config.json
文件,看起来像这样
I have backend service running on port 5005, and app running on 4200, in order to "talk" with each other I have set up proxy.config.json
file which looks like this
{
"/api/*":{
"target":"http://localhost:5005",
"secure": false,
"logLevel": "debug"
}
}
当我投放我的应用程序时,我会运行
ng serve -open --sourcemap=false --proxy-config proxy.config.json
命令.
and when I serve my app I run
ng serve -open --sourcemap=false --proxy-config proxy.config.json
command.
您也可以尝试执行类似的操作.
You can also try to do something like this.
这篇关于使用JSON服务器运行Angular 4应用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!