Posted on April 14, 2016|by: Sean Gannon| 4 Comments

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

Implementing the SharePoint REST API requires some specific customization.

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.

Click here for source code files for this project, along with deployment instructions.

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 logic

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:

GetAllandGetById

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 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.

UpdateAnItem

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.

CreateANewItem

Deleting an Item

Deleting an item usues 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.

DeleteItem

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.

Filed in: Collaboration, Sharepoint, Tips & Tricks

3 Comments

  1. jay
    April 17, 2016 at 3:12 pm

    great Angular on sharepoint makes coding on sharepoint much easier.

  2. Kamil
    April 18, 2016 at 3:13 pm

    The zip file contains only 3 angular js files, without source code files for this project, along with deployment instructions.

    • Sean Gannon
      April 20, 2016 at 9:59 pm

      Hi Kamil,
      Thanks for the comment. Sorry for forgetting to update the source files before posting, but I’ve put a new version of the zip up here.
      Please comment again if you have any questions!
      Thanks,
      Sean

One Trackback +

  1. By Why We Choose SharePointMetroStar Blog on May 9, 2016 at 3:39 pm

    […] on SharePoint: • Creating a Document Rollup Using SharePoint 2013 Search • Angular and SharePoint Integration • Color Coding a SharePoint 2013 List the Right Way […]

Your email is kept private. Required fields are marked *

*
*