A Website Without Servers – Using Azure Functions: Part 7, Angular Service
If you haven’t been following along in this series, we are building an “Engineer Fashion App” using Azure Functions. I recommend looking back at Parts 1, 2, 3, 4, 5, and 6 to see what we’ve done so far.
Let’s assume we have an Azure Function that returns some JSON for our wardrobe and that it returns something like below (yep, that is a lot of JSON):
The above is created with a pretty basic Azure Function. See the code below (returning the JSON) is omitted to keep it shorter.
Now that we have an Azure Function that returns some data, we can wire it up with our Angular website. To do that we need to create a service. Doing this with Angular is super easy; just run the CLI command.
ng generate service backend
This will generate a new Angular Service named “backend”.
@Injectable()
export class BackendService {
After we have a backend service, we need to create a method to call our Azure Function backend. Now this method won’t be synchronous and return the data straight away, but we will return a promise.
We must change our home component to call this service when it is initialized.
Now we should have an Angular site that calls an Azure Function to get the data.
Things this blog post didn’t cover (but we will in a later post):
- How to mock out this call
- How to put in a loading spinner
- What to do if the call fails
Here is a link to a GitHub gist with some of the code for this sample, but slightly simplified.
