How to get list data in RestApi using angularjs

Question

Here is my code how to get list data using rest api in AngularJS. Here I have problem I am unable to bind the list data in sp. I found that controller cannot be called.

<pre lang="Javascript">

var myAngApp = angular.module('SharePointAngApp', []);
alert('sss');
myAngApp.controller('spCustomerController', function ($scope, $http) {

    $http({
        method: 'Post',
        url: appWebUrl + "/_api/SP.AppContextSite(@TargetSite)/web/lists/getByTitle('InfoList')/items?@TargetSite='" + targetSiteUrl + "'",
        headers: { "Accept": "application/json;odata=verbose" }
    }).success(function (data, status, headers, config) {
        $scope.customers = data.d.results;
    }).error(function (data, status, headers, config) {
    });

    $(document).ready(function () {
        var appWebUrl = "";

        var targetSiteUrl = "";
        var ready = false;
        var params = document.URL.split("?")[1].split("&");
        for (var i = 0; i < params.length; i = i + 1) {
            var param = params[i].split("=");
            switch (param[0]) {
                case "SPAppWebUrl":
                    appWebUrl = decodeURIComponent(param[1]);
                    break;
                case "SPHostUrl":
                    targetSiteUrl = decodeURIComponent(param[1]);
                    break;
            }
        }
        // load the request executor script, once ready set a flag that can be used to check against later
        $.getScript(appWebUrl + "/_layouts/15/SP.RequestExecutor.js", function () {
            ready = true;
        });
    });

});


</pre>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<pre lang="HTML">
    <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>
</pre>

Answer 1

$.getScript has to finish and then call $http,also you need to pass the vars for the urls. look at this

var myAngApp = angular.module('SharePointAngApp', []);
myAngApp.controller('spCustomerController', function ($scope, $http, $location) {
    var params = $location.search();
    var appWebUrl = params.SPAppWebUrl;
    var targetSiteUrl = params.SPHostUrl; 
    var ready_check = false;

    // this has to finish and then call getData
    ready().then(getData);

    function ready() {

        // load the request executor script, once ready set a flag that can be used to check against later
        return $.getScript(appWebUrl + "/_layouts/15/SP.RequestExecutor.js", function () {
            ready_check = true;
        })

    }

    function getData() {
        return $http({
            method: 'POST',
            url: appWebUrl + "/_api/SP.AppContextSite(@TargetSite)/web/lists/getByTitle('InfoList')/items?@TargetSite='" + targetSiteUrl + "'",
            headers: { "Accept": "application/json;odata=verbose" }
        }).success(function (data, status, headers, config) {
            $scope.customers = data.d.results;
        }).error(function (data, status, headers, config) {
        });

    }

});

You should have a look at this $location, might be helpful.