# ng-spring-boot

> Integrate Spring Boot Rest services to your Angular App.

Latest version **14.1.1** (published 2022-08-05) · MIT license · 0 weekly downloads

## Install

```sh
npm install ng-spring-boot
pnpm add ng-spring-boot
yarn add ng-spring-boot
bun add ng-spring-boot
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 14.1.1 |
| Published | 2022-08-05 |
| First published | 2018-12-23 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 39.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Sven Stieber |
| Maintainers | sven10101 |
| Keywords | Angular, Spring Boot, Rest |

## Links

- npm: https://www.npmjs.com/package/ng-spring-boot
- Repository: https://github.com/sven10101/ng-spring-boot
- Homepage: https://github.com/sven10101/ng-spring-boot#readme
- Issues: https://github.com/sven10101/ng-spring-boot/issues
- npm.io page: https://npm.io/package/ng-spring-boot

## Dependencies (1)

- [tslib](https://npm.io/package/tslib.md) ^2.3.0

## Alternatives

- [@luma.gl/experimental](https://npm.io/package/@luma.gl/experimental.md) — 77.1K weekly downloads
- [persona-harness](https://npm.io/package/persona-harness.md) — 4.7K weekly downloads
- [@tsparticles/effect-bubble](https://npm.io/package/@tsparticles/effect-bubble.md) — 4.6K weekly downloads
- [f3d](https://npm.io/package/f3d.md) — 730 weekly downloads
- [spark-html-motion](https://npm.io/package/spark-html-motion.md) — 298 weekly downloads

## Recent versions

- 14.1.1 (latest) — 2022-08-05
- 1.8.0 — 2019-07-20
- 0.0.13 — 2019-04-20
- 0.0.12 — 2019-04-20
- 0.0.11 — 2019-04-20
- 0.0.10 — 2018-12-26
- 0.0.9 — 2018-12-25
- 0.0.8 — 2018-12-25
- 0.0.7 — 2018-12-25
- 0.0.6 — 2018-12-25
- 0.0.5 — 2018-12-23
- 0.0.4 — 2018-12-23
- 0.0.3 — 2018-12-23
- 0.0.2 — 2018-12-23
- 0.0.1 — 2018-12-23

## README

# ng-spring-boot

Integrate Spring Boot Rest services to your Angular App.

## Installation

```
npm i ng-spring-boot
```

## Usage

Supported Operations:

* GET with pagination
* POST a new resource and read the location-header and new resource-id
 
### Example

#### GET with pagination

Spring Boot Rest-Controller (CustomerService.java):
```Java
@RestController
@RequestMapping("/customers")
@CrossOrigin(origins = "*")
public class CustomerService {

    @Autowired
    private CustomerRepository customerRepository;

    @RequestMapping(method = RequestMethod.GET)
    public Page<Customer> listCustomers(@RequestParam(defaultValue = "") String filter, Pageable p) {
        if(filter.length() > 0) {
            return customerRepository.findByNameContaining(filter, p);
        }
        return customerRepository.findAll(p);
    }
}
```

Angular CustomerServce (customer.service.ts):
```Typescript
import { NgSpringBootService, Page, Pageable } from 'ng-spring-boot';

@Injectable({
  providedIn: 'root'
})
export class CustomerService extends NgSpringBootService {

  constructor(http: HttpClient) {
    super(http);
  }

  listCustomers(pageable?: Pageable): Observable<Page<Customer>> {
    return super.getPage<Customer>('http://localhost:8080/customers', pageable);
  }
}
```

Using CustomerService (customer-list.component.ts):
```Typescript
@Component({
  selector: 'app-customer-list',
  templateUrl: './customer-list.component.html',
  styleUrls: ['./customer-list.component.scss']
})
export class CustomerListComponent implements OnInit {

  page: Page<Customer>;

  constructor(private customerService: CustomerService) {
  }

  ngOnInit() {
    this.customerService.listCustomers({sort: 'name'}).subscribe(p => this.page = p);
  }

}
```

customer-list.component.html:
```HTML
<div *ngIf="page">
  <ul>
    <li *ngFor="let customer of page.content">{{customer.name}}</li>
  </ul>
</div>
```

#### POST a new resource

Spring Boot Rest-Controller (CustomerService.java):
```Java
@RestController
@RequestMapping("/customers")
@CrossOrigin(origins = "*")
public class CustomerService {

    @Autowired
    private CustomerRepository customerRepository;

    @RequestMapping(method = RequestMethod.POST)
    public ResponseEntity addCustomers(@RequestBody Customer customer) {
        Integer newCustomerId = customerRepository.saveAndFlush(customer).getId();
        return ResponseEntity
                .status(HttpStatus.CREATED)
                .header("Location", recipeId + "/customers/" + newCustomerId)
                .build();
    }
}
```

To enable the Location header with CORS, you need additional configuration:

```Java
@Configuration
public class WebConfig{

    @Bean
    public WebMvcConfigurer corsConfigurer() {
        return new WebMvcConfigurer() {
            @Override
            public void addCorsMappings(CorsRegistry registry) {
                registry.addMapping("/**")
                        .allowedOrigins("*")
                        .allowedMethods("PUT", "POST", "DELETE")
                        .allowedHeaders("Location", "Content-Type")
                        .exposedHeaders("Location", "Content-Type");
            }
        };
    }
}
```

Usage (customer.service.ts)

```Typescript
  saveCustomer(customer: Customer): Observable<number> {
    return super.postResource('http://localhost:8080/customers', customer).pipe(
      switchMap(r => {
        return of(+r.id);
      })
    );
  }
```

---
_Source: https://npm.io/package/ng-spring-boot · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._