This article has been originally published by Bhawana Rathore in EnjoySharePoint.com. You can see the original article in the below URL. I still felt this is very much worth sharing in Wiki.

Display List Data in Tabular format in SharePoint Online using AngularJS

See also wrote another article on Rest API with Postman, you can check details below:
- Testing SharePoint 2016 or 2013 or SharePoint Online REST API using Postman

Here we will discuss how we can display list data in tabular format in SharePoint online using AngularJS. Here we have a list name as Product which few columns like ProductName, ProductImage, ProductRate etc.

Now we have added the below code inside a script editor web part inside a web part page to display the product list. Before that we also added the required js files inside the Style Library.

<script src="https://onlysharepoint2013.sharepoint.com/sites/Bhawana/Style Library/angular.min.js"></script>
<script src="https://onlysharepoint2013.sharepoint.com/sites/Bhawana/Style Library/jquery-2.0.3.min.js"></script>
 
<div ng-app="myapp"><b>Product Details</b>
 <div ng-controller="MyController"  class="ng-scope">
     <div ng-repeat="p in Products">
               <table style="background-color:#f07432">
               <tr><td align = "center"><b>Product Name: {{p.ProductName}}</b> </td></tr>
         <tr><td align = "center"><img ng-src={{p.ProductImage}} /> </td></tr>
               <tr><td align = "center"><b> Rate: USD. {{p.ProductRate}}</b></td></tr>    
               </table>
               <hr />
               </div>
   </div>
 </div>
 <script type="text/javascript">
var appVar = angular.module('myapp', []);
appVar.controller("MyController", function($scope){   
    GetListItems($scope);   
});
 
 function GetListItems($scope)
                              { $scope.loadREST = function () {
                              jQuery.ajax({
        type: "GET",
        dataType: "json",
        async: "true",
        headers: { "Accept": "application/json;odata=verbose" },
        success: function (data) {
            var newData = [];
            jQuery.each(data.d.results, function(index,value) {            
                
                 newData.push({ProductName: value.ProductName, ProductRate: value.ProductRate, ProductImage: value.ProductImage.Url});
            });
            $scope.$apply(function(){
                $scope.Products = newData;
            });
        },
        error: function () {
            alert("error");
        }
 
    });
 
};
 $scope.loadREST(); 
}
</script>


Once we save the product list will appear like below:



Hope this will be helpful.