Can we retrieve list data using angularjs in sharepoint 2013 hosted app?

Question

I want to retrieve list data by making http calls through angularjs. Is it possible following is my code in Visual Studio for sharepoint hosted app,

<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">

//*****************************SharePoint App Code***************************************************************************//

    var hostweburl;
    var appweburl;

    // Load the required SharePoint libraries
    $(document).ready(function () {
        //Get the URI decoded URLs.
        hostweburl =
            decodeURIComponent(
                getQueryStringParameter("SPHostUrl")
        );
        appweburl =
            decodeURIComponent(
                getQueryStringParameter("SPAppWebUrl")
        );

    });

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

    myAngApp.controller('spCustomerController', function ($scope, $http) {
        $http({
            method: 'GET',
            url: appweburl + "/_api/SP.AppContextSite(@target)/web/lists/getByTitle('Customers')/items" +
                    "?@target='" + hostweburl + "'" +
                    "&$select=CustomerID,CustomerName,CustomerAddress,CustomerState,CustomerCountry",
            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'];       

    }); */


    // Function to retrieve a query string value.
    // For production purposes you may want to use
    //  a library to handle the query string.
    function getQueryStringParameter(paramToRetrieve) {
        var params =
            document.URL.split("?")[1].split("&");
        var strParams = "";
        for (var i = 0; i < params.length; i = i + 1) {
            var singleParam = params[i].split("=");
            if (singleParam[0] == paramToRetrieve)
                return singleParam[1];
        }
    }

//***************************************************************************************************************************//

</script>

<%-- The markup in the following Content element will be placed in the TitleArea of the page --%> Page Title

<%-- The markup and script in the following Content element will be placed in the of the page --%>

<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 />

Title Employee Company

        </tr>
        <tr ng-repeat="customer in customers">
            <td>{{customer.Title}}</td>
            <td>{{customer.Employee}}</td>
            <td>{{customer.Company}}</td>
            </tr>
    </table>
</div>

pholpar · Accepted Answer · 2015-04-08 07:41:12Z

Yes, it is possible to use AngularJS with REST calls in SharePoint hosted apps, as illustrated here.

You should create you own service beside the controller, and rely on promisses.

For example, the service can be:

myAngApp.service('spCustomerService', function ($q, $http) {
    this.getCustomers = function ($scope) {
        var appWebUrl =
                 decodeURIComponent(
                     getQueryStringParameter("SPAppWebUrl")
             );
        var url = appWebUrl + "/_api/web/lists/getByTitle('Customers')/items?&$select=Title,CustomerID,CustomerName,CustomerAddress,CustomerState,CustomerCountry";
        return $http({
            method: 'GET',
            url: url,
            headers: { "Accept": "application/json; odata=verbose" }
        });
    };
});

and the controller:

function spCustomerController($scope, spCustomerService)
   var promise = spCustomerService.getCustomers($scope);
    promise.then(function (data, status, headers, config) {
        $scope.customers = [];
        angular.forEach(data.data.d.results, function (customer) {
            $scope.customers.push({
                Title: customer.Title,
                Employee: customer.CustomerID, // I don't know which field you need here
                Company: customer.CustomerCountry
            });
        });
    }, function (data, status, headers, config) {
        console.log("Error " + status);
    });
}

Thanks pholpar, the issue is resolved as I was initiating the variable's inside the document.ready those were getting null. As I initiated them outside the function it worked. — Niranjan Kulkarni
– Niranjan Kulkarni, Commented Apr 8, 2015 at 9:20

Niranjan Kulkarni · Accepted Answer · 2015-04-08 09:24:03Z

0

var hostweburl = decodeURIComponent(getQueryStringParameter("SPHostUrl"));
var appweburl = decodeURIComponent(getQueryStringParameter("SPAppWebUrl"));

Instead of,

var hostweburl; var appweburl;

// Load the required SharePoint libraries
$(document).ready(function () {
    //Get the URI decoded URLs.
    hostweburl =
        decodeURIComponent(
            getQueryStringParameter("SPHostUrl")
    );
    appweburl =
        decodeURIComponent(
            getQueryStringParameter("SPAppWebUrl")
    );

});

answered Apr 8, 2015 at 9:24

Niranjan Kulkarni

1,0271 gold badge13 silver badges34 bronze badges

Add a comment |

Paul Strupeikis · Accepted Answer · 2015-07-02 08:04:33Z

0

You can follow this link to solve the problem. It mentions manipulation with SharePoint list with angular js and ng grid.

https://codeplayandlearn.wordpress.com/2015/07/02/manipulation-with-sharepoint-list-with-flavored-of-angularjs-and-ng-grid/

edited Jul 2, 2015 at 8:04

Paul Strupeikis

3,8184 gold badges22 silver badges34 bronze badges

answered Jul 2, 2015 at 7:15

Dipen Shah

1

Add a comment |

Stack Exchange Network

Can we retrieve list data using angularjs in sharepoint 2013 hosted app?

3 Answers 3

Your Answer

Hot Network Questions

Can we retrieve list data using angularjs in sharepoint 2013 hosted app?

3 Answers 3

Your Answer

Sign up or log in

Post as a guest

Related

Hot Network Questions