Accessing SharePoint Data with External Angular.js Application
With the rise of cloud and mobile technology, people expect fast, uninhibited access to data regardless of where they are, what device they’re using, what browser they’re using, or how the data is being stored. SharePoint is a widely popular platform for businesses to utilize for data storage, and access to that data can sometimes be a problem on a device without direct SharePoint access. However, there is a great workaround – you can create an external application that interacts with Microsoft Azure Active Directory, Office 365, and SharePoint using RESTful services.
Data on a SharePoint website is usually stored in lists and libraries, which can be accessed programmatically. Some of this data exists on the server hard drive, while the rest is generally located in a database.
SharePoint has levels of permissions that must be set, and then authenticated for users in order to access the site collection, site, list, library, folder, or item level. In Office 365, users (as well as applications), must be authenticated and authorized to interact with items in the SharePoint libraries and lists. For this example, we will utilize Azure Active Directory for authentication and authorization.
As a developer you can access objects in SharePoint libraries/lists using RESTful APIs, which allows you to build completely customized standalone applications that take advantage of responsive design, and run across all devices.
We will utilize an open-source expense manager for this example, which can be found here: https://github.com/OfficeDev/SP-AngularJS-ExpenseManager-Code-Sample
This application was built with AngularJS that utilizes lists in SharePoint/Office 365 that contain expense, employee, and state data. If you’re not familiar with SPAs (single-page applications), they consist of a template page (remains visible, is never reloaded) that is utilized to display all pages of the application, giving them a consistent look and feel.
First, login to Azure Active Directory. After logging in, the application will utilize RESTful to retrieve SharePoint/Office 365 list/library data. AngularJS takes this data and binds it into the user interface.
App users can view employees in both a card and list view mode, both of which support filter/paging options to make sorting less of a headache.
The expense manager app allows you to edit employee information. This editor is run in AngularJS for client-facing authorization, while server-side authorization utilizes SharePoint. Employee expenses can also be sorted, filtered, viewed, and analyzed directly from this manager.