Personally I am currently trying to develop a script inside sharepoint using the Script Editor but it is falling into the error of my code, as if the connection was not correct, however, in the Dev Http google the rest request works. Here is the code:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.min.js"></script><scriptsrc="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>