0

Here is the code on default.aspx page,

<%-- The following 4 lines are ASP.NET directives needed when using SharePoint components --%>

<%@ Page Inherits="Microsoft.SharePoint.WebPartPages.WebPartPage, Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" MasterPageFile="~masterurl/default.master" Language="C#" %>

<%@ Register TagPrefix="Utilities" Namespace="Microsoft.SharePoint.Utilities" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register TagPrefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register TagPrefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>

<%-- The markup and script in the following Content element will be placed in the <head> of the page --%>
<asp:Content ContentPlaceHolderID="PlaceHolderAdditionalPageHead" runat="server">
    <!--<script type="text/javascript" src="../Scripts/jquery-1.9.1.min.js"></script>-->
    <script type="text/javascript" src="../Scripts/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="/_layouts/15/sp.runtime.js"></script>
    <script type="text/javascript" src="/_layouts/15/sp.js"></script>


    <script type="text/javascript" src="../Scripts/angular.js"></script>
     <script type="text/javascript" src="../Scripts/angular-route.js"></script>



    <meta name="WebPartPageExpansion" content="full" />

    <!-- Add your CSS styles to the following file -->
    <link rel="Stylesheet" type="text/css" href="../Content/App.css" />

    <!-- Add your JavaScript to the following file -->
    <script type="text/javascript" src="../Scripts/App.js"></script>

    <script type="text/javascript">

        var myAngApp = angular.module('SharePointAngApp', []);

        myAngApp.controller('spCustomerController', function ($scope, $http) {
            $http({
                method: 'GET',
                url: "http://sp13dev:3030/_api/web/lists/getByTitle('InfoList')/items?$select=Title,Employee,Company",
                headers: { "Accept": "application/json;odata=verbose" }
            }).success(function (data, status, headers, config) {
                alert("success");
                $scope.customers = data.d.results;
            }).error(function (data, status, headers, config) {
                alert("fail");
            });
        });

        myAngApp.config(function ($httpProvider) {
                delete $httpProvider.defaults.headers.common['X-Requested-With'];
        });

    </script>


</asp:Content>

<%-- The markup in the following Content element will be placed in the TitleArea of the page --%>
<asp:Content ContentPlaceHolderID="PlaceHolderPageTitleInTitleArea" runat="server">
    Page Title
</asp:Content>

<%-- The markup and script in the following Content element will be placed in the <body> of the page --%>
<asp:Content ContentPlaceHolderID="PlaceHolderMain" runat="server">

    <div>
        <p id="message">
            <!-- The following content will be replaced with the user name when you run the app - see App.js -->
            initializing...
        </p>
    </div><br />


   <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.Employee}}</td>
                <td>{{customer.Company}}</td>
                </tr>
        </table>
    </div>
</div>

</asp:Content>

And here is the App.css code and there is nothing on App.js,

/* Place custom styles below */
table, td, th {
    border: 1px solid green;
}

th {
    background-color: green;
    color: white;
}

I think it is not making http call to server. I tried it hard, issue is not getting resolved. Somebody please tell me how to make a call to a sharepoint server using angular.js since it is not retrieving the data. And showing some cross domain & authentication problem.

2
  • Issue Resolved there was just a minor change in url since I was calling it from apps I have to give appweb url, Apr 8 '15 at 7:30
  • url: appweburl + "/_api/SP.AppContextSite(@target)/web/lists/getByTitle('Customers')/items" + "?@target='" + hostweburl + "'" + "&$select=CustomerID,CustomerName,CustomerAddress,CustomerState,CustomerCountry", Apr 8 '15 at 7:31
0

We need to include hostweb and appweb URL's when we deploy the sharepoint hosted apps since we are reading a list from an app it creates the cross domain issue, Hence we need to pass the different URL as shown below,

url: appweburl + "/_api/SP.AppContextSite(@target)/web/lists/getByTitle('Customers')/items" + "?@target='" + hostweburl + "'" + "&$select=CustomerID,CustomerName,CustomerAddress,CustomerState,CustomerCountry"‌​,

and pass those list fields and make a http call to the server using angularjs.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.