Building an Office 365 Application with AngularJS

David Feldman

by Dave Feldman on 9/3/2015

Share this:

Article Details

Date Revised:

Applies to:
AngularJS, Office 365, responsive, SharePoint development, single page app

This article is the first in a series that will show you how to build responsive single page AngularJS applications in Office 365. In this installment, we’ll introduce the employee directory application (figure 1) we’re building and help you get your development environment setup.

Employee Directories are a common feature found on almost every intranet and often the experience of People Search in SharePoint or even finding people within Delve just isn’t right. The application will have a similar user experience to Delve to maintain a level of consistency with the Office 365 platform and the application will leverage People Search to provide a full-featured search experience complete with refinements, custom profile attributes and more. Things are always evolving in Office 365, but I hope this example will inspire you to start coding today!

A fully responsive Employee Directory created using Office 365 and AngularJS

Figure 1: In this series, you’ll learn how to create a fully responsive Employee Directory using Office 365 and AngularJS. Click here to watch the employee directory sample video

Getting ready to start

Traditionally, SharePoint development was performed on the server side in ASP.NET using the Farm Solution framework.  Solutions extended the capabilities of the SharePoint by running .NET code on the same servers that hosted SharePoint sharing the memory and CPU without a safety net. Shortcomings in a developer’s code translated into performance issues or outages for the entire SharePoint environment. Farm solution development is not scalable and is not supported in Office 365.

The Office 365 extensibility model greatly improves the performance and supportability of the platform by providing APIs for integration while forcing developers to execute their code elsewhere. One can choose to host an application on an application server in Microsoft Azure or Amazon Web Services with support for server-side code development or leverage client-side technologies such as JavaScript that run only in the web browser.

AngularJS provides a highly structured approach to writing dynamic web applications with HTML and JavaScript. One of the nice things about building AngularJS apps leveraging Office 365 services is the ability to host them in SharePoint. Since we are not building any server code, we host our application in a document library in SharePoint or within OneDrive for Business. One could leverage this approach to build a totally custom homepage for your intranet or develop a search application such as our employee directory; all without a need to pay for server hosting.

If you’re a longtime SharePoint user, you may know that SharePoint forces files with the extension .htm to be downloaded. One can’t just host a bunch of HTML files in a document library and link to those files due to a setting known as strict file handing that forces the browser to download files of certain types including .htm. How then can we host our AngularJS apps inside a document library?

You can see that Delve is an .aspx page in the user’s My Site

Figure 2: Delve is an .aspx page in the user’s My Site.

Let’s examine some of the new Microsoft experiences such as Delve that are written as SPAs. The URL for Delve is https://<tenantname> (figure 2). One interesting thing that pops out is that Delve is hosted as a part of a user’s My Site. You should also notice that this single page application is hosted with an .aspx extension. ASP.NET web forms pages that make up the majority of the SharePoint user experience all are hosted with the .aspx extension and are therefore browseable. By renaming our HTML pages to have an .aspx extension, SharePoint will happily serve our application from any document library.

It’s really important to me that we can develop efficiently and not have a lot of hassle getting our application into Office 365. File upload does one file at a time, drag and drop doesn’t support uploading folders, and SharePoint Designer doesn’t qualify as a modern editing experience.

Add a document library to SharePoint and let OneDrive sync the files to your PC

Figure 3: Add a document library to SharePoint and let OneDrive sync the files to your PC

OneDrive for Business sync agent enables two-way replication between SharePoint document libraries and your PC. After creating a document library that will host your application, simply click the Sync button (figure 3) and let OneDrive create a local copy of your library. As you add files and folders locally, OneDrive will automatically sync your files up to Office 365 within a few seconds. Once you have a local copy, you can really use any editor you like.

My editor of choice is Visual Studio Code (figure 4), which you can download at no cost from and is available on Linux, Mac OSX or Windows. Once you’ve installed Visual Studio Code, from the File menu choose Open Folder and select the folder that OneDrive sync created on your local file system. Code will show the directory structures on the left and enable a rapid development cycle as OneDrive automatically publishes changes back to SharePoint.

From an application lifecycle management perspective this makes dev, test and prod scenarios easy as you are just syncing up a set of files. It’s easy to have one library serving as development and other libraries hosting more mature versions of your application.

The Contoso demo running in Visual Studio Code

Figure 4: Viewing the Contoso team site in Visual Studio Code.


In this article, we covered why AnguarJS applications can be a great choice for development of user experiences on Office 365 services. We discussed how we can leverage a SharePoint document library for hosting and how OneDrive for Business sync and Visual Studio Code can enable a highly productive work environment. In the next article, we’ll build the shell of our application and integrate the Office 365 suite bar.

Download Related Files:

Topic: Development

Sign in with

Or register