Back to blog

Inside View To AngularJS and Lambdas

Blog

As a result of an investigation on Node and Serverless application I have created a POC using AngularJS and AWS lambdas.

A simple AngularJs app

The first step was to create an Angular app that invokes Eventful API to display a list of events.

Executing the command

import { Component } from ‘@angular/core’;

@Component({
selector: ‘app-root’,
templateUrl: ‘./app.component.html’,
styleUrls: [‘./app.component.css’]
})
export class AppComponent {
title = ‘Event Weather’;
weather;

constructor() {
this.fetchWeather();
}

fetchWeather() {

this.weather = return this.http.get(‘http://api.openweathermap.org/data/2.5/forecast?appid=xxx&q=london&units=metric’);
}
}

The result of the REST call is stored in the weather variable when the app is loaded.

Then a simple loop prints the list of events

Welcome to {{ title }}!

Events

  • Wind speed: {{ event.wind.speed }}
    Temperature: {{ event.main.temp }}
    Sky: {{ event.weather[0].main }}

Obviously, the layout can be improved but it was out of scope for this POC.

AWS Lambda integration

Once I got the app running, I tried to replace the Eventuful API with AWS Lambdas.
From the AWS console, I’ve created a new NodeJs Lambda function with basic permissions

Then I’ve edited index.js with the code to fetch the events. One thing to remember when creating a REST API with lambda, is that it expects the output to have a specific format. Sending back just the JSON response received from Eventful would generate an exception.

exports.handler = async (event) => {

var response = {
“statusCode”: 200,
“body”: JSON.stringify(data),
“headers” : {
‘Content-Type’: ‘application/json’,
‘Access-Control-Allow-Origin’: ‘*’
},
“isBase64Encoded”: false

};

return response;
};

In order to expose our Lambda function to the world, we’ll need to set up an API Gateway. This is simple enough and requires very few steps.
From the function’s management page, it’s sufficient to click on the API Gateway trigger and choose “Create a new API”:

For the purpose of this project we’ll stick with “Open” security, but other options are available.

Once the trigger is created AWS will assign and endpoint to the function:

The final step is to edit the Angular app and replace the URL of the Eventful API with the URL the lambda function:

import { Component } from ‘@angular/core’;

@Component({
selector: ‘app-root’,
templateUrl: ‘./app.component.html’,
styleUrls: [‘./app.component.css’]
})
export class AppComponent {
title = ‘Event Weather’;
weather;

constructor() {
this.fetchWeather();
}

fetchWeather() {

this.weather = return this.http.get(‘https://xxx.execute-api.us-west-2.amazonaws.com/default/FetchWeather’);
}
}

Conclusions

For such a simple POC, and when an external REST API already exists to provide the required service, the use of Lambdas may seem a bit overkill.

However, it allows to remove part of the code (and its configuration) from the main application, keeping it simple and light.
Most importantly, it allows us to leverage the cloud’s scaling capabilities for more heavy-weight operations.

Leave a Reply

Your email address will not be published. Required fields are marked *

The browser you're using is out of date. Please update for better security, speed and experience on this site.