Quantcast
Channel: SharePoint 2013 - Development and Programming forum
Viewing all articles
Browse latest Browse all 7589

How do you access List in another domain using AngularJS and REST from a SharePoint Hosted App in the Default.aspx page?

$
0
0

Hi,

I have a test SharePoint List called 'Employees' on my main site http://mysite.sharepoint.com. It has 3 columns, Title, FirstName and LastName. The following code works fine when placed in a Script Editor on a new page *this works because it is the same domain):

<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.3.15/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('Employees')/items?$select=Title,FirstName,LastName",  
            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.FirstName}}</td>  
                <td>{{customer.LastName}}</td>  
                </tr>  
        </table>  
    </div>  
</div>  

  Problem is when I try to run this code in an SharePoint Hosted App (it's own domain process) I get the access denied cross domain issue due to the App running in it's own sandbox. I just wondered if anyone knows the code to add to get this to work with Angular. Probably using Request Executor. I haven't tried anything yet, but I thought I'd ask first and save agro. All code I have seen is for same domain or they are just embedding code in page as I have done. I want this to work when I run the App. I guess MVC 6 would do this all better, but for now trying to get to grips with Angular in SharePoint 2013.

Thanks.

John.

   




Viewing all articles
Browse latest Browse all 7589

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>