Angular SharePoint 2016 custom list display data

Question

I am trying to display SharePoint 2016 (On Prim) custom list item data into a webpart page with help of CEWP. 1) I created a custom list names "AngularDisplay" with default column "Title" 2) checked the JSON data rendering by url "/_api/web/lists/getByTitle('AngularDisplay')/items?$select=Title" 3) Copied the below code at CEWP

{
<html>
<title>Display Operation ByAJS</title> 
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.min.js" type="text/javascript"></script> 
<script>
var app = angular.module('myApp', []);
app.controller('DisplayCtrl',function($scope,$http) {
$http({
        method: 'GET',
        url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getByTitle('AngularDisplay')/items?$select=Title",
        headers: { "Accept": "application/json;odata=verbose" }
      }).then(function onSuccess(response) {
         var data = response.data;
         $scope.DisplayListData = data.d.results;
         }).catch(function onError(response) {
            alert("Error occured during data fetch");
           }); 
});
</script> 
</head>
<body ng-app="myApp">
<div ng-controller="DisplayCtrl"> 
   <table> 
      <tbody>
         <tr> 
            <th>ID</th> 
          </tr> 
         <tr ng-repeat="customer in DisplayListData"> 
            <td>{{customer.Title}}</td> 
          </tr> 
      </tbody>
   </table> 
</div> 
</body>
</html>

}

Am I missing some thing here. Please suggest.

Fire bug is just providing 2 warnings:

[Deprecation] 'window.webkitStorageInfo' is deprecated. Please use 'navigator.webkitTemporaryStorage' or 'navigator.webkitPersistentStorage' instead. AsyncDeltaManager$_retrieveDelta @ start.js?rev=TAG0:1

[Deprecation] Application Cache is deprecated in non-secure contexts, and will be restricted to secure contexts in M69, around September 2018. Please consider migrating your application to HTTPS, and eventually shifting over to Service Workers.

enter image description here

Please ping me at [email protected]

Pradip Sukale Pradip Sukale · Accepted Answer · 2018-07-10T17:09:39

I found that you are using ng-app tag inside body tag which is getting omitted. so you need to include ng-app tag inside parent div as below:

Code with output:

Angular SharePoint 2016 custom list display data

1 Answers