places.html

<template>
  
  <!-- When the enter button is pressed on the place name, save will be called. -->
  <form repeat.for="place of places" submit.delegate="save(place)">
    <label>
      Place Name:
      <input type="text" value.bind="place.name" />
    </label>
  </form>
</template>

places.js

import { inject } from 'aurelia-framework';
import { PlaceService } from 'placeService'

@inject(PlaceService)
export class PlacesViewModel {
 
  service;
  
  places;
  
  constructor(PlaceService) { 
    this.service = PlaceService;
  }
  
  // On activate, we want to load all the places. We can return the promise
  // on the activate function to tell Aurelia when to complete activation
  // once the load is complete.
  activate() {
    return this.service.getAll()
      .then((places) => this.places = places);
  }
  
  save(place) {
    this.service.update(place);
  }
}
  

placeService.js

import { inject } from 'aurelia-framework';
import { HttpClient, json } from 'aurelia-http-client';

// Let's build a very basic service to interface with our Places WebApi project.

@inject(HttpClient)
export class PlaceService {

  http;
    
  constructor(HttpClient) {
  
    
    HttpClient.configure((http) => {
      http
      
        // First, we configure the HttpClient to use our WebApi url.
        .withBaseUrl('//localhost/api/'))
        
        // Then, we configure an interceptor to always return the response
        // body instead of the full response object. For simple examples,
        // this will work just fine.
        .withInterceptor((response) => response.content);
    
    this.http = HttpClient;
  }

  // Next, let's write a method for getting all places.
  getAll() {
  
    // Typically, this endpoint will be at GET /api/place. We can just return
    // the promise object and the service consumer can use the promise directly.
    return this.http.get('place');
  }
  
  // Next, let's write a method for updating a place.
  update(place) {
    
    // Different applications use different conventions for updating. We will 
    // assume that the endpoint is at PUT /api/place/{id}. Again, we'll just
    // return the promise object and the service consumer can use the promise 
    // directly.
    return this.http.put(`place/${place.id}`, place);
  }
}