PnP JavaScript library with Angular JS in SharePoint

This post contains the sample code to use PnP JS Core component with Angular JS to show the list of child sites.

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.

[code language=”html”]
<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>

[/code]

Include HTML:

[code language=”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>

[/code]

Include Angular JS code:

[code language=”javascript”]
var spApp= angular.module(‘spng-App’, []);

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

[/code]

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

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

[/code]

Full Sample Code:

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

[code language=”html”]
<!– 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>
[/code]

Output:

Shows website using Angular JS & PnP-JS-Core
Shows website using Angular JS & PnP-JS-Core
Shantha Kumar
Shantha Kumar
Articles: 278

24,849 Comments

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

  2. 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

  3. I tried to deploy the angular application in SharePoint. steps I followed are as follows.
    Created a folder inside a document library
    Perform ng build — prod, following this dist folder is created locally.
    Renamed index.html to index.aspx
    copied all files from dist to the SharePoint document library folder created in step 1.
    when I navigate to index.aspx. I see page is blank, in console I see errors
    main.e9fa8fd459415f84aa41.js Failed to load resource: the server responded with a status of 404 ()
    polyfills.f6ae3e8b63939c618130.js Failed to load resource: the server responded with a status of 404 ()
    styles.fdd9f85d67cdd8f9fa9b.css Failed to load resource: the server responded with a status of 404 ()
    runtime.06daa30a2963fa413676.js Failed to load resource: the server responded with a status of 404 ()

Comments are closed.