Amazon Dynamodb And Angularjs

March 21, 2024 Post a Comment

So, I created an AWS dynamoDB table (database) and I am ready to get that data with AngularJS. How do I do this with AngularJS? Do I need to setup another service with Amazon? Or c

Solution 1:

While the Mars JSON demo is excellent, here's a really simple example to get started that uses AWS SDK for JavaScript v2.1.33. Switch out the keys for your own. This is a demo only, don't hardcode secret keys, may use AWS Cognito instead. Review the screenshots for several AWS gotcha's.

https://github.com/mayosmith/HelloDynamoDB

/*
-----------------------------------------------------------------
AWS configure
Note: this is a simple experiement for demonstration
purposes only. Replace the keys below with your own.
Do not include the secret key in an actual production
environment, because, then, it wont be secret anymore...
-----------------------------------------------------------------
*/AWS.config.update({accessKeyId: 'AKIAJUPWRIYYQGDB6AFA', secretAccessKey: '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'});
// Configure the regionAWS.config.region = 'us-west-2';  //us-west-2 is Oregon//create the ddb objectvar ddb = newAWS.DynamoDB();
/*
-----------------------------------------------------------------
Update the Table
-----------------------------------------------------------------
*///update the table with this datavar params = {
  Key: {
    name: {S: 'John Mayo-Smith'},
    city: {S: 'New York'}
  },
  AttributeUpdates: {
    food: {
      Action: 'PUT',
      Value: {S: 'chocolate'}
    }
  },
  TableName: 'sampletable',
  ReturnValues: 'ALL_NEW'
};
//update the tableupdate();
/*
-----------------------------------------------------------------
Get Item from the Table
-----------------------------------------------------------------
*///attribute to readvar readparams = {

  Key: {
    name: {S: 'John Mayo-Smith'},
    city: {S: 'New York'}
  },
  AttributesToGet: ['food'],
  TableName: 'sampletable'
};
//get the itemread();
/*
-----------------------------------------------------------------
function update()
Description: Calls updateItem which is part of the AWS Javascript
SDK.
Returns: JSON object (the object is stringifyed so we can see 
what's going on in the javascript console)
-----------------------------------------------------------------
*/functionupdate(){
    ddb.updateItem(params, function(err, data) {
        if (err) { returnconsole.log(err); }
        console.log("We updated the table with this: " + JSON.stringify(data));
    });
}
/*
-----------------------------------------------------------------
function read()
Description: Calls getItem which is part of the AWS Javascript
SDK.
Returns: JSON object (the object is stringifyed so we can see 
what's going on in the javascript console)
-----------------------------------------------------------------
*/functionread(){
    ddb.getItem(readparams, function(err, data) {
        if (err) { returnconsole.log(err); }
        console.log(": " + data);       

    console.log("John's favorite food is: "+ JSON.stringify(data.Item.food.S)); // print the item data
});
}

Solution 2:

Yes, you can access Amazon DynamoDB directly from your AngularJS application using the AWS JavaScript SDK for the Browser. The same code snippet should work for NodeJS as well.

One thing to note is that your application needs to securely authenticate to AWS without embedding security credentials in the code. Amazon Cognito makes it easy and automatically takes care of authentication if you have created an identity pool and configure your application accordingly. Here are some links that will help you get started. We built a demo application with AngularJS on Amazon DynamoDB. It uses Amazon Cognito for authentication and the Document SDK to store and retrieve JSON objects to and from DynamoDB directly, without needing to serialize and deserialize them in client code in the browser.

Source code: https://github.com/awslabs/aws-dynamodb-mars-json-demo

Live demo: http://dynamodb-msl-image-explorer.s3-website-us-east-1.amazonaws.com/

examples of using the service that is using the AWS library: https://github.com/awslabs/aws-dynamodb-mars-json-demo/blob/master/viewer/app/scripts/controllers/favorites.js

https://github.com/awslabs/aws-dynamodb-mars-json-demo/blob/master/viewer/app/scripts/controllers/top-voted.js

Document SDK: https://github.com/awslabs/dynamodb-document-js-sdk