CRUD operations on SharePoint list using AngularJS
In this post, I am going to share some code snippets for performing CRUD operation on a SharePoint list using only client side script written with AngularJS.
It is a simple implementation, where I am going to create a web part, which will have reference to a controller that will read, create, update and delete list items.
I hope you are reading this post with some prior experience with SharePoint and AngularJS. The environment I am working upon is a SharePoint Online (Office 365) site.
I have created a Contacts list as in the below screenshot.
For this example, I will be using only 3 fields/columns in the list.
ID (Auto generated for every item in the list)
Last Name (Internal name: Title)
First Name (Internal name: FirstName)
Create the webpart
I have added one Content Editor Webpart to a page and linked it to our view page [listItems.html].
The view page has 4 sections to view contacts, add, edit and delete them. For each of these operations, I have created 4 separate controllers. Below is the code for the same.
In the head section, I have made reference to the JQuery and the AngularJS libraries. And I have also referred the controller script [listItems.controller.js]. I have also added some styling script for the webpart.
Below is the controller code. The controller name is according to the operation it performs.
Hope this post is helpful for folks working purely on client side scripting with SharePoint in Office 365.