Retrieve list data using AngularJS REST API in SharePoint 2013

Retrieve list data using AngularJS REST API in SharePoint 2013

In this article we discuss about to get the data from SharePoint List using Angular js and Rest api. I used REST API to talk to SharePoint and get the data from the list. I am not going to discuss much about the REST services as many folks has already done a great work on explaining about REST API service.

Read some SharePoint online tutorials:
Download FREE PDF on HUB site in SharePoint online

SharePoint Online modern experience

SharePoint Online branding Creating Tabbed Menu using Bootstrap and HTML in SharePoint 2016/2013

In this script we just saw, we have first created an Angular Controller with the name ‘spCustomerController’. We have also injected $scope and $http service. The $http service will fetch the list data from the specific columns of SharePoint list. $scope is a glue between Controller and a View. It acts as execution context for Expressions. Angular expressions are code snippets that are usually placed in bindings such as {{ expression }}.


 Retrieve list data using AngularJS REST API in SharePoint 2013
Retrieve list data using AngularJS REST API in SharePoint 2013

<h1>WelCome To Angular JS Sharepoint 2013 REST API !!</h1>

<div ng-app=”SharePointAngApp” class=”row”>

<div ng-controller=”spCustomerController” class=”span10″>

<table class=”table table-condensed table-hover”>

<tr>

<th>Title</th>

<th>Employee</th>

<th>Company</th>

</tr>

<tr ng-repeat=”customer in customers”>

<td>{{customer.Title}}</td>

<td>{{customer.Employee}}</td>

<td>{{customer.Company}}</td>

</tr>

</table>

</div>

</div>

In the view you can use the ng-repeat to iterate through the customers and display customer information.

Use the following procedure to create a sample.

Step 1: Navigate to your SharePoint 2013 site.

Step 2: From this page select Site Actions | Edit Page:

Edit the page, go to the “Insert” tab in the Ribbon and click the “Web Part” option. In the “Web Parts” picker area, go to the “Media and Content” category, select the “Script Editor” Web Part and press the “Add button”.

Step 3: Once the Web Part is inserted into the page, you will see an “EDIT SNIPPET” link; click it. You can insert the HTML and/or JavaScript as in the following:




<style>

table, td, th {

border: 1px solid green;

}

th {

background-color: green;

color: white;

}

</style>

<script src=”https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js”></script>

<script src=”http://code.jquery.com/ui/1.10.3/jquery-ui.min.js”></script>

<script>

var myAngApp = angular.module(‘SharePointAngApp’, []);

myAngApp.controller(‘spCustomerController’, function ($scope, $http) {

$http({

method: ‘GET’,

url: _spPageContextInfo.webAbsoluteUrl + “/_api/web/lists/getByTitle(‘InfoList’)/items?$select=Title,Employee,Company”,

headers: { “Accept”: “application/json;odata=verbose” }

}).success(function (data, status, headers, config) {

$scope.customers = data.d.results;

}).error(function (data, status, headers, config) {

});

});

</script>

<h1> Angular JS SharePoint 2013 REST API !!</h1>

<div ng-app=”SharePointAngApp” class=”row”>

<div ng-controller=”spCustomerController” class=”span10″>

<table class=”table table-condensed table-hover”>

<tr>

<th>Title</th>

<th>Employee</th>

<th>Company</th>

</tr>

<tr ng-repeat=”customer in customers”>

<td>{{customer.Title}}</td>

<td>{{customer.Employee}}</td>

<td>{{customer.Company}}</td>

</tr>

</table>

</div>


</div>

Finally result show below:

 Retrieve list data using AngularJS REST API in SharePoint 2013
Retrieve list data using AngularJS REST API in SharePoint 2013

You May Also like the Following SharePoint Online Tutorials:

About Sagar Pardeshi

I am Developer working on Microsoft Technologies for the past 6+years. I am very much passionate about programming and my core skills are SharePoint, ASP.NET & C#,Jquery,Javascript,REST. I am running this blog to share my experience & learning with the community I am an MCP, MCTS .NET & Sharepoint 2010, MCPD Sharepoint 2010, and MCSD HTML 5,Sharepoint 2013 Core Solutions. I am currently working on Sharepoint 2010, MOSS 2007, Sharepoint 2013,Sharepoint 2013 App Dev, C#, ASP.NET, and SQL Server 2008.

View all posts by Sagar Pardeshi →

Leave a Reply