Angularjs + Sharepoint + Rest API

Question

People I am currently trying to develop a script within Sharepoint using the Script Editor but it is falling into the error of my code, as if the connection was not correct, however, in google’s Http Dev the Rest request works. Follows the code:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.min.js"></script>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<div ng-app>
    <b>Welcome to AngularJS world in SharePoint 2013!</b>
    <div ng-controller="MyController" class="ng-scope">
        <div ng-repeat="p in Products">
            <table style="background-color:#f07432">
                <tr><td align="center"><b>Product Name: {{p.ProductName}}</b> </td></tr>
                <tr><td align="center"><img ng-src={{p.ProductImage}} /> </td></tr>
                <tr><td align="center"><b> Rate: Rs. {{p.ProductRate}}.</b></td></tr>
            </table>
            <hr />
        </div>
    </div>
</div>
<script type="text/javascript">
    function MyController($scope) {
        $scope.loadREST = function () {
            jQuery.ajax({
                url: _spPageContextInfo.webServerRelativeUrl + "/_api/web/lists/getbytitle('ProductList')/items?$select=ProductName,ProductRate,ProductImage",
                type: "GET",
                headers: { "Accept": "application/json;odata=verbose" },
                success: function (data) {
                    var newData = [];
                    jQuery.each(data.d.results, function (index, value) {
                        var pImage = value.ProductImage;
                        prImage = pImage.substring(0, pImage.indexOf(','));
                        newData.push({ ProductName: value.ProductName, ProductRate: value.ProductRate, ProductImage: prImage });
                    });
                    $scope.$apply(function () {
                        $scope.Products = newData;
                    });
                },
                error: function () {
                    alert("error");
                }
            });
        };
        $scope.loadREST();
    }
</script>

Answer 1

If you are entering the error condition, this means there has been some problem with the HTTP request made via Ajax.

In the code shown, the variable _spPageContextInfo is not defined, but is used:

url: _spPageContextInfo.webServerRelativeUrl + "/_api/web/lists/getbytitle('ProductList')/items?$select=ProductName,ProductRate,ProductImage",

Make sure that the URL effectively contains the correct address.

I recommend using either Firebug in Firefox or Developer Tools in Chrome.

With Chrome, it’s easy to analyze every detail of an HTTP request. Press SHIFT+CTRL+I, click on the tab "Network", reload your page and watch the results - your HTTP call made via Ajax by jQuery should appear. Then, right-click on the HTTP call that appeared in the list, then click "Copy All as HAR" - and then paste the result here into the question as it will contain all the details of the HTTP call that is failing.

Answer 2

Tries to change the:

url: _spPageContextInfo.webServerRelativeUrl + "/_api/web/lists/getbytitle('....

for:

url: _spPageContextInfo.webAbsoluteUrl+"/_api/web/lists/getByTitle('....