Table of Contents

Description:

This article is about creating CURD operation on Azure Mobile Service (WAMS) from angular js web application.

Technology used:

  • Angular JS
  • Azure Subscription
  • Azure Mobile Service

Why Azure Mobile Services:

  • It provides Online SQL storage with SDKs for iPhone, Android and Windows Phone platforms for easy CRUD access.
  • It is very easy to authenticate.
  • Easily integrate with Azure active directory.
  • Offline data sync.

Step By Step:

Create New Mobile Service


Create New table User in mobile service.


Create Columns for User table. 


Create Angular JS Application:

To make CURD operation on AMS from Angular JS, you need to make reference of two main JS file

1: JS provided by Microsoft for AMS.

2: the extended JS for Microsoft AMS

To reference Azure Mobile Services in the controller, change the first line of Controller JS File and add a dependency to ‘azure-­mobile-service.module’:

angular.module('usersApp', ['azure-mobile-service.module'])


Add a constant to the bottom of the Controller file with the URL of the Azure mobile site and the application key retrieved from Azure portal. The AMS library will use these to access the AMS site: 

angular.module('usersApp').constant('AzureMobileServiceClient', {
 
 
    API_KEY: "<APIKEY>",
 
});

 

Create Operation: 

vm.addUser = function () {
         if (vm.user.fullname !== '') {
             Azureservice.insert('Users', {
                                     "fullname" : vm.user.fullname,
                                     "mobile" : vm.user.mobile ,
                                     "email" : vm.user.email ,
                                     "location" : vm.user.location ,
                                     "summary" : vm.user.summary                 
                         }).then(function (newitem) {
                                        vm.users.push(newitem);
                               });
         }
     }

 

Update Operation: 

vm.updateUser = function (user) {
                user.editMode = false;
                Azureservice.update('Users', {
                        "id": user.id,
                         "fullname" : user.fullname,
                         "mobile" : user.mobile ,
                          "email" : user.email ,
                          "location" : user.location ,
                          "summary" : user.summary   
          }).then(function () {
          });
      }
 

List Operation: 

List the users form Angular App.  Init function of controller will list all users of AMS user table.

vm.init = function(){
 
          Azureservice.query('Users',{})
             .then(function (items) {
                  vm.users = items;
              });
          }

 

 

Delete Operation:

vm.deleteUser = function (user) {
    Azureservice.del('Users', {
        "id": user.id
    }).then(function () {
        vm.users.splice(vm.users.indexOf(user), 1);
    });
}
      

You can check the data from Azure portal also.

 

Possible Error:

Error Message: 

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://usermobileservice.azure-mobile.net/tables/Users?$inlinecount=allpages. (Reason: CORS header 'Access-Control-Allow-Origin' missing).

Solution: 

You can configure cross-origin resource from Azure portal dashboard. It allows wildcards if required .

Source Code :

MSDN Gallery