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_URL:
"https://usermobileservice.azure-mobile.net/",
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:
Solution:
You can configure cross origin resource from azure portal
dashboard. It allows wildcards if required .
