Loading...

Angular and SharePoint Integration

Why Use Angular?

SharePoint 2013 and Office 365 both ship with an updated REST API that can be used to access and control nearly every aspect of a site collection: Lists, Libraries, Permissions, and Users are just some of the objects that have defined endpoints. Integrating Angular, a powerful client-side framework, gives developers and content managers another option for customizing the user experience.

Developing applications using Angular has some advantages over more traditional customization approaches:

Security

• All actions are executed under the current user’s context — no authorization code needed.

• No server-side code deployed on the Central Administration server

• Code is deployed onto documents in a document library, which grants developers control throughout the SharePoint Permissions interface.

Easy Development

• Source files can be updated and tested while in draft mode without affecting current sessions.

• No WSP’s or access to Central Administration server required for code deployments; updates can be deployed with a Publish command.

• Rollbacks to previous versions made easy using built-in version tracking.

• No need for Visual Studio or SharePoint SDK

Check out the specific customization required when implementing the SharePoint REST API.

The main building block of any Angular application is the module that handles communication between the client and the server API. This article assumes the To Do application is deployed via an HTML document reference in a Content Editor Web Part.

Here are the source code files and deployment instructions for this project.

Retrieving List Details

Query the base list to get information like the content type, which is stored in the ListItemEntityTypeFullName property. This will be useful for creating and updating items. Create a method for retrieving this data with a name other than a reserved HTTP verb.

Constructor call for Angular integration

Retrieving List Items

The SharePoint API returns an Atom/XML feed by default.

Use the Accept header to specify JSON return data, or for a single item append the item Id:

Updating or Creating a List Item

When updating a list item the SharePoint API will only update fields with values explicitly provided: all other values will remain unchanged so provide the updated fields in JSON format and include the Content-Type in the request body. The content type must be included in the request body and can be pulled from the item’s GET response body using the __metadata key. The X-RequestDigest header value can be pulled from an element on the page using a jQuery selector.

Update call in Angular integration

To create a new item requires a similarly constructed request, but a different endpoint URL. Retrieving the content type can be accomplished by running the aforementioned Get List Details command.

Deleting an Item

Deleting an item uses the same endpoint as an item update, but uses the “DELETE” value for the X-HTTP-Method key for compatibility with legacy browsers. Include the X-RequestDigest header as in Update requests.

Delete call with Angular integration

Building an Angular service, factory, or provider for communicating with the SharePoint REST API can be accomplished using the above customizations and tutorial files. This approach can remain consistent across SharePoint implementations and will form the building blocks for any Angular/SharePoint application you build.