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:

• Introduction to PnP-JS-Core
• Basic SharePoint web operations using PnP-JS-Core
• Filtering SharePoint Object Collections using PnP-JS-Core

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.

<!-- 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, $http) {
$pnp.sp.web.webs.get().then(function(result) {
$scope.Webs = result;
$scope.$apply();
});
});
</script>

Output