Saturday, 11 April 2015

Display SharePoint list data using REST and Angular JS - Part 1

Title: Display SharePoint list data using REST and Angular JS - Part 1

Hi All,

I am going to write couple of articles getting data using REST API (i.e. asynchronously) and showing result using angular JS.
In part 1(this article) will be very simple using some of angular JS directives and getting SharePoint list data using REST.

In part 2 I will try with MVC pattern in angular JS.
So let’s start with the requirement,

Requirement: Getting all the list items and display it in specific format. (Actually here we have multiple options to fulfill this requirement including List Viewer web part or writing simple script in JS and showing the result in either Content Editor web part or Script Viewer web part. Since we need to explore Angular JS and MVC pattern using it we will go with angular JS option)

We can use any type list, here I am using OOB link list as shown

Fig1. OOB Link List

Since this is first article, I’ll use only one JavaScript file for now and show the result in Content Editor web part. In next article I’ll divide code into multiple files as per the MVC architecture.

For using angular JS we need to include reference to the angular JS. Either we can directly use from CDN or download and copy it in _layouts folder or upload in master pages gallery like display templates. For now, I have downloaded it and copied to _layouts/15/AngularJSDemo folder.

Following is the snippet for displaying the data (i.e.: View)

<div ng-app="list-module">

          <div ng-controller="list-controller">  

                   <ul style="list-style-type:none;">

<li ng-repeat="item in listitems" style="align:left;>



Here we are using some angular js directives, ng-app, ng-controller, ng-repeat. Here we will not go into depth of those directives. There are already some good articles on those. I have listed few of those in references section below.
Key point here is we are getting the list items in listitems and we are looping with the help of ng-repeat and displaying those. Since we are using link list, we are displaying link URL and link description.
Next is script for getting the list items with the help of Rest APIs

<script src="_layouts/15/AngularJSDemo/angular.min.js"></script> //Angular JS reference
<script type="text/javascript">  

var spApp= angular.module('list-module', []);  
spApp.controller('list-controller', function($scope, $http){ 
url: _spPageContextInfo.webAbsoluteUrl + "/_api/lists/getbytitle('Linkit')/items", //assuming web part is added on same site :)  
          method: "GET",
          headers: { "Accept": "application/json;odata=verbose" }
          }).success(function (data) //got the result successfully
                   var dataResults = data.d.results; // List Items
                   $scope.listitems = dataResults;
          .error(function (data, status, headers, config) // got the error
              alert("error"); //ToDo:Display proper error message/Stack Trace/ Status Code

Result: Just snap of content editor web part J Also please bear with UI part J

Fig 2: Content Editor : Lin




I’ll write part 2 soon explaining MVC pattern with Angular JS


Your feedback / suggestions / comments / queries always welcome J