PnP JavaScript Library With AngularJS In SharePoint

In my previous posts, I have given an intro to PnP JS Core library and basic code snippets to access SharePoint objects using PnP-JS-Core component as in the following links:

The above links give you some basic idea about PnP-JS-Core library and how to use that library in accessing the SharePoint.

In this article, we will see how to use the PnP-JS-Core library with Angular JS framework. So I took the example from my old article:

Introduction to Angular JS in SharePoint 2013

and it uses the Angular JS 1 framework to display the sub sites with basic details in a table format.

What are the things we require?

Angular.min.js Angular JS 1 framework file
Pnp.min.js PnP JS file
Fetch.js Used by PnP js file to handle web requests and responses
Promise.js Used by PnP js file to handle web requests and responses

Note: Fetch JS & Promise JS files are required to run PnP methods in some browsers.

Include Script Files

I have uploaded the required script files under Site Assets library.

<script type="text/javascript" src="/siteassets/scripts/fetch.js"></script>
<script type="text/javascript" src="/siteassets/scripts/promise.min.js"></script>
<script type="text/javascript" src="/siteassets/scripts/pnp.min.js"></script>
<script type="text/javascript" src="/siteassets/scripts/angular.min.js"></script>

Include HTML elements

<div ng-app="spng-App">
<h2 class="web-heading">Sub Sites</h2>
<div ng-controller="spng-WebCtrl">
<table width="100%" cellpadding="10" cellspacing="2" class="web-table">
<thead>
<tr>
<th>Title</th>
<th>Id</th>
<th>Created</th>
<th>Web Template</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="_web in Webs">
<td>{{_web.Title}}</td>
<td>{{_web.Id}}</td>
<td>{{_web.Created | date:'medium'}}</td>
<td>{{_web.WebTemplate}}</td>
</tr>
</tbody>
</table>
<p ng-hide="Webs.length">No websites</p>
</div>
</div>

Include Angular JS code

<script type="text/javascript">
var spApp= angular.module('spng-App', []);
spApp.controller('spng-WebCtrl',function($scope)
{
//Add PnP JS code to retrieve web details
});
</script>

ng-app attribute to define the root element to auto-bootstrap an application
ng-controller attribute attaches the controller to the view, the controller has a method to call the PnP method to fetch the array web as a result.
ng-repeat attribute in the tr tag is an Angular repeater directive. The repeater tells Angular to create a tr element for each web (_web) in the array using the <tr> … </tr> tag as the template.
_web.Title, _web.Id, _web.Created, _web.WebTemplate return the actual value from the PnP JS library.

PnP JS Code

The following PnP method webs.get() used to retrieve the collection sub sites within a parent website.

Store the array of web objects to $scope angular directive as a property to it. And we must use the $scope.apply() to apply the changes after receiving the values from web response.

$pnp.sp.web.webs.get().then(function(result){
$scope.Webs = result;
$scope.$apply();
});

Full Sample Code

Insert the below code within Script Editor or Content Editor webpart.

<script type="text/javascript" src="/siteassets/scripts/fetch.js"></script>
<script type="text/javascript" src="/siteassets/scripts/promise.min.js"></script>
<script type="text/javascript" src="/siteassets/scripts/pnp.min.js"></script>
<script type="text/javascript" src="/siteassets/scripts/angular.min.js"></script>
<style type="text/css">
.web-table th{ background-color:#ddd; border:2px solid #fff;}
.web-table td{ background-color:#eee; border:2px solid #fff;}
.web-heading{ padding:2px;}
</style>
<div ng-app="spng-App">
<h2 class="web-heading">Sub Sites</h2>
<div ng-controller="spng-WebCtrl">
<table width="100%" cellpadding="10" cellspacing="2" class="web-table">
<thead>
<tr>
<th>Title</th>
<th>Id</th>
<th>Created</th>
<th>Web Template</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="_web in Webs">
<td>{{_web.Title}}</td>
<td>{{_web.Id}}</td>
<td>{{_web.Created | date:'medium'}}</td>
<td>{{_web.WebTemplate}}</td>
</tr>
</tbody>
</table>
<p ng-hide="Webs.length">No websites</p>
</div>
</div>
<script type="text/javascript">
var spApp = angular.module('spng-App', []);
spApp.controller('spng-WebCtrl', function($scope, $http) {
$pnp.sp.web.webs.get().then(function(result) {
$scope.Webs = result;
$scope.$apply();
});
});
</script>

Output