I am going to explain you how to get list items from SharePoint list using restful api and angular js.
First of all you need to get the angular js file, you can get online link or you can download it from here
https://angularjs.org/ (version 1) and place inside any SharePoint library
Place a script editor web part on page and add below script.
<script type="text/javascript" src="/Style Library/vmware/js/angular.min.js"></script>
<script type="text/javascript">
var myAngApp = angular.module('div_ngapp', [ ]);
myAngApp.controller('div_ngcontroller', function ($scope, $http) {
$http({
method: 'GET',
cache: true,
url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getByTitle('Test')/items?$select=Title,ID",
headers: { "Accept": "application/json;odata=verbose" }
}).success(function (data, status, headers, config) {
$scope.listitems= data.d.results;
}).error(function (data, status, headers, config) {
});
});
<div ng-app="div_ngapp">
<div ng-controller="div_ngcontroller">
<div class="row" ng-repeat="item in listitems">
<h3>{{item.Title}}{{item.ID}}</h3>
</div>
</div>
</div>
Let me explain you whole script
var myAngApp = angular.module('div_ngapp', [ ]);
This is needed to activate angular js and it should be one of the html tag. In my case i have created a div and give its ng-app value as div_ngapp. You can try with different names as you wish.
Now you have to initialize controller function as
myAngApp.controller('div_ngcontroller', function ($scope, $http) {
$http({
method: 'GET',
cache: true,
url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getByTitle('Test')/items?$select=Title,ID",
headers: { "Accept": "application/json;odata=verbose" }
}).success(function (data, status, headers, config) {
$scope.listitems= data.d.results;
}).error(function (data, status, headers, config) {
});
});
You have to create another div inside your ng-app div and give its ng-controller value in my case i have created a div div_ngcontroller and passed its value in above function
Specify method as 'GET'
Pass the url _spPageContextInfo.webAbsoluteUrl this will give you the web absolute url and you have to give the list title from where you want to get the items
spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getByTitle('Test')/items?$select=Title,ID"
Above will get the items from list 'Test' and get only the fields specified after $select as you can see i am getting only title and id fields. You have to give the internal name of the fields after select.
success(function (data, status, headers, config) {
$scope.listitems= data.d.results;
In success function getting the list items in a scope variable; in my case i have created a scope array named listitems and all result is stored here.
In html you have to create the following structure
<div ng-app="div_ngapp">
<div ng-controller="div_ngcontroller">
<div class="row" ng-repeat="item in listitems">
<h3>{{item.Title}}{{item.ID}}</h3>
</div>
</div>
</div>
ng-app and ng-controller i have already explained.
ng-repeat="item in listitems"
This causes the html structure below this tag to repeat like a for loop.
listitems is scope array variable and item is another variable. You can give any names as you wish to give. Now you will get values by item variable
<h3>{{item.Title}}{{item.ID}}</h3> will be repeated n-times where n is number of items in list ( $scope.listitems)
To get the value you have to pass inside curly braces {{item.Title}} this gets the item title value inside h3 tag
Similarly you can get any column value by using this syntax.
Happy Coding!!!
