This article explains how to get the data from a SharePoint List using Angular JavaScript and the REST API. I used the REST API to talk to SharePoint and get the data from the list. I am not going to discuss much about the REST services since many folks have already done great work on explaining REST API services.
In this script we just see that we have first created an Angular Controller with the name "spCustomerController". We have also injected $scope and $http service. The $http service will fetch the list data from the specific columns of the SharePoint list. $scope is a glue between a Controller and a View. It acts as execution context for Expressions. Angular expressions are code snippets that are usually placed in bindings such as {{ expression }}.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<%@ Page Language="C#" inherits="Microsoft.SharePoint.WebPartPages.WebPartPage, Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register tagprefix="SharePoint" namespace="Microsoft.SharePoint.WebControls" assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta name="WebPartPageExpansion" content="full" />
<meta name="ProgId" content="SharePoint.WebPartPage.Document" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Angular JS</title>
<meta http-equiv="X-UA-Compatible" content="IE=10" />
<SharePoint:CssRegistration Name="default" runat="server"/>
<style>
table, td, th {
border: 1px solid green;
}
th {
background-color: green;
color: white;
}
</style>
<script type="text/javascript" src="../SiteAssets/JS/Scripts/JQueryv1.10.3.js"></script>
<script type="text/javascript" src="../SiteAssets/JS/Scripts/angular.min.js"></script>
<script type="text/javascript">
var myAngApp = angular.module('SharePointAngApp', []);
myAngApp.controller('spCustomerController', function ($scope, $http) {
$http({
method: 'GET',
url: _spPageContextInfo.webAbsoluteUrl + "/_api/lists/getByTitle('Country')/items?$select=Title,CountryCode,SortOrder,Created,Modified ",
headers: { "Accept": "application/json;odata=verbose" }
}).success(function (data, status, headers, config) {
$scope.customers = data.d.results;
}).error(function (data, status, headers, config) {
});
});
</script>
<h1> Angular JS SharePoint 2013 REST API !!</h1>
</head>
<body>
<form id="form1" runat="server">
<ZoneTemplate></ZoneTemplate></form>
<div ng-app="SharePointAngApp" class="row">
<div ng-controller="spCustomerController" class="span10">
<table class="table table-condensed table-hover">
<tr>
<th>Title</th>
<th>CountryCode</th>
<th>SortOrder</th>
<th>Created</th>
<th>Modified</th>
</tr>
<tr ng-repeat="customer in customers">
<td>{{customer.Title}}</td>
<td>{{customer.CountryCode}}</td>
<td>{{customer.SortOrder}}</td>
<td>{{customer.Created}}</td>
<td>{{customer.Modified}}</td>
</tr>
</table>
</div>
</div>
</body>
</html>
No comments:
Post a Comment