7

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 can I access my database directly?

I was unable to find anything related to DynamoDB and AngularJS directly. Any help would be greatly appreciated!

7
  • There is an JS SDK (aws.amazon.com/sdk-for-browser). Check out an example here: ng-newsletter.com/posts/aws-js-sdk.html Commented Jan 22, 2015 at 22:50
  • Are you planning on talking directly to DynamoDB from a web app? If you go that way, you will expose your AWS credentials to users. Commented Jan 23, 2015 at 8:03
  • Thanks Tavi. I think the AWS JS SDK is exactly what I am looking for. Commented Jan 25, 2015 at 18:04
  • @MikeKobit Does cognito allows us to use DynamoDb from a web app safelly ? Commented Apr 22, 2015 at 13:49
  • @Thomas Yes, Cognito allows you to securely gate access to DynamoDB. My old comment should more be phrased as "if you directly serve credentials to access DynamoDB to a webapp, you will expose those credentials". Commented Apr 22, 2015 at 15:49

2 Answers 2

10

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 region
AWS.config.region = 'us-west-2';  //us-west-2 is Oregon
//create the ddb object
var ddb = new AWS.DynamoDB();
/*
-----------------------------------------------------------------
Update the Table
-----------------------------------------------------------------
*/
//update the table with this data
var 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 table
update();
/*
-----------------------------------------------------------------
Get Item from the Table
-----------------------------------------------------------------
*/
//attribute to read
var readparams = {

  Key: {
    name: {S: 'John Mayo-Smith'},
    city: {S: 'New York'}
  },
  AttributesToGet: ['food'],
  TableName: 'sampletable'
};
//get the item
read();
/*
-----------------------------------------------------------------
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)
-----------------------------------------------------------------
*/
function update(){
    ddb.updateItem(params, function(err, data) {
        if (err) { return console.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)
-----------------------------------------------------------------
*/
function read(){
    ddb.getItem(readparams, function(err, data) {
        if (err) { return console.log(err); }
        console.log(": " + data);       

    console.log("John's favorite food is: "+ JSON.stringify(data.Item.food.S)); // print the item data
});
}
Sign up to request clarification or add additional context in comments.

2 Comments

very nice summary, although an additional note shoule be to say that to be anywhere near useful, you'd have to pass a callback function in to the read() and update() methods, rather than declare it in the getItem and updateItem calls.
If you link to your own content you are required to disclose. stackoverflow.com/help/promotion
6

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 AWS library: https://github.com/awslabs/aws-dynamodb-mars-json-demo/blob/master/viewer/app/scripts/services/mars-photos.js

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

1 Comment

You example is great but the facebook vote doesn't work if I don't logged in facebook already. Is it by design or just a bug? Usually if you are not logged in the site opens the log in window where you can enter credentials but not in your case - you just throw an exception.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.