Office 365 AngularJS SPA using contacts API - Part 3
In the previous post, we saw how to ADAL.js to get the access token to access the office 365 API Resources. In this post we will extend the same and create a single page application having a CRUD operation for Office 365 Contacts API.
For details on using the REST contacts API. Refer the link here.
Office 365 Contacts Application will have the functionality to Add/Edit/Delete for the contacts stored in the office 365 contacts
We will use AngularJS which provides lot of advantages as mentioned below
- Architecture patterns like MVC
- HTML Templating
- 2-way data binding
- Routing engine
- Dependency injection and Unit testing
We will look into the main component of the app
First we will inject the ADAL Angular module into the app:
var o365CorsApp = angular.module("o365CorsApp", ['ngRoute', 'AdalAngular'])
Next,Initialize the ADAL provider by providing tenant id, client id and the resources that need to be accessed and also Tell the ADAL provider which routes requires the login by specifying “requireADlogin”
o365CorsApp.config(['$routeProvider', '$httpProvider', 'adalAuthenticationServiceProvider', function ($routeProvider, $httpProvider, adalProvider) {
$routeProvider
.when('/',
{
controller: 'ContactsController',
templateUrl: 'Contacts.html',
requireADLogin: true
})
.when('/contacts/new',
{
controller: 'ContactsNewController',
templateUrl: 'ContactsNew.html',
requireADLogin: true
})
.when('/contacts/edit',
{
controller: 'ContactsEditController',
templateUrl: 'ContactsEdit.html',
requireADLogin: true
})
.when('/contacts/delete',
{
controller: 'ContactsDeleteController',
templateUrl: 'Contacts.html',
requireADLogin: true
})
.otherwise({ redirectTo: '/' });
var adalConfig = {
tenant: '5b532de2-3c90-4e6b-bf85-db0ed9cf5b48',
clientId: '1cdf3582-12e3-405d-8ea3-315bda8df207',
extraQueryParameter: 'nux=1',
endpoints: {
" https://outlook.office365.com/api/v1.0 ": " https://outlook.office365.com/ "
}
};
adalProvider.init(adalConfig, $httpProvider);
}]);
Controller: Binds the data(model) to the view components and also holds the business logic of the app : It also uses a service called “o365CorsFactory” which is injected into the controller.
o365CorsApp.controller("ContactsController", function ($scope, $q, $location, $http, ShareData, o365CorsFactory) {
o365CorsFactory.getContacts().then(function (response) {
$scope.contacts = response.data.value;
});
$scope.editUser = function (userName) {
ShareData.value = userName;
$location.path('/contacts/edit');
};
$scope.deleteUser = function (contactId) {
ShareData.value = contactId;
$location.path('/contacts/delete');
};
});
o365CorsApp.controller("ContactsNewController", function ($scope, $q, $http, $location, o365CorsFactory) {
$scope.add = function () {
var givenName = $scope.givenName
var surName = $scope.surName
var email = $scope.email
contact = {
"GivenName": givenName, "Surname": surName, "EmailAddresses": [
{
"Address": email,
"Name": givenName
}
]
}
o365CorsFactory.insertContact(contact).then(function () {
$location.path("/#");
});
}
});
o365CorsApp.controller("ContactsEditController", function ($scope, $q, $http, $location, ShareData, o365CorsFactory) {
var id = ShareData.value;
o365CorsFactory.getContact(id).then(function (response) {
$scope.contact = response.data;
});
$scope.update = function () {
var givenName = $scope.contact.GivenName
var surName = $scope.contact.Surname
var email = $scope.contact.EmailAddresses[0].Address
var id = ShareData.value;
contact = {
"GivenName": givenName, "Surname": surName, "EmailAddresses": [
{
"Address": email,
"Name": givenName
}
]
}
o365CorsFactory.updateContact(contact, id).then(function () {
$location.path("/#");
});
};
});
o365CorsApp.controller("ContactsDeleteController", function ($scope, $q, $http, $location, ShareData, o365CorsFactory) {
var id = ShareData.value;
o365CorsFactory.deleteContact(id).then(function () {
$location.path("/#");
});
});
Service: It is used to organize and share code through the app and often used to get data from remote endpoints.
o365CorsApp.factory('o365CorsFactory', ['$http' ,function ($http) {
var factory = {};
factory.getContacts = function () {
return $http.get(' https://outlook.office365.com/api/v1.0/me/contacts ')
}
factory.getContact = function (id) {
return $http.get(' https://outlook.office365.com/api/v1.0/me/contacts/ '+id)
}
factory.insertContact = function (contact) {
alert('test')
var options = {
url: ' https://outlook.office365.com/api/v1.0/me/contacts ',
method: 'POST',
data: JSON.stringify(contact),
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
};
return $http(options);
}
factory.updateContact = function (contact,id) {
var options = {
url: ' https://outlook.office365.com/api/v1.0/me/contacts/ '+id,
method: 'PATCH',
data: JSON.stringify(contact),
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
};
return $http(options);
}
factory.deleteContact = function (id) {
var options = {
url: ' https://outlook.office365.com/api/v1.0/me/contacts/ '+id,
method: 'DELETE',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
};
return $http(options);
}
return factory;
}]);
- List all the contacts in Office 365
- Edit the contacts in Office 365
- Add new contact
The source code is available at the following location: