將AWS Lambda代碼集成到Angular Application中的位置？

我有一個角度的應用程序，我有一個s3桶。它運行着很棒的路由工作等。我想要做的是將角度表單合併到我的應用程序中，並在後端使用AWS Lambda。我的問題是，我知道應該怎麼使用AWS LAMBDA基本前端的形式傳遞信息，我的例子使用jQuery：將AWS Lambda代碼集成到Angular Application中的位置？

$(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 = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz"; 
 

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

 
    return text; 
 
}

我怎麼能夠做同樣的事情用角度分量？下面是一個基本組成部分的存根：

import { Component, OnInit } from '@angular/core'; 
 
import { FormGroup, FormBuilder } from '@angular/forms'; 
 

 
import { Customer } from './customer'; 
 

 
@Component({ 
 
    selector: 'my-signup', 
 
    templateUrl: './app/customers/customer.component.html' 
 
}) 
 
export class CustomerComponent implements OnInit { 
 
    customerForm: FormGroup; 
 
    customer: Customer= new Customer(); 
 

 
    constructor(private fb: FormBuilder){} 
 

 
    ngOnInit(): void { 
 
     this.customerForm = this.fb.group({ 
 
      feedback_id: '', 
 
      name: '', 
 
      email: '', 
 
      subject: '', 
 
      message: '' 
 
     }); 
 

 
    } 
 

 
    save() { 
 
     console.log(this.customerForm); 
 
     console.log('Saved: ' + JSON.stringify(this.customerForm.value)); 
 
    } 
 
}

我只是沒有就如何整合AWS Lambda and Angular

來源

2017-05-18 Amen Ra

如果您的jQuery的例子作品的連接，那麼你應該能夠在Angular中使用相同的代碼。在您的Angular組件save方法中移動Lambda調用代碼，並將字符串化的customerform值插入Lambda請求負載（而不是您的jquery字段提取）。請記住要聲明AWS：any，以便Typescript在編譯您的AWS調用時不會失敗。

也就是說，更簡潔的方法是您還可以使用AWS API Gateway爲您的Lambda調用創建HTTP POST API。然後從Angular中，您只需使用http.post。

來源

2017-05-18 07:43:50

將AWS Lambda代碼集成到Angular Application中的位置？

回答

相關問題