SharePoint 2013/online – CRUD operations using AngularJS and REST

I’ve been developing some apps using AngularJS and REST.

Doing some Googleing I noticed that most developers use jQuery Ajax to make REST requests, however if you do that, you will miss out on some awesome AngularJS features.

First of all, you should check out this post on how to refresh the form digest value. You need the digest value to do CRUD operations or SharePoint will deny your requests.

Let’s create a SharePoint list with some custom fields. Note that the field internal names will be different from the display names, just to make the development easier.

SharePoint content

Custom list:

  • Bookshelf

Content type:

  • Book

Fields:

  • Title
    • Type: Single line of text
    • Internal name: Title
  • Summary
    • Type: Multiple lines of text
    • Internal name: Booksummary
  • Release date
    • Type: Date and Time
    • Internal name: Bookreleasedate
  • Is read
    • Type: Yes/No
    • Internal name: Bookisread
  • Book author
    • Type: Person or Group
    • Internal name: Bookauthor
  • Bookstore
    • Type: Hyperlink or Picture
    • Internal name: Bookstore
  • Book type
    • Type: Choice
    • Internal name: Booktype

The service

This is a service that will handle all operations, and since it’s a AngularJS service it will be instanced and the header config will be the same for all requests.

So there are your CRUD operations. Remember that AngularJS will do the serialization of the JSON objects.

One of the biggest benefits of using $q and $http instead of jQuery Ajax and jQuery deferred is that AngularJS knows that the request was asynchronous and you don’t have to use $scope.$apply().

Here are two simple model examples

Model examples

 

About Tobias Eriksson