Question

我已经在角度2中创建了一个登录应用程序并且正在工作......

我的 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,[]);

和我的 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;
  }
}

当提交时，我的用户名和密码将以json格式显示为

已提交：{ "id": "Test", "name": "password" }

现在我必须将我的Angular应用程序的用户名和密码发送到spring boot controller ... 这样我就可以在我的后端使用那个用户名和密码......

我不知道如何启动它..所以如果你有一些教程和/或简单的plunker示例可以帮助我这个..分享它

Answer 1

您无需查找有关如何操作的A-Z文档。你可以一次学习作品。

基本上，您需要：

一些输入方法：Angular 2 Forms
将该输入发送到后端的方法：Angular 2 HTTP Services
后端安全登录：Spring Security Getting Started

其他链接

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

如何使用Angular将数据发送到spring boot应用程序..？

1 个答案: