How-to Get Blobs from Azure Blob Storage In Angular

The Idea

I wanted to build an Angular application to read, view blobs stored in an Azure Blob Store. Azure has several libraries already built, and i will be using the Javascript based blob storage client library. You may donwload them here.

We will be bringing the azure-storage-blob.js file into our application.

What we need

1. Azure portal account
2. A blob storage in your Azure portal, with a container and add sample images to the container.

If all is steup properly, your Azure Storage should look like this

Settings

Folder Structure

Running the application

This project was generated with Angular CLI version 1.6.8.

Development server

Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

Output / Display

If the application builds and runs successfully, you should see an output as below: