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
Shows website using Angular JS & PnP-JS-Core

3 thoughts on “PnP JavaScript library with Angular JS in SharePoint

  1. Ariel Altamirano Reply

    Shantha, hi.
    I’m getting ReferenceError: “$pnp is not defined at new MainController”
    why is this?

  2. Shantha Kumar Post authorReply

    Please ensure pnp.js file loaded in the page.

  3. Test Reply

    Hi,

    For me only 1st time is getting bind in the page, but on printing the length I am getting total length. Please help

    Thanks

Leave a Reply

Your email address will not be published. Required fields are marked *