PnP JavaScript library with Angular JS 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 links follows,

Introduction to PnP-JS-Core

Basic SharePoint web operations using PnP-JS-Core

Filtering SharePoint Object Collections using PnP-JS-Core

After reading the above links, which gives 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 on 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 required?

• 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:

<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:

var spApp= angular.module('spng-App', []);  

spApp.controller('spng-WebCtrl',function($scope)
{   
	//Add PnP JS code to retrieve web details
});  

• 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 PnP method webs.get() used in this example used retrieve the collection sub sites with in a parent website.

Storing the array of web object 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.

//Add PnP JS code to retrieve web details
    $pnp.sp.web.webs.get().then(function(result) {
        $scope.Webs = result;
        $scope.$apply();
    });

Full Sample Code:

Insert the below code with in Script Editor or Content Editor web-part.

<!-- Required Scripts -->
<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>

<!-- To style table in html -->
<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>

<!-- HTML code with Angular directives -->
<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>
<!-- PnP JS code with Angular JS -->
<script type="text/javascript">
var spApp = angular.module('spng-App', []);

spApp.controller('spng-WebCtrl', function($scope) {
$pnp.sp.web.webs.get().then(function(result) {
$scope.Webs = result;
$scope.$apply();
});
});
</script>

Output:

Shows website using Angular JS & PnP-JS-Core