Angular  

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):

  1. <div ng-app="list-module">  
  2.     <div ng-controller="list-controller">     
  3.         <ul style="list-style-type:none;">  
  4. 　　　　<li ng-repeat="item in listitems" style="align:left;>   
  5. {{item.URL.Description}}{{item.URL.Url}}  
  6.             </li>  
  7.         </ul>  
  8.     </div>  
  9. </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.
  1. <script src="_layouts/15/AngularJSDemo/angular.min.js"></script> //AngularJS reference  
  2. <script type="text/javascript">     
  3. var spApp= angular.module('list-module', []);     
  4. spApp.controller('list-controller', function($scope, $http){    
  5.     $http({  
  6. url: _spPageContextInfo.webAbsoluteUrl + "/_api/lists/getbytitle('Linkit')/items", //assuming web part is added on same site :)   
  7.             method: "GET",  
  8.         headers: { "Accept": "application/json;odata=verbose" }  
  9.     }).success(function (data) //got the result successfully  
  10.     {  
  11.         var dataResults = data.d.results; // List Items  
  12.         $scope.listitems = dataResults;   
  13.     })  
  14.           .error(function (data, status, headers, config) // got the error  
  15.           {     
  16.                 alert("error"); //ToDo:Display proper error message/Stack Trace/ Status Code  
  17.         });     
  18. });  
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.

Membership not found