How to send data with Angular to spring boot application..?

Question

I have made an login application in angular 2 and its working...

My app.ts

import {bootstrap, Component} from 'angular2/angular2';
import {DemoForm} from './form';
//import {FormBuilder, ControlGroup} from "angular2/angular2";

@Component({
  selector: 'my-app',
  template: `
    <demo-form></demo-form>
  `,
  directives:[DemoForm]
})
class AppComponent {
  constructor(){}
}

bootstrap(AppComponent,[]);

and my form.ts

import {Component, View, FORM_DIRECTIVES} from 'angular2/angular2';

@Component({  
  selector: 'demo-form'
})
@View({
  directives: [FORM_DIRECTIVES],
  template: `
  <div>
    <form #f="form" (submit)="onSubmit(f)">
      <div class="form-group">
        <label for="id">id</label>
        <input type="text" class="form-control" ng-control="id" placeholder="id" required>
      </div>

      <div class="form-group">
        <label for="name">name</label>
        <input type="text" class="form-control" ng-control="name" placeholder="name" required>
      </div>

      <button type="submit" class="btn btn-default" [disabled]="!f.valid">Submit</button>
    </form>
    <hr>
    submitted : {{submitted|json}}
  </div>  
  `
})
export class DemoForm {
  private submitted:object = {};
  onSubmit(f) {
    this.submitted = f.value;
  }
}

and when submitted i my username and password will in json format as

submitted : { "id": "Test", "name": "password" }

Now i have to send the username and password from my Angular application to spring boot controller... so that i can use that username and password in my back-end...

i have no idea how to start it.. so if you have some tutorials and or simple plunker example that can help me with this.. share it

I would suggest you read about client server architectures and http first. :) — toskv
– toskv, Commented Mar 22, 2017 at 8:22
Here is a link to the relevant part of Angular's introduction tutorial: angular.io/docs/ts/latest/tutorial/toh-pt6.html If you haven't done it yet I would highly suggest you to do it :) — Sebastian Sebald
– Sebastian Sebald, Commented Mar 22, 2017 at 8:28
your spring boot app is just like any other backend: it exposes endpoints, that you may call from anywhere and anything that supports http requests — Sebas
– Sebas, Commented Mar 22, 2017 at 8:29

Brian · Accepted Answer · 2019-12-20 21:23:12Z

3

You don't have to find an A-Z document on how to do it. You can learn pieces at a time.

Basically, you need to have:

some method of input: Angular 2 Forms
a way to send that input to the backend: Angular 2 HTTP Services
a secure login on the backend: Spring Security Getting Started

Other links

Spring + Angular2: https://github.com/borysn/spring-boot-angular2
Angular 2 login: http://jasonwatmore.com/post/2016/09/29/angular-2-user-registration-and-login-example-tutorial

edited Dec 20, 2019 at 21:23

answered Mar 22, 2017 at 8:32

Brian

5,0693 gold badges22 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Bar Akiva Over a year ago

Please consider providing another link for the angular forms.

Collectives™ on Stack Overflow

How to send data with Angular to spring boot application..?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related