Check out the full series of Questions Management tutorial here.
We have built the API Gateway for Questions Management application, now is the time to edit the Frontend so that it only calls to the Microservice system of this application through the API Gateway.
There are 3 classes in the Frontend will call the API Category Service, API Question Service, API Option Service are CategoriesService, OptionsService, and QuestionsService. They are all located in the src/app/services directory. We will need to edit the context path (adding “/qm”) which will call the services in the methods of these classes as follows:
CategoriesService:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
... findAllCategories(): Promise<Category[]> { return this.http.get<Category[]>("/qm/category/all").toPromise(); } addCategory(category: Category) { return this.http.post("/qm/category/add", JSON.stringify(category), { headers: this.headers }).toPromise(); } updateCategory(category: Category) { return this.http.put("/qm/category/" + category.id, JSON.stringify(category), { headers: this.headers }).toPromise(); } deleteCategory(id: string) { return this.http.delete("/qm/category/" + id).toPromise(); } ... |
OptionsService:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
... addOption(option: Option) { return this.http.post("/qm/option/add", JSON.stringify(option), { headers: this.headers }).toPromise(); } updateOption(option: Option) { return this.http.put("/qm/option/" + option.id, JSON.stringify(option), { headers: this.headers }).toPromise(); } deleteOption(id: string) { return this.http.delete("/qm/option/" + id).toPromise(); } ... |
QuestionsService:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
... findAllQuestions(): Promise<CompositeQuestion[]> { return this.http.get<CompositeQuestion[]>("/qm/question/all").toPromise(); } findQuestionById(id: String): Promise<CompositeQuestion> { return this.http.get<CompositeQuestion>("/qm/question/" + id).toPromise(); } addQuestion(question: Question): Promise<CompositeQuestion> { return this.http.post<CompositeQuestion>("/qm/question/add", JSON.stringify(question), { headers: this.headers }).toPromise(); } updateQuestion(question: Question) { return this.http.put("/qm/question/" + question.id, JSON.stringify(question), { headers: this.headers }).toPromise(); } deleteQuestion(id: string) { return this.http.delete("/qm/question/" + id).toPromise(); } ... |
Next, we need to modify the proxy.config.json file so that it only calls the API Gateway as follows:
|
1 2 3 4 5 6 7 |
{ "/qm/*": { "target": "http://localhost:8380", "secure": false, "logLevel": "debug" } } |
Now, if you start using Questions Management application, you will see it work normally.
