In this post, we will discuss how we can display list items using AngularJS with Rest API in SharePoint Online or SharePoint On-premise. Before reading this you can read my previous post on AngularJS Tutorial for SharePoint 2016 Part 1
Here I have an announcement list where I have few items in my SharePoint Online site. The below code will work in both On-premise as well as Online versions of SharePoint.
Also read:
SharePoint 2013 Filtering and sorting of List data using Angular JS and REST API
Below code you can put inside a script editor web part in web part page.
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js”></script>
<script src=”https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js”></script>
<script src=”http://code.jquery.com/ui/1.10.3/jquery-ui.min.js”></script>
<div ng-app=”listApp”>
<div id=”App1″ ng-controller=”controller1″>
<h1>Team Announcements</h1>
<ul>
<div ng-repeat=”item in items”>
<p><li>{{item.Title}}</li></p>
</div>
</ul>
</div>
<script>
var appVar = angular.module(‘listApp’, []);
appVar.controller(“controller1”, function($scope){
GetListItems($scope, “Training%20Announcements”);
});
function GetListItems($scope, listName){
$.ajax({
url: “/_api/web/lists/GetByTitle(‘”+listName+”‘)/items”,
method: “GET”,
async: false,
headers: { “Accept”: “application/json;odata=verbose” },
success: function(data){
$scope.items = data.d.results;
},
error: function(sender,args){
console.log(args.get_message());
}
});
}
</script>
After you save the page the items from announcement lists will be appear like below:
Hope this will be helpful.
Download FREE SharePoint 2019 Installation PDF Guide
This FREE PDF contains, Steps by step guide to install SharePoint 2019 Preview, prerequisites, hardware and software new features. First impression to SharePoint Server 2019 new modern site, modern lists and modern document libraries.
You May Also like the Following SharePoint Online Tutorials:
