Display SharePoint List Data Using REST and AngularJS: Part 1

Hi All.

So let's start with the requirements.

Requirement: Get all the list items and display them in a specific format. (Actually here we have multiple options to satisfy this requirement including a List Viewer web part or writing a simple script in JavaScript and showing the result in either a Content Editor web part or a Script Viewer web part. Since we need to explore AngularJS and MVC patterns using it we will go with the AngularJS option.)

We can use any type list, here I am using an OOB link list as in the following:



Figure 1: OOB Link List

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

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

The following is the snippet for displaying the data (in other words, 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;>
{{item.URL.Description}}{{item.URL.Url}}
            </li>
        </ul>
    </div>
</div>

Here we are using the AngularJS directives, ng-app, ng-controller and ng-repeat. Here we will not go into those directives in depth. There are already some good articles on those. I have listed a few of those in the references section below.

The key point here is we are getting the list items in listitems and we are looping using ng-repeat and displaying those. Since we are using a link list, we are displaying the link URL and link description.

The next is a script for getting the list items using Rest APIs.

<script src="_layouts/15/AngularJSDemo/angular.min.js"></script> //AngularJS reference
<script type="text/javascript">
var spApp= angular.module('list-module', []);
spApp.controller('list-controller', function($scope, $http){
    $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. Also please bear with the UI part.



Figure 2: Link our JavaScript file in CEWP

References:

AngularJS: https://angularjs.org/
https://docs.angularjs.org/misc/downloading
http://www.w3schools.com/angular/angular_directives.asp
$scope: https://docs.angularjs.org/guide/scope

REST APIs:

https://msdn.microsoft.com/en-us/library/office/jj860569.aspx
https://msdn.microsoft.com/en-us/library/office/fp142380.aspx
https://msdn.microsoft.com/en-us/magazine/dn198245.aspx
https://msdn.microsoft.com/en-us/library/office/jj164022.aspx

I'll write part 2 soon explaining the MVC pattern with AngularJS. Thanks! Your feedback, suggestions, comments and/or queries are always welcome.