0

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>

1

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 Apr 8 '15 at 9:20
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")
    );

});
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/

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.