Monday 5 June 2017

How can I implement the AWS SDK as an Angular 2 Service?

Right now I am running AWS Lambda functions in the browser in a a plain html page. What I want to do is incorporate it into an Angular 2 app as a service so that I components throughout the app can call lambda functions to utilize the different services available from aws. Here is what I have done thus far:

Step 1: npm install --save aws-sdk into my angular app. Actually I am using the angular cli so it is a dependency in my package.json.

Step 2: Then of course I generated a aws service ng g s aws/aws

Step 3: Now that I am in the service I am at a mental roadblock on how to impliment the requirements AWS needs for the browsers here is what I have thus far for the angular service:

import { Injectable } from '@angular/core';

declare var AWS: any;

@Injectable()
export class AwsService {

    constructor() {
        AWS.config.update({ region: 'us-east-1' });
        AWS.config.credentials = new AWS.Credentials('<client-id>', '<secret-key>');
        let lambda = new AWS.Lambda({ region: 'us-east-1', apiVersion: '2015-03-31' })
    }

}

Now here is an example of how I am using lambda in the browser on a webpage:

$(document).ready(function(){
    $('#contact-form-button').on('click', function(e){
        AWS.config.update({region: 'us-east-1'});
        AWS.config.credentials = new AWS.Credentials('XXXXXXXXXXXX', '0000000000000');
        var lambda = new AWS.Lambda({region: 'us-east-1', apiVersion: '2015-03-31'});

        var pullParams = {
            FunctionName: 'marketing-web-dev-createFeedback',
            InvocationType: 'RequestResponse',
            LogType: 'Tail',
            Payload: JSON.stringify({
                "feedback_id": makeid(),
                "name": $('#name').val(),
                "email": $('#email').val(),
                "subject": $('#subject').val(),
                "message": $('#message').val()
            })
        };

        lambda.invoke(pullParams, function(error, data) {
            if (error) {
                prompt(error);
            } else {
                pullResults = JSON.parse(data.Payload);
            }
        });
        var pullResults;
        return false;
    });
});
function makeid(){
    var text = "";
    var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";

    for( var i=0; i < 5; i++ )
        text += possible.charAt(Math.floor(Math.random() * possible.length));

    return text;
}
How can I convert this into a service in Angular 2?

via Amen Ra

No comments:

Post a Comment