How can I integrate angular code with spring boot? How to call particular page of angular from controller?
I build angular project. pasted dist folder into the src/main/resources/static, now I am able to call index.html file from controller. But the problem is (localhost:4200/homePage?empId=1234) was starting page not able to call this page from controller.
code is below(Spring controller)
@RequestMapping("/homePage")
public String testMethod() {
return "/index.html";
}
and index.html is like this
<!doctype html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>TestApp</title>
<base href="/homePage">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--link rel="icon" type="image/x-icon" href="favicon.ico"-->
<link rel="stylesheet"
href="http://localhost:8080/homePage/styles.2e25b77c70b5269b3e1c.css">
</head>
<body>
<app-root></app-root>
<script type="text/javascript"
src="http://localhost:8080/homePage/runtime.ec2944dd8b20ec099bf3.js">
</script>
<script type="text/javascript"
src="http://localhost:8080/homePage/polyfills.b58e3c18bf0ef2973262.js">
</script>
<script type="text/javascript"
src="http://localhost:8080/homePage/main.b4ad8245c5085d925098.js">
</script>
</body>
</html
want to go this page (localhost:4200/homePage?empId=1234).
javascript java spring angular
edited Nov 21 '18 at 12:59
xyzWty
6513
asked Nov 21 '18 at 12:20
Anil Khatour
273
add a comment |
I build angular project. pasted dist folder into the src/main/resources/static, now I am able to call index.html file from controller. But the problem is (localhost:4200/homePage?empId=1234) was starting page not able to call this page from controller.
code is below(Spring controller)
@RequestMapping("/homePage")
public String testMethod() {
return "/index.html";
}
and index.html is like this
<!doctype html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>TestApp</title>
<base href="/homePage">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--link rel="icon" type="image/x-icon" href="favicon.ico"-->
<link rel="stylesheet"
href="http://localhost:8080/homePage/styles.2e25b77c70b5269b3e1c.css">
</head>
<body>
<app-root></app-root>
<script type="text/javascript"
src="http://localhost:8080/homePage/runtime.ec2944dd8b20ec099bf3.js">
</script>
<script type="text/javascript"
src="http://localhost:8080/homePage/polyfills.b58e3c18bf0ef2973262.js">
</script>
<script type="text/javascript"
src="http://localhost:8080/homePage/main.b4ad8245c5085d925098.js">
</script>
</body>
</html
want to go this page (localhost:4200/homePage?empId=1234).
javascript java spring angular
edited Nov 21 '18 at 12:59
xyzWty
6513
asked Nov 21 '18 at 12:20
Anil Khatour
273
You are doing correct thing by serving dist folder . Just implement Hash routing in angular side. So anything which is like : (localhost:4200/#/homePage?empId=1234 will be called from angular side where as URl like : (localhost:4200/homePage?empId=1234) will be called for API
– programoholic
Nov 21 '18 at 12:27
const routes: Routes = [ {path :'personCreate', component: PersonCreateComponent}, {path: 'personSearch', component: PersonSearchComponent}, {path: 'PersonUpdate', component: PersonUpdateComponent}, {path: 'serchTransfer', component: SearchTransferComponent}, {path: 'transferRequest/:personID', component: TransferRequestComponent}, {path: 'homePage', component: HomePageComponent} ]; @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] })
– Anil Khatour
Nov 21 '18 at 12:34
i already have routing in angular code
– Anil Khatour
Nov 21 '18 at 12:34
You don't have hashRouting enabled. Modify like : [RouterModule.forRoot(routes,{useHash: true })]
– programoholic
Nov 21 '18 at 12:37
add a comment |
I build angular project. pasted dist folder into the src/main/resources/static, now I am able to call index.html file from controller. But the problem is (localhost:4200/homePage?empId=1234) was starting page not able to call this page from controller.
code is below(Spring controller)
@RequestMapping("/homePage")
public String testMethod() {
return "/index.html";
}
and index.html is like this
<!doctype html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>TestApp</title>
<base href="/homePage">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--link rel="icon" type="image/x-icon" href="favicon.ico"-->
<link rel="stylesheet"
href="http://localhost:8080/homePage/styles.2e25b77c70b5269b3e1c.css">
</head>
<body>
<app-root></app-root>
<script type="text/javascript"
src="http://localhost:8080/homePage/runtime.ec2944dd8b20ec099bf3.js">
</script>
<script type="text/javascript"
src="http://localhost:8080/homePage/polyfills.b58e3c18bf0ef2973262.js">
</script>
<script type="text/javascript"
src="http://localhost:8080/homePage/main.b4ad8245c5085d925098.js">
</script>
</body>
</html
want to go this page (localhost:4200/homePage?empId=1234).
javascript java spring angular
edited Nov 21 '18 at 12:59
xyzWty
6513
asked Nov 21 '18 at 12:20
Anil Khatour
273
I build angular project. pasted dist folder into the src/main/resources/static, now I am able to call index.html file from controller. But the problem is (localhost:4200/homePage?empId=1234) was starting page not able to call this page from controller.
code is below(Spring controller)
@RequestMapping("/homePage")
public String testMethod() {
return "/index.html";
}
and index.html is like this
<!doctype html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>TestApp</title>
<base href="/homePage">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--link rel="icon" type="image/x-icon" href="favicon.ico"-->
<link rel="stylesheet"
href="http://localhost:8080/homePage/styles.2e25b77c70b5269b3e1c.css">
</head>
<body>
<app-root></app-root>
<script type="text/javascript"
src="http://localhost:8080/homePage/runtime.ec2944dd8b20ec099bf3.js">
</script>
<script type="text/javascript"
src="http://localhost:8080/homePage/polyfills.b58e3c18bf0ef2973262.js">
</script>
<script type="text/javascript"
src="http://localhost:8080/homePage/main.b4ad8245c5085d925098.js">
</script>
</body>
</html
want to go this page (localhost:4200/homePage?empId=1234).
javascript java spring angular
javascript java spring angular
edited Nov 21 '18 at 12:59
xyzWty
6513
asked Nov 21 '18 at 12:20
Anil Khatour
273
edited Nov 21 '18 at 12:59
xyzWty
6513
asked Nov 21 '18 at 12:20
Anil Khatour
273
edited Nov 21 '18 at 12:59
xyzWty
6513
edited Nov 21 '18 at 12:59
xyzWty
6513
edited Nov 21 '18 at 12:59
xyzWty
6513
6513
asked Nov 21 '18 at 12:20
Anil Khatour
273
asked Nov 21 '18 at 12:20
Anil Khatour
273
asked Nov 21 '18 at 12:20
Anil Khatour
273
273
You are doing correct thing by serving dist folder . Just implement Hash routing in angular side. So anything which is like : (localhost:4200/#/homePage?empId=1234 will be called from angular side where as URl like : (localhost:4200/homePage?empId=1234) will be called for API
– programoholic
Nov 21 '18 at 12:27
const routes: Routes = [ {path :'personCreate', component: PersonCreateComponent}, {path: 'personSearch', component: PersonSearchComponent}, {path: 'PersonUpdate', component: PersonUpdateComponent}, {path: 'serchTransfer', component: SearchTransferComponent}, {path: 'transferRequest/:personID', component: TransferRequestComponent}, {path: 'homePage', component: HomePageComponent} ]; @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] })
– Anil Khatour
Nov 21 '18 at 12:34
i already have routing in angular code
– Anil Khatour
Nov 21 '18 at 12:34
You don't have hashRouting enabled. Modify like : [RouterModule.forRoot(routes,{useHash: true })]
– programoholic
Nov 21 '18 at 12:37
add a comment |
You are doing correct thing by serving dist folder . Just implement Hash routing in angular side. So anything which is like : (localhost:4200/#/homePage?empId=1234 will be called from angular side where as URl like : (localhost:4200/homePage?empId=1234) will be called for API
– programoholic
Nov 21 '18 at 12:27
const routes: Routes = [ {path :'personCreate', component: PersonCreateComponent}, {path: 'personSearch', component: PersonSearchComponent}, {path: 'PersonUpdate', component: PersonUpdateComponent}, {path: 'serchTransfer', component: SearchTransferComponent}, {path: 'transferRequest/:personID', component: TransferRequestComponent}, {path: 'homePage', component: HomePageComponent} ]; @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] })
– Anil Khatour
Nov 21 '18 at 12:34
i already have routing in angular code
– Anil Khatour
Nov 21 '18 at 12:34
You don't have hashRouting enabled. Modify like : [RouterModule.forRoot(routes,{useHash: true })]
– programoholic
Nov 21 '18 at 12:37
You are doing correct thing by serving dist folder . Just implement Hash routing in angular side. So anything which is like : (localhost:4200/#/homePage?empId=1234 will be called from angular side where as URl like : (localhost:4200/homePage?empId=1234) will be called for API
– programoholic
Nov 21 '18 at 12:27
You are doing correct thing by serving dist folder . Just implement Hash routing in angular side. So anything which is like : (localhost:4200/#/homePage?empId=1234 will be called from angular side where as URl like : (localhost:4200/homePage?empId=1234) will be called for API
– programoholic
Nov 21 '18 at 12:27
const routes: Routes = [ {path :'personCreate', component: PersonCreateComponent}, {path: 'personSearch', component: PersonSearchComponent}, {path: 'PersonUpdate', component: PersonUpdateComponent}, {path: 'serchTransfer', component: SearchTransferComponent}, {path: 'transferRequest/:personID', component: TransferRequestComponent}, {path: 'homePage', component: HomePageComponent} ]; @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] })
– Anil Khatour
Nov 21 '18 at 12:34
const routes: Routes = [ {path :'personCreate', component: PersonCreateComponent}, {path: 'personSearch', component: PersonSearchComponent}, {path: 'PersonUpdate', component: PersonUpdateComponent}, {path: 'serchTransfer', component: SearchTransferComponent}, {path: 'transferRequest/:personID', component: TransferRequestComponent}, {path: 'homePage', component: HomePageComponent} ]; @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] })
– Anil Khatour
Nov 21 '18 at 12:34
i already have routing in angular code
– Anil Khatour
Nov 21 '18 at 12:34
i already have routing in angular code
– Anil Khatour
Nov 21 '18 at 12:34
You don't have hashRouting enabled. Modify like : [RouterModule.forRoot(routes,{useHash: true })]
– programoholic
Nov 21 '18 at 12:37
You don't have hashRouting enabled. Modify like : [RouterModule.forRoot(routes,{useHash: true })]
– programoholic
Nov 21 '18 at 12:37
add a comment |
3 Answers
3
active
oldest
votes
You don't mix angular js with Spring Boot thing.
Angular is all about frontend(Client). Defining UI and communicate with Spring Boot Application for fetching,inserting or updating resources.
Spring Boot Application will be responsible for defining REST Web services and serving the requests either it is Angular or any other technology. As REST is platform independent.
There are many ways to integrate both the Angular and Spring Boot Application,you can refer below article for more detail.
https://www.devglan.com/spring-boot/spring-boot-angular-deployment
answered Nov 21 '18 at 12:34
Gaurav Srivastav
1,2741513
add a comment |
Your frontend works in angular and your backend works with springboot. These two alone cannot communicate with each other. You need to write a service class using typescript(preferable) to communicate.
answered Nov 21 '18 at 12:28
Viraj Wickramasinghe
11
add a comment |
The Angular works only for the frontend, Spring works for the backend, they communicate through HTTP communication through the rest service, where you determine the endpoints on the backend with Spring and you call those endpoints in their Angular.
answered Nov 21 '18 at 13:07
Marcelo Lubanco Thomé
111
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53411910%2fhow-can-i-integrate-angular-code-with-spring-boot-how-to-call-particular-page-o%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
You don't mix angular js with Spring Boot thing.
Angular is all about frontend(Client). Defining UI and communicate with Spring Boot Application for fetching,inserting or updating resources.
Spring Boot Application will be responsible for defining REST Web services and serving the requests either it is Angular or any other technology. As REST is platform independent.
There are many ways to integrate both the Angular and Spring Boot Application,you can refer below article for more detail.
https://www.devglan.com/spring-boot/spring-boot-angular-deployment
answered Nov 21 '18 at 12:34
Gaurav Srivastav
1,2741513
add a comment |
You don't mix angular js with Spring Boot thing.
Angular is all about frontend(Client). Defining UI and communicate with Spring Boot Application for fetching,inserting or updating resources.
Spring Boot Application will be responsible for defining REST Web services and serving the requests either it is Angular or any other technology. As REST is platform independent.
There are many ways to integrate both the Angular and Spring Boot Application,you can refer below article for more detail.
https://www.devglan.com/spring-boot/spring-boot-angular-deployment
answered Nov 21 '18 at 12:34
Gaurav Srivastav
1,2741513
add a comment |
You don't mix angular js with Spring Boot thing.
Angular is all about frontend(Client). Defining UI and communicate with Spring Boot Application for fetching,inserting or updating resources.
Spring Boot Application will be responsible for defining REST Web services and serving the requests either it is Angular or any other technology. As REST is platform independent.
There are many ways to integrate both the Angular and Spring Boot Application,you can refer below article for more detail.
https://www.devglan.com/spring-boot/spring-boot-angular-deployment
answered Nov 21 '18 at 12:34
Gaurav Srivastav
1,2741513
You don't mix angular js with Spring Boot thing.
Angular is all about frontend(Client). Defining UI and communicate with Spring Boot Application for fetching,inserting or updating resources.
Spring Boot Application will be responsible for defining REST Web services and serving the requests either it is Angular or any other technology. As REST is platform independent.
There are many ways to integrate both the Angular and Spring Boot Application,you can refer below article for more detail.
https://www.devglan.com/spring-boot/spring-boot-angular-deployment
answered Nov 21 '18 at 12:34
Gaurav Srivastav
1,2741513
answered Nov 21 '18 at 12:34
Gaurav Srivastav
1,2741513
answered Nov 21 '18 at 12:34
Gaurav Srivastav
1,2741513
answered Nov 21 '18 at 12:34
Gaurav Srivastav
1,2741513
1,2741513
add a comment |
add a comment |
Your frontend works in angular and your backend works with springboot. These two alone cannot communicate with each other. You need to write a service class using typescript(preferable) to communicate.
answered Nov 21 '18 at 12:28
Viraj Wickramasinghe
11
add a comment |
Your frontend works in angular and your backend works with springboot. These two alone cannot communicate with each other. You need to write a service class using typescript(preferable) to communicate.
answered Nov 21 '18 at 12:28
Viraj Wickramasinghe
11
add a comment |
Your frontend works in angular and your backend works with springboot. These two alone cannot communicate with each other. You need to write a service class using typescript(preferable) to communicate.
answered Nov 21 '18 at 12:28
Viraj Wickramasinghe
11
Your frontend works in angular and your backend works with springboot. These two alone cannot communicate with each other. You need to write a service class using typescript(preferable) to communicate.
answered Nov 21 '18 at 12:28
Viraj Wickramasinghe
11
answered Nov 21 '18 at 12:28
Viraj Wickramasinghe
11
answered Nov 21 '18 at 12:28
Viraj Wickramasinghe
11
answered Nov 21 '18 at 12:28
Viraj Wickramasinghe
11
11
add a comment |
add a comment |
The Angular works only for the frontend, Spring works for the backend, they communicate through HTTP communication through the rest service, where you determine the endpoints on the backend with Spring and you call those endpoints in their Angular.
answered Nov 21 '18 at 13:07
Marcelo Lubanco Thomé
111
add a comment |
The Angular works only for the frontend, Spring works for the backend, they communicate through HTTP communication through the rest service, where you determine the endpoints on the backend with Spring and you call those endpoints in their Angular.
answered Nov 21 '18 at 13:07
Marcelo Lubanco Thomé
111
add a comment |
The Angular works only for the frontend, Spring works for the backend, they communicate through HTTP communication through the rest service, where you determine the endpoints on the backend with Spring and you call those endpoints in their Angular.
answered Nov 21 '18 at 13:07
Marcelo Lubanco Thomé
111
The Angular works only for the frontend, Spring works for the backend, they communicate through HTTP communication through the rest service, where you determine the endpoints on the backend with Spring and you call those endpoints in their Angular.
answered Nov 21 '18 at 13:07
Marcelo Lubanco Thomé
111
answered Nov 21 '18 at 13:07
Marcelo Lubanco Thomé
111
answered Nov 21 '18 at 13:07
Marcelo Lubanco Thomé
111
answered Nov 21 '18 at 13:07
Marcelo Lubanco Thomé
111
111
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53411910%2fhow-can-i-integrate-angular-code-with-spring-boot-how-to-call-particular-page-o%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
You are doing correct thing by serving dist folder . Just implement Hash routing in angular side. So anything which is like : (localhost:4200/#/homePage?empId=1234 will be called from angular side where as URl like : (localhost:4200/homePage?empId=1234) will be called for API
– programoholic
Nov 21 '18 at 12:27
const routes: Routes = [ {path :'personCreate', component: PersonCreateComponent}, {path: 'personSearch', component: PersonSearchComponent}, {path: 'PersonUpdate', component: PersonUpdateComponent}, {path: 'serchTransfer', component: SearchTransferComponent}, {path: 'transferRequest/:personID', component: TransferRequestComponent}, {path: 'homePage', component: HomePageComponent} ]; @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] })
– Anil Khatour
Nov 21 '18 at 12:34
i already have routing in angular code
– Anil Khatour
Nov 21 '18 at 12:34
You don't have hashRouting enabled. Modify like : [RouterModule.forRoot(routes,{useHash: true })]
– programoholic
Nov 21 '18 at 12:37